[React] React.js 시작하기

자동목차

React

React는 자바스크립트의 라이브러리이다.

Vue.js나 Angular.js 같은 프레임워크에는 라이브러리(테스트 , 라우팅, 상태관리 등)들이 포함 되어있음.

하지만 React는 라이브러리이기 때문에 다른 라이브러리들과 함께 사용이 된다.

💡 React는 SPA(Single Page Application)이다.

SPA는 말 그대로 하나의 화면에서 앱 동작이 이루어지는 애플리케이션을 뜻한다.

React Component

리액트 Component는 리액트로 만들어진 앱을 이루는 최소한의 단위이다.

즉, 리액트는 아래와 같이 여러 컴포넌트 조각으로 이루어져 있음.

이렇게 컴포넌트가 여러개로 나뉘어 있기 때문에 하나의 컴포넌트를 여러 곳에서 사용할 수 있고 또한 여러명이 각자 맡은 컴포넌트를 작업할 수 있어서 편리하고 재사용성이 좋음.

 

 

원래 리액트로 개발을 할 때 왼쪽의 이미지와 같이 클래스 컴포넌트로 많이 개발을 했다고 한다.

하지만, 리액트에서 리액트 Hooks 라는 것을 발표 한 뒤로 오른쪽의 함수형 컴포넌트를 많이 이용 한다고 한다.

 

Vitual DOM (가상돔)

가상돔을 알아보기 전에, 서버로부터 HTML 응답을 받고 화면에 표시 되는 웹페이지 빌드 과정 (Critical Render Path)을 알아보자면,

위와 같이 렌더 엔진이 문서를 읽어들이고 파싱하여 어떤 내용을 페이지에 렌더링 할 지 결정한다. 그리고 CSSOM과 DOM이 결합되어 화면에 표시되는 모든 노드의 콘텐츠 및 스타일 정보가 담긴 Render Tree를 형성하고 페이지에 표시되는 각 요소의 크기와 위치를 계산하는 Layout 단계로 이동한다. 그리고 최종적으로 실제 화면에 그리는 Paint 단계로 이르면 끝이다.  

 

여기서 문제점은 어떤 인터랙션에 의해 DOM에 변화가 생긴다면 그 때 마다 Render Tree가 재생성 된다. 즉 모든 스타일을 다시 계산하고 Layout → Repaint 과정을 다시 거치게 됨.  

 

이처럼 인터랙션이 많은 웹은 CRP과정을 처음부터 다시 거치게 되기 때문에 많은 비용이 발생한다. 이를 해결 하고자,

Virtual DOM(가상돔) 이라는 것을 사용한다.

가상 돔은 실제 DOM을 메모리에 복사 해준 것으로 생각하면 된다.

 

위 이미지처럼 가상 돔에서 작업을 진행 도중에 추가 되거나 수정 된 부분이 있다면 수정 된 부분만 실제 DOM에 적용을 시킨다. 바뀐 부분을 찾는 과정을 diffing이라 하고, 바뀐 부분만 실제 돔에 적용 시켜주는 것을 재조정(reconciliation)이라고 한다.

 

이러한 가상 돔 덕분에 요소가 많이 변경되었다 하더라도 수정 된 부분을 한번에 묶어서 실제 돔 수정으로 처리하기 때문에 돔을 조작하는 비용을 줄일 수 있다.

 

리액트 시작하기

리액트를 설치하기 전에 Node.js와 npm을 먼저 설치해야 한다.

Node.js란 간단히 알아보자면,

크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임으로서, 웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 연산 할 수 있다.

리액트 설치 시 Node.js가 필요한 이유 ?

리액트 앱은 웹 브라우저에서 실행 되는 코드여서 Node.js와 직접적인 연관은 없지만,

프로젝트를 개발하는 데 주요 도구들이 Node.js를 사용하기 때문.

이 때 사용하는 개발 도구는 바벨, 모듈화된 코드를 한 파일로 합치고 코드를 수정할 때 마다 웹 브라우저를 리로딩하는 등 여러기능을 지닌 Webpack 등이 있다.

 

Node.js는 구글에 Node.js 라고 검색하고 첫 번째 링크에 들어가서 다운 받으면 되는데, 최신 버전말고 왼쪽의 LTS 버전을 다운 받으면 된다.

요즘은 터미널에 npx create-react-app ./ 명령어를 입력만 하면 리액트 프로젝트가 자동으로 생성된다.

예전에는 Webpack 이나 Babel 같은 모듈을 설치하고 설정해야 리액트 앱을 시작할 수 있었다.

• 여기서 Webpack은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화 하는 라이브러리라고 보면 된다.
• Babel은 최신 자바스크립트의 문법을 지원하지 않는 브라우저들을 위해서 최신 자바스크립트 문법을 구형 브라우저에서도 돌아갈 수 있게 변환 시켜주는 라이브러리이다.

위와 같이 터미널 명령어를 입력하면

위와 같은 디렉토리 구성으로 리액트 프로젝트가 만들어지며 react를 시작하기 위한 첫 단계이다.