[React] 렌더링 과정 알아보기

 

이전 글에서 우리가 작성한 코드가 브라우저상에 나타나기까지의 과정을 소개한 적이 있습니다.

React를 시작 하기 전(feat. ES6)

 

위 글을 읽어 보면 6개의 과정이 이루어 지는데, 6번째에 대해서는 설명을 적어두지 않았습니다. 여기서 우리가 사용하는 라이브러리 ( Next.js, React.js ) 들이 초기화 되고  화면에 그려지게 됩니다. 

 

지금 제가 공부하고 있는 React에서는 이 6번의 과정에서 2개의 Phase로 이루어져 있습니다. 

 

Render Phase

Render Phase는 컴포넌트의 변경사항을 파악하고 계산하는 단계

• React는 컴포넌트를 호출하여 화면에 표시될 내용을 파악합니다.
• 함수형 컴포넌트의 경우 함수를 실행하고 그 결과값(JSX)을 이전 Virtual DOM과 비교합니다
• 변경이 필요한 컴포넌트를 "dirty"로 표시하는 과정을 dirty check라고 합니다

특징

• 이 단계는 순수하고 부작용이 없습니다
• 필요한 경우 렌더링을 중단하거나 재시작할 수 있습니다
• 실제 DOM에는 아직 변화가 반영되지 않습니다

Commit Phase

Commit Phase는 Render Phase에서 계산된 변경사항을 실제 DOM에 적용하는 단계

• React는 Render Phase에서 파악한 변경사항을 실제 DOM에 반영합니다
• 초기 렌더링의 경우, appendChild() DOM API를 사용하여 모든 DOM 노드를 화면에 배치합니다
• 리렌더링의 경우, 필요한 최소한의 변경사항만을 DOM에 적용합니다

특징

• 이 단계는 동기적으로 실행되며 중단될 수 없습니다
• DOM 조작, 생명주기 메서드 호출, ref 업데이트 등이 이루어집니다
• 실제로 사용자가 UI의 변화를 볼 수 있는 단계입니다

 

위 두가지 Phase를 거친 후에 실제로 우리 눈에 보여지게 되는데요, 여기서 고려 사항이 있습니다. 우리가 컴포넌트내에 컴포넌트를 배치하게 되고, 각각의 컴포넌트들이 모두 초기화되면서 불필요한 렌더링이 계속 일어나게 될 수 있습니다. 

 

위 내용에 대해 고려할 사항들이 있는데, 3가지 함수를 통해 특정 Phase를 건너뛸 수 있습니다.

useCallback

useCallback은 함수를 기억하는 훅입니다.

• 콜백 함수를 메모이제이션하여 불필요한 렌더링을 방지합니다.
• 의존성 배열이 변경될 때만 새로운 함수를 생성합니다.
• 사용하면  Render Phase 스킵 가능 

•  

React.memo

React.memo는 컴포넌트를 기억하는 고차 컴포넌트 입니다.

• props가 변경되지 않으면 컴포넌트의 리렌더링을 방지합니다.
• 얕은 비교를 통해 props의 변경을 감지합니다.
• 사용하면 Commit Phase 스킵 가능

useMemo

useMemo는 값을 기억하는 훅입니다.

• 계산 비용이 높은 연산의 결과를 저장합니다.
• 의존성 배열의 값이 변경될 때만 재계산합니다.
• 사용하면 RenderPhase, Commit Phase 두 가지 다 스킵 가능

위에 설명한 것들을 사용하면 렌더링을 최적화 할 수 있지만, 꼭 정해진 상황에만 사용해야하는 것이 아니고 상황에 맞게 사용하는게 중요하다고 생각합니다!