렌더링 단계와 DOM 커밋

React의 작업 주기에는 렌더링 단계와 커밋 단계라는 두 가지 주요 단계가 있습니다. 렌더링 단계에서 React는 구성 요소 함수를 호출하고 UI의 가상 표현인 파이버 트리를 구성합니다. 커밋 단계에서는 React가 파이버 트리의 변경 사항을 실제 DOM에 적용합니다.

React 18의 동시성 모드에서는 렌더링 단계를 일시 중지하거나 중단하거나 다시 시작할 수 있습니다. React는 어떤 변경 사항도 커밋하기 전에 구성 요소 함수를 여러 번 호출할 수 있습니다. 따라서 구성 요소 함수는 순수해야 합니다. 함수가 화면에 보이는 업데이트마다 한 번 이상 실행될 수 있으므로 부수 효과를 포함해서는 안 됩니다.

렌더링 단계와 달리 커밋 단계는 항상 동기적으로 실행되며 완료될 때까지 계속됩니다. React는 DOM 변경 사항을 커밋하는 동안 중단될 수 없습니다. 이를 통해 DOM이 부분적으로 업데이트된 상태로 남지 않도록 합니다. 사용자는 각 커밋 후 항상 완전히 일관된 UI를 보게 됩니다.

커밋 단계에는 변경 전, 변경, 레이아웃이라는 세 가지 하위 단계가 있습니다. 변경 전 단계에서는 클래스 구성 요소의 getSnapshotBeforeUpdate가 실행되어 변경 전에 DOM 값을 읽습니다. 변경 단계에서는 React가 DOM 노드를 삽입하고 업데이트하고 제거합니다. 레이아웃 단계에서는 동기 효과가 실행되며, 구체적으로 useLayoutEffect와 클래스 구성 요소의 componentDidMount/componentDidUpdate가 실행됩니다.

useEffect는 수동 효과이므로 커밋 단계에서 실행되지 않습니다. 커밋 단계가 완료되고 브라우저가 화면에 그린 후 React는 수동 효과를 비동기적으로 예약합니다. 수동 효과는 브라우저가 업데이트된 DOM을 화면에 렌더링할 기회를 가진 후 실행됩니다.

브라우저는 레이아웃 단계(useLayoutEffect가 실행되는 단계)와 수동 효과 단계(useEffect가 실행되는 단계) 사이에 화면을 그립니다. 이것이 중요한 시점 차이입니다. useLayoutEffect는 화면을 그리기 전에 실행되고 useEffect는 화면을 그린 후에 실행됩니다. 시각적 출력을 변경하는 효과에서는 이 차이가 매우 중요합니다.

useEffect가 DOM을 읽고 상태를 업데이트하면(예를 들어 요소를 측정하고 크기 상태를 설정하면) React는 다시 렌더링하고 다시 커밋합니다. 브라우저는 처음 크기로 한 번, 수정된 크기로 한 번, 총 두 번 화면에 그립니다. 사용자는 수정된 크기가 나타나기 전에 잘못된 크기가 잠깐 표시되는 것을 볼 수 있습니다.

React는 내부적으로 각 컴포넌트 인스턴스마다 하나씩 "파이버" 노드로 이루어진 트리를 구축합니다. 각 파이버에는 컴포넌트의 상태, 효과, 출력이 저장됩니다. 렌더링 단계에서 React는 새로운 작업 중 파이버 트리를 생성합니다. 커밋 단계에서는 작업 중 트리가 현재 트리가 되고 이전 트리는 재사용됩니다.

React 엄격 모드는 부수 효과를 발견하는 데 도움을 주기 위해 개발 환경에서 컴포넌트 함수와 효과를 의도적으로 두 번 호출합니다. useLayoutEffect와 useEffect는 모두 마운트되고, 마운트 해제된 후 다시 마운트됩니다. 이 이중 호출은 프로덕션에서는 발생하지 않습니다. 효과가 제대로 정리되지 않는 버그를 드러내기 위한 것입니다.

렌더링 단계는 중단되었다가 다시 실행될 수 있으므로, 컴포넌트 함수는 부수 효과 없이 동일한 입력에 대해 동일한 출력을 만들어야 합니다. 함수 본문에서 효과 안이 아닌 곳에서 수행하는 변경, 구독, API 호출은 동시성 모드에서 예상보다 더 여러 번 실행되어 버그를 일으킵니다.

컴포넌트 함수 본문 안에서 DOM 속성을 직접 읽지 마십시오. 서버 렌더링에서는 DOM이 아직 존재하지 않을 수 있고, 다시 렌더링할 때는 오래된 상태일 수 있습니다. DOM이 최신 상태임이 보장되는 useLayoutEffect(화면에 그리기 전 읽기) 또는 useEffect(화면에 그린 후 읽기) 안에서 항상 DOM을 읽으십시오.

React의 렌더링 단계는 파이버 트리를 구축하며 중단될 수 있고, 커밋 단계는 DOM 변경 사항을 적용하며 항상 동기적으로 실행됩니다. 커밋 단계에는 변경 전, 변경, 레이아웃이라는 세 가지 하위 단계가 있습니다. useLayoutEffect는 화면에 그리기 전 레이아웃 단계에서 실행됩니다. useEffect는 화면에 그린 후 수동 효과로 실행됩니다.