레이아웃 연쇄와 시각적 깜박임 방지

레이아웃 폭주는 JavaScript가 반복문 안에서 DOM 속성을 읽는 작업과 DOM에 쓰는 작업을 번갈아 수행할 때 발생합니다. 쓰기 후에 이루어지는 각각의 읽기는 정확한 값을 반환하기 위해 브라우저가 레이아웃을 동기적으로 다시 계산하도록 만듭니다. 이로 인해 한 번이면 될 레이아웃 계산이 수십 번으로 늘어나 성능이 크게 저하될 수 있습니다.

React는 이벤트 처리기와 효과 안에서 이루어지는 모든 setState 호출을 하나의 재렌더링으로 일괄 처리합니다. 이러한 자동 일괄 처리는 한 번의 렌더링 주기 안에서 폭주를 일으키는 읽기-쓰기-읽기 패턴을 방지합니다. React 18에서는 일괄 처리가 비동기 콜백과 프로미스에도 적용되므로, 동시에 발생하는 상태 업데이트로 인한 레이아웃 폭주를 더 줄일 수 있습니다.

useEffect가 DOM을 읽고 상태를 업데이트하여 다시 렌더링을 발생시키면, 브라우저가 처음 상태로 한 번, 수정된 상태로 한 번 총 두 번 그리면서 깜박임이 발생합니다. 첫 번째 그리기는 잠시 나타났다가 교체됩니다. 높이, 너비, 위치와 같은 레이아웃 속성을 조정하는 효과에서 특히 두드러집니다.

크롬 DevTools를 열고, 추가 도구 아래의 점 세 개 메뉴를 통해 렌더링 탭으로 이동한 다음 "페인트 플래시"를 활성화합니다. 다시 그려지는 영역이 초록색으로 강조 표시됩니다. 첫 렌더링에서 컴포넌트가 깜박인 후 즉시 다른 레이아웃으로 다시 그려지는 것이 보이면, 이는 useEffect로 유발된 상태 업데이트 때문에 이중 그리기가 발생했다는 뜻입니다.

DOM 읽기와 그 결과로 발생하는 상태 업데이트를 useEffect에서 useLayoutEffect로 이동합니다. 이제 동일한 측정과 상태 업데이트가 그리기 전에 동기적으로 수행되고, 리액트가 같은 작업 블록 안에서 다시 렌더링하고 반영하므로 브라우저는 최종적으로 올바른 상태만 그립니다. DevTools에서 초록색 깜박임도 사라집니다.

깜박임 없는 패턴은 다음과 같습니다. useLayoutEffect에서 DOM을 읽고, 측정값을 사용해 setState를 호출하며, 리액트가 동기적으로 다시 렌더링하고 수정된 DOM을 반영한 다음, 브라우저가 최종 결과를 한 번 그립니다. 이는 툴팁 위치 지정, 고정 헤더의 위치 보정값, 애니메이션 설정에 사용하는 표준 패턴입니다.

거의 모든 효과는 useEffect에 넣어야 합니다. 예를 들어 데이터 가져오기(로딩 중 깜박임은 허용되며 예상되는 동작입니다), 이벤트나 스트림 구독, 기록과 분석, 타이머, 그리고 표시되는 레이아웃에 즉시 영향을 주지 않는 모든 효과가 이에 해당합니다. useEffect로 충분한 상황에서 useLayoutEffect를 과도하게 사용하면 성능을 저하시키는 잘못된 패턴이 됩니다.

useLayoutEffect는 시각적 출력에 반영되는 DOM 측정에만 사용해야 합니다. 예를 들어 툴팁 위치, 요소 크기에 따른 로직, 스크롤 위치 복원, 초기 크기를 읽는 애니메이션 설정에 사용할 수 있습니다. 첫 렌더링에서 잘못된 레이아웃이 한 프레임 동안 눈에 띄게 깜박인다면 전환해야 한다는 분명한 신호입니다.

두 훅의 형식은 동일합니다. useLayoutEffect(callback, deps)와 useEffect(callback, deps)의 유일한 차이는 콜백이 실행되는 시점입니다. 코드에서 한 단어만 바꾸면 서로 전환할 수 있습니다. 먼저 useEffect를 사용하고, 깜박임이 확인된 경우에만 useLayoutEffect로 변경합니다.

서로 다른 문제를 처리하기 위해 같은 컴포넌트에서 두 훅을 함께 사용하는 것은 올바르고 흔한 방식입니다. 예를 들어 차트 컴포넌트는 useLayoutEffect로 컨테이너 너비를 측정하고 SVG viewBox를 동기적으로 설정한 다음, useEffect로 차트 데이터를 비동기적으로 가져올 수 있습니다. 각 훅은 타이밍이 중요한 문제를 적절히 처리합니다.

DevTools의 페인트 플래시 기능 외에도 컴포넌트 안에 콘솔 카운터를 추가해 렌더링 횟수를 셀 수 있습니다. 컴포넌트가 처음 마운트될 때 콘솔에 "렌더링"이 두 번 기록된다면, 한 번은 초기 상태로, 한 번은 수정된 측정값으로 렌더링된 이중 그리기 상황입니다. 측정을 useLayoutEffect로 옮기면 마운트 후 기록되는 렌더링이 한 번으로 줄어들어야 합니다. 단, 엄격 모드에서는 두 번 실행될 수 있습니다.

useEffect 대신 useLayoutEffect를 사용해야 하는 올바른 이유는 어떤 상황인가요?

레이아웃 과도 변경은 DOM 읽기와 쓰기를 번갈아 수행할 때 발생합니다. 리액트의 일괄 처리는 렌더링 중 발생하는 대부분의 문제를 방지합니다. useEffect가 DOM을 측정하고 상태를 업데이트하면 두 번 그려지면서 깜박임이 발생합니다. DOM 측정을 useLayoutEffect로 옮기면 깜박임을 해결할 수 있습니다. 그 밖의 모든 경우에는 데이터 가져오기, 구독, 기록, 타이머에 기본적으로 useEffect를 사용합니다.