Render Phase, Commit Phase

 

 

 

렌더 단계(Render Phase)

 

컴포넌트 렌더링: 렌더 단계는 컴포넌트 트리를 순회하면서 해당 컴포넌트의 UI를 생성합니다. 이때 render() 메서드 또는 함수형 컴포넌트의 반환값을 기반으로 UI를 생성합니다.

가상 DOM 업데이트: 렌더 단계에서는 생성된 UI를 기반으로 가상 DOM을 업데이트합니다. 가상 DOM은 실제 DOM에 대한 가상의 복제품으로, 실제 DOM을 직접 조작하는 대신 가상 DOM을 조작하여 성능을 향상시킵니다.

컴포넌트 업데이트 결정: 리액트는 이전 가상 DOM과 현재 가상 DOM을 비교하여 변경된 부분을 식별합니다. 이때 렌더링 결과가 이전 결과와 동일하면 실제 DOM에는 변경 사항이 반영되지 않습니다.

 

 

 

 

커밋 단계(Commit Phase)

 

실제 DOM 갱신: 커밋 단계에서는 변경된 부분이 실제 DOM에 반영됩니다. 이때 변경된 부분만을 선택적으로 갱신하여 불필요한 리렌더링을 방지하고 성능을 최적화합니다.

사이드 이펙트 처리: 커밋 단계에서는 사이드 이펙트(e.g., 네트워크 요청, 상태 변경 등)를 처리합니다. 이는 useEffect 훅이나 생명주기 메서드에서 등록된 작업들을 실행하여 컴포넌트의 동작을 완성합니다.

렌더링 결과 확인: 커밋 단계에서는 변경된 UI가 사용자에게 표시되기 전에 최종적으로 확인됩니다. 변경된 UI가 실제로 사용자에게 표시되는 것을 확인하고 완료된 렌더링 프로세스를 마무리합니다.

 

 

 

 

이처럼 렌더 단계와 커밋 단계는 리액트의 내부 알고리즘에서 상호작용하여 UI 업데이트를 효율적으로 처리합니다. 개발자는 이 과정을 명시적으로 제어할 필요가 없으며, 리액트가 자동으로 최적화된 방식으로 렌더링과 커밋을 수행합니다.