Search
⚛️

리액트의 랜더링

랜더링은 어떻게 일어나는가?

리액트의 랜더링이란?

브라우저
HTML, CSS 리소스를 기반으로 웹페이지에 필요한 UI를 그리는 과정
리액트
모든 컴포넌트가 props, state 값을 기반으로 어떤 DOM 결과를 브라우저에 제공할 지 계산하는 일련의 과정

랜더링이 일어나는 이유

1.
최초 랜더링: 처음으로 어플리케이션에 접속 시, 결과물을 보여주기 위한 랜더링
2.
리랜더링: 최초 랜더링 이후 발생하는 모든 랜더링

함수형 컴포넌트에서 리랜더링이 발생하는 경우

1.
useState의 setter가 실행되는 경우
2.
useReducer의 dispatdh가 실행되는 경우
3.
컴포넌트의 key props가 바뀌는 경우
4.
props가 변경되는 경우
5.
부모 컴포넌트가 랜더링 될 경우

리액트의 랜더링 프로세스