Render phase, Commit phase

위 이미지는 리액트의 함수형 컴포넌트 라이프 사이클이다.

함수형 컴포넌트는 React Hook이라고도 하며 React 16.8 버전 이후부터 React 요소로 추가되었다.

 

 

생명 주기 순서

1. 컴포넌트가 호출되어 로드된다.

2. 컴포넌트 내부 함수가 수행된다 - 데이터의 초기화

3. return(...) 함수 실행 - 화면의 렌더링을 수행

4. useEffect 수행

조건부 수행

5-1. useEffect() 실행 - 컴포넌트의 변화가 발생하는 경우 수행

5-2. useEffect() 실행 - 컴포넌트의 '소멸'이 발생하는 경우 수행

 

일단 제일 중요한 Render phase와 commit phase를 알아보자

 

render phase란

함수 컴포넌트를 실행하고,

함수의 결과값과 이전 Virtual DOM node를 비교하는 과정을 통해

diff가 있다면 해당 difff를 다시 그려야함을 체크하는 과정을 의미한다. ( diff => 차이점 )

 

commit phase란

diff를 real DOM에 반영하는 과정이다.

 

dirty check

render phase에서 diff 결과, 변화가 있을 때, 다시 그리는 DOM을 선택하는 것을 dirty check라고 부른다.

 

 

 

참고

💡 렌더링(Rendering) 이란?

- React 내에서는 컴포넌트 렌더링이라고도 하며, 컴포넌트 내에 엘리먼트 요소들(HTML, React 사용자 정의 태그)을 화면상에 그리는 동작을 의미한다.

💡 리 렌더링(re-Rendering) 이란?

 - 컴포넌트 내에 엘리먼트 요소들을 코드를 기반으로 화면의 그리는 작업을 다시 수행하는 것을 의미한다.

 

https://joong-sunny.github.io/react/react2/

[리액트] Virtual DOM과 diffing