목차

• 리액트 렌더링 과정
• 렌더링 촉발
• 컴포넌트 렌더링
• DOM에 커밋
• 요약
• 참고사이트

리액트 렌더링 과정

• 리액트 렌더링 과정은 크게 3가지 단계로 구분됩니다.리액트 공식문서 참조

1. 렌더링 촉발
2. 컴포넌트 렌더링
3. DOM에 커밋

렌더링 촉발

• 렌더링 촉발의 단계는 2가지 경우에 일어납니다.

1. 컴포넌트의 첫 렌더링인 경우

• 실행시킬 컴포넌트를 호출하는 경우 render() 를 통해 렌더링이 촉발 됩니다.

• 쉽게 말해 컴포넌트를 정의하고, 호출하는 부분입니다.

2. 컴포넌트의 첫 렌더링이 아닌 경우

• 첫 렌더링이 아닌경우 4가지 경우 리렌더링이 일어납니다.

1. 컴포넌트의 state(또는 상위 요소 중 하나)가 업데이트된 경우
2. Props가 바뀔 때
3. 부모 컴포넌트가 리렌더링 될 때
4. this.forceUpdate로 강제로 렌더링을 트리거할 때

---

컴포넌트 렌더링

react element 생성

• render 함수를 호출하면 jsx 문법을 return 합니다. 이 경우 babel에 의해 js 코드로 변환이 되고, 변환된 코드가 React.createElement를 호출하여 react Element를 만들게 됩니다.

Fiber Node 생성

• react Element와 state, props등 다양한 정보들을 조합하여 Fiber Node를 만들고, 이를 통해 Virtual Dom을 만들게 됩니다.

Virtual Dom

• Virtual Dom은 2가지 트리, 즉 더블 버퍼링 구조로 되어 있습니다.

• current 트리와 workInProgress 트리로 구성 되어 있습니다.

  current 트리

  • current 트리는 현재 실제로 화면에 표시되고 있는 Virtual DOM 트리를 나타냅니다.
  • current 트리는 이전 렌더링 사이클에서 생성되었고, 현재 화면에 렌더링된 내용을 나타냅니다.
  • current 트리는 사용자에게 보여지는 UI를 나타내는 것으로 현재의 실제 DOM 상태와 동일합니다.

  workInProgress트리

  • workInProgress 트리는 현재 렌더링 또는 업데이트 작업 중인 Virtual DOM 트리를 나타냅니다.
  • React는 변경된 부분만을 업데이트하고 렌더링하기 위해 workInProgress 트리를 사용합니다

• 즉 current트리와(이전) workInProgress트리를(현재) Diffing 알고리즘을 사용하여 어떤 부분이 달라졌는지 파악하여 Real Dom에 변경사항을 Real DOM에 적용하는 과정을 거칩니다.
  이것이 React의 핵심 업데이트 메커니즘 중 하나인 "Reconciliation(조정)"입니다.

• 변경된 부분을 수정하고 workInProgress트리가 Current 트리로 바뀌고, 새로운 workInProgress트리를 복제합니다. 이 과정을 계속 반복합니다.

사진출처 : 리액트톺아보기

---

DOM에 커밋

• Virtual Dom에서 수정된 사항을 Real Dom에 반영하고, ref로 Real Dom에 직접 접근하여 수정사항을 반영하는 부분을 Commit 단계에서 진행합니다.

• 이후 브라우저는 Real Dom을 기준으로 layout을 구성하고, Paint를 진행합니다. 이때 마운트 라고 합니다.

• 마운트 된 이 시점 이후 생명주기 메소드가 실행됩니다. 함수형 컴포넌트의 경우 useEffect가 실행됩니다.

---

요약

• 1번 단계에서 컴포넌트를 호출하면 render 메소드를 통해 렌더링이 Trigger 됩니다.

Render Phase

• 이후 Render Phase에서 jsx문법을 반환한 react Element를 props, state 등을 포함하여 Fiber Node로 확장하여, Vitual Dom을 생성 합니다.

• Vitaul Dom은 더블 버퍼링 구조로 되어있으며, current 트리와 workInProgress를 비교하여 변경사항을 파악 합니다.

Commit Phase

• Vitaul Dom에서 파악한 변경사항, ref로 인한 수정사항을 Real Dom에 반영하고, 브라우저에서 Real Dom을 가지고 layout 혹은 reflow 및 paint, repaint 작업을 진행하여 마운트 합니다. 이후 생명주기 메소드 혹은 함수형에선 useEffect()를 호출합니다.

사진출처 : 리액트 톺아보기

• 위의 과정에서 개발자는 컴포넌트를 생성하고, 호출하는 단계만 진행하고, 나머지 render phase, commit phase에서 진행하는 Virtual Dom, RealDom을 변경 및 생성은 리액트에서 처리를 해줍니다.

• 단 Real Dom에 직접 접근하고 싶다면 ref를 통해 처리가 가능합니다.

---

참고사이트

• 리액트톺아보기
• 리액트 공식문서
• 테코톡 솔로스타