React 리액트 렌더링 과정

최초 렌더링 과정

1. 루트 엘리먼트, DOM 호출 (ReactDOM.render)
2. 루트 엘리먼트부터 마주친 엘리먼트의 type 검사
   1. DOM 엘리먼트
      자식 엘리먼트들에 대하여 동일한 과정을 재귀적으로 반복
   2. 컴포넌트 엘리먼트
      해당 컴포넌트에게 props를 입력함으로써 엘리먼트 트리를 얻음
      함수형 컴포넌트라면 해당 함수를 호출함으로써 클래스형 컴포넌트라면 컴포넌트 인스턴스를 생성한 후 render() 메소드를 호출함으로써 얻을 수 있음
      이렇게 얻은 엘리먼트 트리의 루트 엘리먼트에 대해 동일한 과정을 재귀적으로 반복함
3. 최종적으로 한 엘리먼트 트리(Virtual DOM)를 얻음
4. 해당 엘리먼트 트리를 실제 DOM에 일괄 반영하는 작업을 수행함

리렌더링 과정

state나 props가 변경되는 경우 리렌더링이 발생함

 

setState 메소드가 호출되면 render() 메소드의 호출을 통해 새로운 엘리먼트 트리가 반환됨

이렇게 새로운 트리가 반환되면 기존의 엘리먼트 트리에서 변경된 부분을 계산하기 위한 재조정 과정(O(n))을 거침 => 최초 렌더링과 같은 과정을 거침

 

여기서 계산된 차이점들은 후에 DOM을 효율적으로 갱신하기 위해 사용됨

 

재조정

리액트는 위와 같은 과정을 거쳐서 O(n)의 시간에 두 엘리먼트 트리에 대한 비교를 수행하는 휴리스틱 알고리즘을 사용한다

 

1. 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어낸다

2. 개발자가 각 엘리먼트에 key를 명시함으로써 React가 각 엘리먼트를 정확히 분별할 수 있도록 한다

 

비교 알고리즘은 다음과 같은 진행방식을 따른다

 

새 일레먼트 트리와 기존 엘리먼트 트리에 대해 루트 엘리먼트부터 시작해서 마주친 엘리먼트의 type을 기준으로 비교를 진행한다

기존의 엘리먼트 트리를 갱신해 나가는 방식으로 진행된다

 

세부적으로는 다음과 같다

 

1. 엘리먼트의 타입이 다른 경우
   이전 트리를 완전히 버리고 새로운 트리를 구축한다 이전 트리에 해당하는 DOM은 전부 삭제
2. 같은 타입의 DOM 엘리먼트인 경우
   두 엘리먼트의 속성을 확인해 동일한 부분은 유지하고 변경된 부분들만 갱신
   이후 자식 엘리먼트들을 대상으로 동일한 과정을 재귀적으로 반복
3. 같은 타입의 컴포넌트 엘리먼트인 경우
   컴포넌트 인스턴스는 동일하게 유지되어 렌더링 간 state가 유지됨
   대신 새로운 엘리먼트의 내용을 반영하기 위해 현재 컴포넌트 인스턴스의 props를 갱신한다

 

참조

https://it-eldorado.tistory.com/83

[React] 렌더링 과정 (+ 재조정, 생명 주기)