최근 매일 아침마다 매일메일을 통해서 프론트엔드 관련 질문을 받고 있는데, 거의 모든 질문에 제대로 답하지 못하고 있어서 많이 부족함을 느낀다...ㅎ 그래서 읽으면서 잘 모르겠거나 혹은 더 알고 싶었던 개념들을 보충해서 블로그에 간단하게 정리하면서 공부해 보려 한다!

ㅤ

리액트 렌더링

리액트의 *렌더링 과정은 크게 렌더 단계(Render Phase)와 커밋 단계(Commit Phase)로 나뉜다.

ㅤ

Render Phase: 변화된 UI 계산 단계

렌더 단계(Render Phase)는 상태(state)나 props 변경에 따라 어떤 UI가 변경되어야 할지를 결정하는 단계이다.

• 실제 *DOM을 업데이트하지 않고, 변경 사항을 가상 DOM에서 계산한다.

• React 18에서 도입된 *Concurrent Mode를 통해서 비동기 처리가 가능하다.

• 순수 계산 과정이기 때문에 사용자 인터페이스(UI)에 즉각적인 영향을 주지 않는다.

ㅤ

Commit Phase: 변화된 UI 반영 단계

커밋 단계(Commit Phase)는 Render Phase에서 계산된 결과를 실제 DOM에 반영하는 단계이다.

• DOM 업데이트: 변화된 내용을 브라우저에 렌더링한다.

• useEffect와 같은 사이드 이펙트가 발생하는 훅들이 실행된다.

• UI가 사용자에게 즉시 반영되도록 동기적으로 처리된다.

ㅤ

Render Phase와 Commit Phase의 동기화

Render와 Commit *동기화를 통해 리액트는 효율적이고 일관된 UI 렌더링을 제공한다. 두 단계가 동기화 될 때, 다음 두 가지 특징을 가진다.

1. 단계적 진행: Render Phase가 완료되더라도 즉시 Commit Phase로 넘어가지 않는다.

   • 높은 우선순위 작업이 있을 경우, 먼저 처리한 뒤 Commit Phase를 실행한다.

   • 이를 통해 동기화가 필요한 작업을 효율적으로 관리할 수 있어서 사용자 경험성을 해치지 않는다.

2. 병목 관리

   • Render Phase에서 모든 변경 사항이 준비된 후 Commit Phase로 넘어가기 때문에 두 단계는 일관성 있게 진행된다.

   • 결과적으로 불필요한 재렌더링을 방지하며 최적화된 UI를 제공한다.

ㅤ

요약

ㅤ

개념 정리

• 리액트 렌더링: UI를 화면에 그리는 과정을 의미한다. 컴포넌트의 상태(state)나 속성(props)이 변경되면, 리액트는 새로운 UI를 계산하여 이를 실제 화면에 반영하는 작업을 수행한다. 이 과정에서 가상 DOM을 사용하여 UI를 업데이트한다.

• DOM(Document Object Model): 웹 페이지의 구조를 표현하는 객체 모델이다. HTML 문서를 객체로 변환하여 JavaScript로 동적으로 조작할 수 있게 해준다. DOM은 웹 페이지의 요소들(텍스트, 이미지, 버튼 등)을 객체 형태로 나타내며, JavaScript로 DOM을 수정하여 UI를 변경할 수 있다.

• Concurrent Mode: 리액트에서 동시에 여러 작업을 효율적으로 처리할 수 있도록 지원하는 환경이다. 사용자가 더 부드럽고 빠른 UI를 경험하도록 돕는다.

• 동기화: 여러 작업이나 단계가 일관되게 동시에 진행되는 것을 의미한다. 리액트에서 Render Phase와 Commit Phase가 동기화된다는 것은, 두 단계가 순차적으로 정확하게 실행되어 UI 변경이 올바르게 반영되도록 관리된다는 뜻이다. 이 과정은 UI의 일관성을 유지하고 불필요한 재렌더링을 방지한다.

ㅤ