✔ Rendering in React
리액트 렌더링
리액트 애플리케이션 트리 안에 있는 모든 컴포넌트들이 현재 자신들이 가지고 있는 props와 state 값을 기반으로 어떻게 UI를 구성하고 이를 바탕으로 어떤 DOM 결과를 브라우저에 제공할 것인지 계산하는 일련의 과정을 뜻한다.
간단하게 말하면, UI가 어떻게 생겼으면 좋겠는지 설명하도록 요청하는 프로세스 입니다.
🚦 렌더링 과정
- 렌더링 프로세스가 시작되면 React는 컴포넌트 루트부터 아래로 내려가며 업데이트가 필요하다고 지정되어 있는 컴포넌트를 찾는다.
- 업데이트가 필요한 컴포넌트를 만나면 클래스형 컴포넌트는 클래스 내부의
render()함수를 실행하게 되고, 함수형 컴포넌트의 경우에는FunctionComponent()그 자체를 호출하고, 그 결과물을 저장한다. - 렌더링 결과물은 JSX 문법으로 구성되어 있고, 자바스크립트로 컴파일되면서,
React.createElement()를 호출하는 구문으로 변환된다. 이때,createElement()는 자바스크립트 객체를 반환한다. - 이 렌더링 결과물을 수집하여, React의 새로운 트리인 가상 Virtual DOM(가상 DOM)과 비교해 실제 DOM에 반영하기 위한 모든 변경 사항을 차례차례 수집한다.
✨ 렌더링 단계
React 렌더링 과정은 크게 렌더 단계(Render Phase)와 커밋 단계(Commit Phase)로 나눌 수 있다.
렌더 단계(Render Phase)
- 컴포넌트를 렌더링하고 변경사항을 계산하는 모든 작업
- 렌더링 프로세스에서 컴포넌트를 실행하여 이 결과와 이전 가상 DOM을 비교하는 과정을 거쳐 변경이 필요한 컴포넌트를 체크하는 단계
type,props,key중 하나라도 변경된 것이 있다면 변경이 필요한 컴포넌트로 체크된다.
커밋 단계(Commit Phase)
- 렌더 단계(Render Phase)의 변경사항을 실제 DOM에 적용해 사용자에게 보여주는 단계
- 이 단계가 끝나야 브라우저 렌더링이 발생한다.
브라우저 렌더링이란, HTML과 CSS리소스를 기반으로 웹페이지에 필요한 UI를 그려내는 과정
여기서 React의 렌더링이 일어난다고 해서 무조건 DOM 업데이트가 일어나는 것은 아닌 것이 포인트다. 렌더링을 수행하여 변경사항을 감지했으나 변경사항이 없다면, 커밋 단계는 생략될 수 있다. ❗ 즉, React의 렌더링은 가시적인 변경이 일어나지 않아도 발생할 수 있다.
✍ 요약
- React에서 렌더링은 UI가 어떻게 생겼으면 좋겠는지 설명하도록 요청하는 프로세스 입니다.
- Rendering = Render Phase + Commit Phase
🥄 참조링크
모르면 알아가야지🚀