컴포넌트 렌더링

렌더링이란?

컴포넌트가 현재 props와 state의 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업을 의미

 

DOM 업데이트 과정

1. render 단계: React.createElement로 생성

2. reconciliation 단계: 이전 elements와 새로 생성된 elements 비교

3. commit 단계: DOM 업데이트

 

re-render되는 상황

1. props가 변경되었을 때

2. state가 변경되었을 때

3. Context value가 변경되었을 때

4. 부모 컴포넌트가  re-render되었을 때

 

→ 최적화 방법: render단계에 들어가는(re-rendering)  횟수 줄이기

 

[참고사이트]

https://yujonglee.com/reactrendering.html 

React 컴포넌트 렌더링 이해하기