랜더링은 어떻게 일어나는가?
리액트의 랜더링이란?
브라우저 | HTML, CSS 리소스를 기반으로 웹페이지에 필요한 UI를 그리는 과정 |
리액트 | 모든 컴포넌트가 props, state 값을 기반으로 어떤 DOM 결과를 브라우저에 제공할 지 계산하는 일련의 과정 |
랜더링이 일어나는 이유
1.
최초 랜더링: 처음으로 어플리케이션에 접속 시, 결과물을 보여주기 위한 랜더링
2.
리랜더링: 최초 랜더링 이후 발생하는 모든 랜더링
함수형 컴포넌트에서 리랜더링이 발생하는 경우
1.
useState의 setter 실행 시 값이 변경 됨 (Object.is 기반의 얕은 비교)
2.
useReducer의 dispatch가 실행 시 값이 변경 됨 (Object.is 기반의 얕은 비교)
3.
key props 변경 (언마운트 → 마운트 과정 발생, 완전한 재생성으로 캐싱 불가능)
4.
props 변경 (새로운 props 사용해 리랜더링)
5.
부모 컴포넌트가 랜더링 될 경우 (React.memo 사용 시 props 변경시에만 리랜더링)
6.
forceUpdate() 를 사용해 리랜더링 호출 시
