리액트

리액트는 페이스북이 만든 사용자 UI구출을 위한 라이브러리이다.

사용자의 View에만 초점을 맞추고 있기 때문에

Routing 같은 기술은 리액트 자체에는 들어가있지 않다.

 

리액트에는 3가지의 대표적인 특징이 있다.

1. JSX 문법

2. 컴포넌트 기반

3. 가상 돔

 

1. JSX 문법

JSX는 자바스크립트 안에서 HTML 문법을 사용해서

View를 구성할 수 있게 도와주는 자바스크립트 문법이다.

 

원래 JS안에서는 HTML 태그를 사용하는 것이 불가능하지만,

JSX는 가능하게 해준다.

 

2. 컴포넌트 기반(Component)

리액트는 컴포넌트 기반 라이브러리이다.

컴포넌트 기반이라는 것은

기존의 웹페이지를 작성할 때처럼

하나의 HTML 코드를 집어넣고 하는 것이 아닌,

여러 부분을 분할해서 코드의 재사용성과 유지보수성을 증가시켜준다.

즉, HTML코드를 부분 파일로 담아 어떤 부분을 수정해야 한다고 하면

해당 부분의 파일만을 수정하면 된다는 것이다. 

 

3. 가상 돔(Virtual DOM)

가상 돔은 기존 돔의 한계를 탈피하기 위해 나온 대안이다.

 

DOM(Document Object Model)이란 말 그대로 문서 객체 모델이다.

우리가 사용하는 HTML 단위 하나하나를 객체로 생각한 모델이라고 보면 된다.

돔은 HTML 구조와 같이 트리 구조로 이루어져 있다.

그렇기에 돔의 요소를 많이 수정한다고 할 때, 불필요한 연산이 매번 일어나게 된다.

(프로그래머가 돔의 요소를 하나 수정하는 함수를 만들고 실행시킬 때,

렌더트리를 재생성하고, 레이아웃을 만들고. 페인팅하는 과정이 반복된다.)

 

이러한 문제를 해결하기 위해 가상 돔이 등장했다. 

가상 돔은 변화를 가상 돔에서 미리 인지해 변화시키는데

이 작업은 실제 돔이 아니기에 렌더링되지도 않고, 

실제 돔보다 연산 비용이 적게 든다.

가상 돔의 변화를 마지막에 실제 돔에게 던져주어,

모든 변화를 한번에 렌더링 되게 하는 것이다.

 

결과적으로 가상 돔을 사용하는 이유는,

실제 돔을 직접 변경할 수는 있지만, 해당 작업이 굉장히 값비싼 작업이기에

가상 돔에서 미리 최적화를 한 번 해준다는 것이다.

 

리액트를 사용하기 위해서는

Visual Studio Code,

NodeJS

가 필요하다.

 

비주얼 스튜디오 코드를 실행시켜 준 뒤,

리액트를 저장시킬 파일을 지정하여 

익스플로러 창에서 열어준다.

 

터미널 창을 켜

npx create-react-app hello

를 쳐준다

(npx create-react-app 파일이름 순이다.)

 

터미널창에 프로그레스 바가 생성되며

리액트가 깔리는 것을 확인할 수 있다.

 

cd hello

라는 문장이 터미널 창에 뜬다면 무사히 설치 된 것이다.

 

그 다음으로

Open Folder를 눌러

hello파일이 최상위 폴더가 되게끔 만들어준다.

 

그 뒤,

다시 터미널 창에

npm start

라는 명령어를 쳐 준다.

 

그러면 다음고 같은 창이 뜨는 것을 확인할 수 있다.

APP.js파일을 열어

중간에 다른 코드를 넣어보겠다.

(오른쪽 ) 12번줄을 살펴보면 <p>hello</p>라는 문장을 추가한 것을 확인할 수 있음

파일을 저장시켜놓고

다시 앞선 창으로 넘어가보면

이렇게 중간에 Hello란 글자가

추가되어 있는 모습을 확인할 수 있다.