[리액트를 다루는 기술]을 읽어보며 리액트를 사용하며 놓쳤던 부분을 잡기 위해서 기록했습니다.
리액트 이해
컴포넌트란 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체입니다.
보통 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의합니다.
초기렌더링
리액트에서는 render() 를 이용해서 초기 렌더링을 합니다.
초기렌더링은 처음 어떻게 보일지 정하는 것입니다.
-
리액트는 html의 문자열이 아닌 뷰가 어떻게 생겼을지에 대한 객체 를 반환합니다.
-
컴포넌트 내부에는 또 다른 컴포넌트가 들어가 재귀적으로 렌더링하게 됩니다.
-
이렇게 최상위 컴포넌트의 렌더링 작업이 끝나면, 지니고 있는 정보들을 사용해 HTML 마크업을 만들고
이를 우리가 정하는 실제 페이지 DOM 요소 안에 주입합니다.
조화과정
뷰의 업데이트를 어떻게 진행하느냐 하는 부분입니다.
컴포넌트에서 데이터에 변화가 있을 때 새로운 요소로 갈아 끼웁니다.
이 작업 또한 render() 함수가 맡아서 합니다.
컴포넌트는 데이터를 업데이트 했을 때 단순히 업데이트한 값을 수정하는 것이 아니라,
새로운 데이터를 가지고 Render 함수를 또 다시 호출합니다.
이때 render() 함수에서 반환하는 결과를 바로 DOM이 아닌 이전 render()함수가 만들었던 정보와 비교합니다.
이 비교값을 연산한 수 둘의 차이를 알아내 DOM-TREE를 업데이트 합니다.
눈에 보기에는 처음부터 다시 렌더링하는 것 같지만, 최적의 자원을 사용해 이를 수행합니다.
리액트 특징
리액트의 특징 중 하나는 Virtual DOM을 사용한다는 점입니다.
우선 DOM부터 알아보겠습니다.
DOM
Document Object Model 의 약어로 객체로 문서 구조를 표현하는 방법으로 XML,HTML 로 작성합니다.
브라우저는 DOM을 활용하여 객체에 JS와 CSS를 적용합니다.
DOM은 트리 형태로, 특정 노드를 찾거나 수정이 쉽습니다.
<body>
<div>
<h1>HI</h1>
</div>
</body>DOM 단점
DOM은 여러 플랫폼과 브라우저에서 사용되는데, 문제점이 하나 있습니다.
동적 UI에 최적화되지 않았다는 점입니다.
동적으로 움직이는 요소가 있을 때마다, DOM에 직접 접근해서 변화를 주게 되면 성능 이슈가 발생하게 됩니다.
왜냐하면 DOM에 변화가 일어나면 웹 브라우저가
CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트하기 때문입니다.
Virtaul DOM
이러한 단점을 효율적으로 개선하기 위해 DOM 처리 횟수를 최소화하는 방식입니다.
실제 DOM에 접근해 조작하는 대신에, 추상화해 JS 객체를 구성해 사용합니다.
리액트에서 데이터가 변해 웹 브라우저에 실제 DOM을 변화시킬때의 절차입니다.
- 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리랜더링 합니다.
- 이전 VDOM에 있던 내용과 현재 내용을 비교합니다.
- 바뀐 부분만 DOM에 적용합니다.
오해
VDOM을 사용한다고 했을 때 무조건 빠르다곤 할 수 없습니다.
업데이트 시 처리를 간결하게 할뿐 속도가 빠르다고 단정지으면 안됩니다.
