React virtualDOM

냐하호후·2022년 4월 14일

state를 변경할 때 직접 변경하면 안되고 setState를 이용해서 변경해야 하는 이유

setState가 컴포넌트의 lifeCycle 함수를 대신 호출해주기 때문이다.
setState는 비동기식으로 동작해 virtualDOM에 전달된 값에 따라 리액트는 화면을 다시 렌더링할 요소를 검사한다. 이런 과정상 모든 변화가 동기적으로 수행이되지 않고 한번에 묶여서 진행이 된다.
setState에 갱신할 상태값을 넣으면 동일한 key에 대해서는 가장 마지막 setState만이 갱신된다.
그래서 setState에 함수를 전달하면 함수의 인자는 state의 가장 최신값임을 보장받게된다.

또 직접 값을 변경하면 useEffect를 통한 lifecycle API도 사용할 수 없다.
그래서 React의 핵심 기능들이 정상적으로 동작하려면 setState를 이용해야한다.

virtual DOM이 일반DOM과 달리 변화를 감지하는 과정

virtual DOM은 간단히 말해 DOM차원의 '더블 버퍼링 개념'을 말한다.
이것은 변경사항을 한꺼번에 실제 브라우저의 DOM에 반영하는 방식입니다.
DOM을 직접 조작하는 행위는 브라우저에게 각 조작마다 reflow와 repaint하게 만든다. virtual DOM은 브라우저가 해석하는 대상이 아니기 때문에 reflow와 repaint를 수행하지 않는다. 예를들어 DOM을 100번 조작하는 경우가 생기면 virtual DOM은 이것을 Batch Queue(Batch:묶음)에 모아둔 후에 이것들을 모두 처리하고나서 한꺼번에 업데이트 사항을 브라우저의 DOM에 반영한다. 결과적으로 1번만 DOM을 다시 그리고도 100번의 업데이트 사항을 모두 반영하게 되는 것이다.

두개의 트리를 비교할때 리액트는 비교알고리즘(Diffing Algorithm)을 사용한다.

DOM은 트리 구조이기 때문에 변경된 부분을 감지하기 위해서 트리구조를 비교해야한다.
다 비교하지 않고 필요한 부분만 비교한다.

같은 계층
비슷한 컴포넌트는 트리 내에 동일한 계층에 위치할 것이다. 따라서 이 컴포넌트가 갑자기 부모가 바뀌는 일이 없다고 가정하고 같은 계층에 있는 컴포넌트끼리 비교한다.
key가 있는지 확인
하나의 jsx태그는 자바스크립트 객체로 구성되어있다.
이 객체에는 해당 객체가 리액트의 virtual DOM 요소임을 확인해주는 symbol값과 각각의 virtual DOM을 고유하게 구분하는 key값이 들어가고, map등을 통해 생성된 요소들의 경우 고유한 key가 있다. 리액트는 이 key들의 비교를 통해 리스트의 요소가 추가되었거나 삭제되었을 때 해당 내용을 빠르게 감지하고 반영할 수 있다.