[React] 1장 : 리액트 시작

👩🏻‍💻이주연👩🏻‍💻·2021년 1월 16일

React velopert

📙리액트를 다루는 기술

목록 보기

1/7

1. 리액트 이해

컴포넌트는 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체이다.

(1) 초기 렌더링

render() 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다. 더불어, 뷰가 어떻게 생겼고 어떻게 작동하는지 객체를 반환하는 함수이다.

render() 함수를 통해 초기 렌더링을 다루는데, 이때 두 가지 절차를 따른다.
1. 문자열 형태의 HTML 코드를 생성
2. 특정 DOM에 해당내용을 주입

(2) Re렌더링 (조화과정)

뷰에 수정사항이 생겼을 때 조화과정을 거친다.
컴포넌트는 데이터를 업데이트 했을 때 새로운 데이터를 가지고 render()함수를 다시 호출한다.

render()함수의 반환값을 바로 DOM에 적용하는 것이 아니라, 이전 render()함수가 만든 컴포넌트 정보와 현재 render() 함수가 만든 컴포넌트 정보를 비교하여 둘의 차이만 업데이트 하는 것이다.

2. 리액트 특징

(1) Dom

DOM이란?
객체로 문서 구조를 표현하는 방법, xml이나 html로 작성
웹 브라우저는 DOM을 활용해서 객체에 js나 css를 적용한다.

HTML 자체는 동적이고, js를 활용해서 이를 동적으로 만드는 것이다.

DOM의 문제점?
웹 브라우저에서 DOM에 변화가 생기면, 이를 업데이트 하고 페이지를 리페인트 하는데에 시간이 걸린다.
따라서 DOM을 최대한 적게 조작하는것이 효율적일것인데, 이때 Virtual Dom을 활용한다.

(2) Virtual Dom

Virtual Dom을 사용해서 실제 Dom에 접근해서 조작하는 대신에 이를 추상화한 js 객체를 이용한다. DOM의 복제품 정도로 생각하면 된다.

리액트에서 데이터가 변해서 웹 브라우저에서 DOM을 업데이트 하는 절차는 아래와 같다.

데이터를 업데이트하면 전체 UIfmf Virtual Dom에 Re렌더링 한다.

이전 Virtual Dom에 있던 내용과 현재 내용을 비교한다.

바뀐 부분만 실제 DOM에 적용한다.

물론 Virtual Dom을 쓴다고 해서 무조건 빨라지는건 아니고, 케바케인 점을 잊지말자.

리액트는 프레임워크가 아니라 라이브러리이다. 대부분의 웹 프레임워크가 MVC를 담당한다면, 리액트는 오직 V(view)만 담당하는 것.

3. 작업환경 설정 (우분투 기준)

리액트 프로젝트를 할때는 무조건 node.js를 설치해야한다.

(1) node.js 설치

node.js를 여러버전으로 설치하여 관리해주는 nvm 도구를 권장한다. 추후 버전을 업데이트 하거나 프로젝트 별로 버전이 다른 node.js를 사용할때 이 도구가 용이하기 때문.

// nvm 설치
$ curl -o- https://raw.githubusercontent.com/creationx/nvm/v0.33.2/install.sh | bash
$ nvm --version

// node.js LTS 버전 설치
$ nvm --install --lts
$ node -v

(2) yarn 설치

yarn은 node.js를 설치할때 패키지를 관리해주는 도구
(npm 도구로 대체할 수 있음)

$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
$ sudo apt-get update && sudo apt-get install --no-install-recommends yarn
$ echo 'export PATH=" $(yarn global bin):$ PATH"' >> ~/.bashrc
$ yarn --version