리액트 렌더링 과정

안녕하세요 YB 36기 곽서연입니다!

이 글에서는 리액트 렌더링 과정을 자세히 다뤄보고자 합니다. 

 

리액트의 렌더링

보통 렌더링이라함은 브라우저에서 HTML과 CSS를 기반으로 웹페이지에 필요한 UI를 그리는 과정을 의미합니다. 그러나 리액트에서의 렌더링은 브라우저에 필요한 DOM 트리를 만드는 과정을 의미합니다. 즉 리액트의 렌더링 프로세스는 모든 컴포넌트들이 가지는 props와 state 값을 기반으로 어떻게 UI를 구성하고 이를 바탕으로 DOM 결과를 브라우저에 어떻게 제공할 것인지 계산하는 과정을 의미합니다. 

 

리액트 렌더링이 일어나는 경우 

• 최초 렌더링
• 리렌더링
  
  • 클래스 컴포넌트의 setState가 실행도는 경우 
  • 클래스형 컴포넌트의 forceUpdate가 실행되는 경우 
  • 함수형 컴포넌트의 useState()의 두 번째 배열 요소인 setter가 실행되는 경우 
  • 함수형 컴포넌트의 useReducer()의 두 번째 배열 요소인 dispatch가 실행되는 경우 
  • 컴포넌트의 key props가 변경되는 경우 
  • props가 변경되는 경우 
  • 부모 컴포넌트가 렌더링되는 경우

리액트 렌더링 과정

1. 렌더링 프로세스가 시작되면 리액트는 컴포넌트 루트부터 아래로 내려가며 업데이트가 필요한 컴포넌트를 찾습니다.

2. 업데이트가 필요한 컴포넌트를 만나면 클래스형 컴포넌트는 클래스 내부의 render() 함수를 실행하게 되고, 함수형 컴포넌트의 경우에는 FunctionComponent() 자체를 호출해 결과물을 저장합니다.

3. 렌더링 결과는 JSX로 구성되어 있고, 자바스크립트로 컴파일 되면서 React.createElement()를 호출하는 구문으로 변환됩니다. createElement()는 자바스크립트 객체를 반환합니다. 

4. 이 렌더링 결과물을 수집해 리액트의 가상DOM과 비교해 실제 DOM에 반영학 위해 변경사항을 수집합니다. (Reconciliation)

 

렌더단계

컴포넌트를 렌더링하고 변경사항을 계산하는 모든 작업을 말합니다. 

렌더링 프로세스에서 컴포넌트를 실행해 실행 결과와 이전 가상 DOM을 비교하는 과정을 거쳐 변경이 필요한 컴포넌트를 체크하는 단계입니다.

type,props,key 중 하나라도 변경된 것이 있다면 변경이 필요한 컴포넌트로 체크됩니다. 

 

커밋단계

렌더 단계에서의 변경사항을 실제 DOM에 적용해 사용자에게 보여주는 단계입니다. 

이 단계가 끝나야 브라우저 렌더링이 발생합니다. 

 

❗ 리액트 렌더링이 일어난다고 해서 무조건 DOM 업데이트가 일어나는 것이 아닙니다. 렌더링을 수행해 변경 사항이 없다면 커밋 단계는 생략될 수 있습니다.