💻 개발/Node.js

[패스트캠퍼스 서포터즈 3기 - Node.js 강의 후기] 3주차 : 리액트 맛보기

고도고도 2021. 6. 21. 23:54

본 게시글은 PC버전에 최적화 되어있으며 패스트캠퍼스 서포터즈 3기로 활동하며

"한 번에 끝내는 Node.js 웹 프로그래밍 초격차 패키지 Online"을 무료로 협찬받아 작성한 게시글입니다.

 

NODEJS강의 NODEJS강의 NODEJS강의 NODEJS강의 NODEJS강의

위에서 보이는 아이콘들 다들 무엇인지 바로 알 것이다.

이러한 어플들의 특징은 웹 어플리케이션이라는 점인데

웹 어플리케이션은 우리가 기존까지 알고 있던 웹사이트와는 살짝 다르다.

웹 어플리케이션은 소프트웨어 공학적 관점에서 인터넷이나 인트라넷을 통해  브라우저에서 이용할 수 있는 응용 소프트웨어를 말한다.

 

과거의 웹페이지의 경우 MVC의 형태를 지니고 있었다.

Model - 데이터와 비즈니스 로직을 관리한다.

View - 레이아웃과 화면을 처리한다.

Controller - 명령을 모델과 뷰 부분으로 라우팅한다.

이러한 특징들을 가지고 있는데 MVC는 모델과 뷰의 의존성 때문에 모델에서 값이 바뀌면 뷰에서도 바뀌게 된다.

 

이러한 문제를 해결하고자 페이스북에서 리액트라는 라이브러리를 개발하게 된다.

 

컴포넌트 형태로 구현하고 관리하면서 코드의 재사용성을 극대화한다는 것

 

한번 리액트를 사용해보자.

사실 실전코딩 과목에서 리액트를 접해봐서 어느정도의 개념은 알고 있는 상태였다.

 

import React from "react"; 를 통하여 리액트를 사용하는 방법만 알고 있었는데 강사님은 CDN을 통해 리액트를 import하였다.

// import React from 'react';
// import ReactDom from 'react-dom';

// 함수형 컴포넌트
function helloWorldButton() {
    // 비구조화 할당
    const [isClick, setClickState] = React.useState(false); // 컴포넌트의 상태를 설정하는 메소드
    const text = isClick ? "Bye world!" : "Hello world!";

    return React.createElement("button", {
        onClick: () => setClickState(!isClick)
    }, text);
}

const rootContainer = document.getElementById("react-root");
ReactDOM.render(React.createElement(helloWorldButton), rootContainer);

우선 index.js이다.

컴포넌트에는 함수형 컴포넌트와 클래스형 컴포넌트가 있는데 함수형 컴포넌트가 최신화된 방법이라고 하셨다.

클래스형 컴포넌트는 리액트 공식 홈페이지에서 확인 가능하다.

 

https://ko.reactjs.org/

 

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

A JavaScript library for building user interfaces

ko.reactjs.org

<html>
<body>
<div id="react-root"></div>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="index.js"></script>
</body>
</html>

이건 index.html이다.

index.js를 실행한다고 보면 된다.

위의 코드를 실행하면 특정 element만 변화하는 걸 볼 수 있는데 아래 사진을 보자

 

 

이게 바로 리액트의 장점이다. 기존 코드를 재사용하면서 렌더링을 최소화하는 것이다. 실제로 위에서 언급한 여러 웹 어플리케이션들을 보면 특정 기능을 수행해도 화면이 깜빡거리지 않는 것을 볼 수 있다.

 

오늘은 리액트에 대해 약간 맛을 봤다. 확실히 신선했다. 처음 접하지도 않고 리액트, 리액트 네이티브를 실전코딩 때 접한지라 익숙한데도 그냥 신선했다. 17일에 종강은 했지만 DB과제 때문에 시간이 없는지라 제대로 수강은 못했지만 담주부터는 요일을 나눠서 열심히 들어볼 생각이다. 오늘부터 인턴도 하고 있어서 바쁘지만 재미있으니까 충분히 병행할 수 있다고 본다. js에 대해 어느정도 시야를 가지고 있다면 흥미롭게 들을 수 있는 강의라고 생각한다.

 

"한 번에 끝내는 Node.js 웹 프로그래밍 초격차 패키지 Online"을 무료로 협찬받아 작성한 게시글입니다.

 

노드JS 노드JS 노드JS 노드JS 노드JS

 

https://bit.ly/3pdy7Wq

 

한 번에 끝내는 Node.js 웹 프로그래밍 초격차 패키지 Online | 패스트캠퍼스

12가지 프로젝트로 배우는 Node.js! 블라인드 앱 클론 코딩, MBTI 테스트 사이트, 퀴즈 사이트, 브런치 웹 크롤러 등 유저들이 좋아하는 사이트를 내 손으로 직접 만들어 볼 수 있어요! 프론트엔드+백

fastcampus.co.kr