1.1 왜 리액트인가?
리액트 이해
리액트는 오직 View만 신경쓰는 라이브러리이다
리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체가 있는데, 이를 컴포넌트라 한다. 컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의한다.
사용자 화면에 뷰를 보여 주는 것을 렌더링이라 한다. 리액트 컴포넌트가 최초로 실행한 '초기 렌더링'과 컴포넌트의 데이터 변경으로 다시 실행되는 '리렌더링'이 존재한다.
초기 렌더링
리액트에서는 렌더링을 다루는 함수인 render 함수가 존재한다.render() {...}
render 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다. render 함수를 실행하면 그 내부에 있는 컴포넌트들도 재귀적으로 렌더링한다. 이렇게 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업을 만들고, 이를 우리가 정하는 실제 페이지의 DOM 요소 안에 주입한다.
조화 과정
컴포넌트에서 데이터에 변화가 있을 때, 새로운 요소로 갈아 끼운다. 이 작업 또한 render 함수 맡아서 한다. 컴포넌트는 데이터를 업데이트했을 때 새로운 데이터를 가지고 render 함수를 또 다시 호출한다.이때 render 함수가 반환하는 결과를 곧바로 DOM에 반영하지 않고, 이전에 render 함수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교한 후 둘의 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트 한다
1.2 리액트의 특징
Virtual DOM
DOM이란?
DOM은 Documents Object Model의 약자로 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성한다.
DOM은 웹 브라두저 단에서 DOM에 변화가 일어나면 웹 브라우저가 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트한다. 이 과정에서 시간이 오래걸린다.
리액트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행한다.
Virtual DOM
리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트할 때는 다음 세 가지 절차를 거친다.
- 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다.
- 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.
- 바뀐 부분만 실제 DOM에 적용한다.
단, Virtual DOM을 사용한다해서 무조건 빠른것은 아니다. 데이터가 변하지 않는 정적인 페이지에서는 오히려 리액트를 사용하지 않는 편이 더 나은 성능을 보인다.