[React] React 개념 / 설치

[해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다.
따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.]

React Main Logo

 

이번엔 React를 공부하면서 알게 된 개념에 대해 정리해보도록 하겠다.

개발환경

Web을 개발할 수 있는 IDE는 다양하게 존재한다. Web Storm, Atom 등등 있을 것이지만 최근에 핫 한 IDE은 당연 VSCode일 것이다. 여러 Module을 Store에서 쉽게 설치할 수 있을 뿐만 아니라, 매우 가볍다. 따라서 이번 실습은 VSCode를 기반으로 작업하도록 하겠다.

 

또한 기본적으로 설치해야하는 프로그램이 있다.

1. Node.js
2. Create React APP (React Library)

기본적으로 React를 돌릴 때 Node의 서버를 통해서 돌리는 듯싶다. 설치하는 과정은 아래에서 설명하겠다.

React

시작에 앞서 간단한 개념부터 알아보자.

 

DOM

Dom은 Document Object Model의 약자로 풀어쓰면 '문서 객체 모델'이다. HTML이나 XML 같은 문서의 태그들을 조작 가능하도록 객체화시킨 것이기 때문에, JavaScript를 통해 조작할 수 있다. 또한, DOM은 트리 형태의 자료구조를 가지고있다. 크게 요소 노드, 텍스트 노드, 속성 노드 등이 존재한다.

따라서, 웹의 HTML 문서를 읽을때 문서에 정의된 요소를 해석하며 생성하는 것이 DOM이다.

 

Virtual Dom

Virtual Dom은 DOM을 가상의 DOM으로 새로 생성하여 메모리에 할당한다. 이후 이벤트로 인해 데이터가 변하면 DOM을 참조하는 것이 아니라 Virtual DOM을 이용하여 렌더링을 하고, 기존의 DOM과 비교하고 변경된 곳만 업데이트를 해준다. 이로써 실제 DOM의 변화를 최소화시켜주고 필요한 부분만 변경시켜주기 때문에 좋은 성능을 낼 수 있게 되었다.

 

Component

React에서 Component는 Java로 치면 일종의 Class다. 실제로 형태를 보면 Class로 선언되고 Component를 상속받아 이용한다. 내부엔 UI를 구성할 수 있는 JSX가 있어 개별적인 View를 생성할 수 있다. React는 이러한 Component들을 조립하여 전체적인 View를 만들어 나간다.

---

React는 Facebook에서 개발한 JavaScript Library로 View에 특화되게 설계가 되었다. 여기서 나오는 개념 중 한개가 Component인데 React의 핵심이기도 하다. Java로 치면 Class라 생각하면 된다. Component는 최소한의 기능을 하는 부품(Module)으로 모든 기능은 이 Component의 조합을 통해 완성이 된다.

 

React의 개념을 설명하기 전 과거 Framework를 보자. 이전에도 Angular, Backbone 등 다양한 Framework들이 존재했었다. 기본적으로 사용되는 디자인 패턴은 MVC 패턴을 적용하였다.

 

MVC 패턴

• M(Model) : 데이터를 처리
• V(View) : 사용자에게 보여주는 UI
• C(Controller) : 이벤트가 발생했을 때 처리하는 역할

이러한 구조는 특정한 이벤트가 발생하여 데이터가 저장된 Model에 값이 변화가 일어나면, Controller를 통해 View에도 이를 변화시켜주게 된다. 이때 변화가 일어나면 특정 DOM을 가져와서 View를 Update를 해줘야하는 로직을 모두 정해줘야 했다. 이러한 과정이 상당히 복잡하여 어디서 버그가 발생할지 모르고, 새로운 개발자가 투입되더라도 코드를 이해하는데 어려움을 겪었다고 한다.

이러한 문제를 해결하기 위해 Facebook이 생각한 것이 이벤트가 발생하면 View를 Update를 하는 것이 아니라, 해당 View를 없애고 새로 만들도록 구상하였다. 이러한 기술을 적용시키기 위해 나온 것이 Virtual DOM 이다.

필요한 부분만 비교하여 변경하고 갱신하기 때문에 빠르게 가볍게 동작된다는 게 React의 큰 특징이다.

 

설치

우선 Node.js를 설치하도록 하자.

Node.js는 공식 사이트에서 쉽게 설치할 수 있다.

 

https://nodejs.org/ko/

 

Node.js가 정상적으로 설치되면 다음과 같은 명령어를 cmd에서 치면 버전이 나온다.

node -v

 

Node.js Version Check

다음은 Node Package를 설치할 수 있는 npm이 필요하다.

npm은 기본적으로 Node.js와 같이 설치되기 때문에 따로 설치할 필요가 없다.

npm 또한 다음의 명령어를 통해 설치가 됐는지 확인할 수 있다.

npm -v

 

npm Version Check

다음으로 React를 설치하도록 하자.

우선 다음의 명령어를 입력하여 React를 설치하자

npm install -g create-react-app

 

설치가 진행되는데 약간의 시간이 들어간다. 이후 성공적으로 설치됐는지 확인은 위에서 했던 방법과 동일하게 Version을 확인하면 된다. 다음의 명령어를 입력하여 Version이 나오는지 확인하자.

create-react-app -V

!주의 소문자 v가 아니라 대문자 V이다!

React Version Check

프로젝트 생성 및 실행

기존 웹 프로젝트를 생성하려면 복잡한 개발 환경설정을 해줘야 했다. 하지만 React는 명령어 한 줄만 치면 자체적으로 개발 프로젝트 환경을 다 잡아서 VSCode에 자동으로 만들어준다.

명령어 형태는 다음과 같다.

create-react-app 프로젝트명

 

프로젝트가 성공적으로 생성이 되면 Happy hacking! 이 뜨고 종료가 될 것이다.

 

프로젝트를 생성하고 실행을 시키려면 console에서 다음의 명령어를 입력하면 프로젝트가 빌드되며 실행이 된다.

npm start

 

원래 기본 포트는 3000번으로 사용된다.
지금은 다른 프로젝트를 실행하고 있었기에 3001번으로 대신 잡혔다.

다음의 명령어를 치면 프로젝트를 생성하고 한 번에 실행시킬 수 있다.
create-react-app 프로젝트 이름 && cd ./프로젝트이름 && npm start

 

빌드가 성공적으로 되면 다음과 같은 창이 나온다.