애니메이션 전 측정을 위한 useLayoutEffect

요소가 처음 렌더링될 때 눈에 띄게 튀거나 깜박인 뒤 제자리를 찾는 경우가 있습니다. 이는 대개 브라우저가 요소를 이미 그린 후 요소의 크기를 측정하거나 위치를 조정할 때 발생합니다.

사용자는 한 프레임 동안 잘못된 위치를 본 다음 갑작스러운 보정을 보게 되므로, 화면이 깨진 것처럼 느껴집니다.

useEffect는 브라우저가 페인트한 후 실행됩니다. 따라서 useEffect 안에서 측정값을 읽고 DOM을 업데이트하면, 변경 사항이 적용되기 전에 사용자가 이미 보정되지 않은 프레임을 보게 됩니다.

사용자에게 보이지 않아야 하는 시각적 위치 조정에는 페인트 후 실행 방식이 너무 늦습니다.

useLayoutEffect는 리액트가 DOM을 변경한 직후, 브라우저가 페인트하기 전에 동기적으로 실행됩니다. 그 안에서 수행하는 DOM 읽기나 쓰기는 사용자가 단 한 프레임도 보기 전에 반영됩니다.

따라서 측정과 위치 조정 결과가 즉시 올바르게 보여야 할 때 적합한 도구입니다.

useLayoutEffect 안에서 ref.current.getBoundingClientRect()로 요소의 레이아웃을 읽어 애니메이션을 시작하기 전 위치와 크기를 기록할 수 있습니다.

페인트 전에 실행되므로 눈에 띄는 깜박임 없이 측정과 시작 변환 적용을 모두 수행할 수 있습니다.

FLIP은 처음 위치, 마지막 위치, 반전, 재생을 뜻합니다. 요소의 처음 위치를 기록하고, 요소를 마지막 위치로 이동시킨 다음, 시각적으로 처음 위치로 돌아온 것처럼 보이도록 변환을 적용해 반전합니다. 마지막으로 변환을 제거해 마지막 위치로 애니메이션되도록 재생합니다.

실제 레이아웃은 즉시 변경되더라도 비용이 적은 transform만 사용하여 레이아웃 변경을 애니메이션으로 표현할 수 있습니다.

핵심적인 읽기 작업은 useLayoutEffect에서 수행합니다. 변경 전에 처음 사각형 정보를 기록하고 변경 후 마지막 사각형 정보를 기록한 다음 차이를 계산합니다. 페인트 전에 이 작업을 수행하므로 무엇인가 표시되기 전에 반전 변환이 적용되어 있습니다.

두 사각형 정보의 차이로 반전에 필요한 정확한 이동과 크기 조절 값을 구할 수 있습니다.

useLayoutEffect 안에서 반전 변환을 동기적으로 설정한 다음, 다음 프레임에 이를 제거하면 요소가 자연스러운 위치로 애니메이션됩니다. 재생 단계를 시작할 때는 흔히 requestAnimationFrame을 사용합니다.

페인트 전에 반전이 적용되므로 사용자는 요소가 가공되지 않은 마지막 위치에 있는 모습을 보지 못합니다.

서버에는 DOM이 없으므로 리액트는 서버 렌더링 중에는 useLayoutEffect가 아무 작업도 하지 않는다는 경고를 기록합니다. 레이아웃 효과는 브라우저에서만 의미가 있습니다.

이 경고는 측정할 대상이 없는 환경에서는 효과를 실행할 수 없다는 뜻입니다.

컴포넌트를 서버에서 실행해야 한다면 useEffect와 requestAnimationFrame을 함께 사용해 다음 페인트 전에 측정하거나, 브라우저에서만 조건부로 useLayoutEffect를 사용하십시오.

이렇게 하면 경고를 피하면서 중요하지 않은 애니메이션에 대해 페인트 직전에 가까운 실행 시점을 얻을 수 있습니다.

높이 애니메이션은 대표적인 사례입니다. useLayoutEffect에서 접힌 상태와 펼쳐진 상태의 높이를 측정한 다음, 명시적인 픽셀 값 사이를 애니메이션으로 연결하면 전환이 부드럽게 진행됩니다.

auto 높이는 애니메이션할 수 없으므로 실제 높이를 먼저 측정하면 구체적인 숫자 값으로 전환할 수 있습니다.

대부분의 작업에는 기본적으로 useEffect를 사용하십시오. 눈에 보이는 깜박임을 피하기 위해 레이아웃을 읽고 페인트 전에 DOM을 변경해야 할 때만 useLayoutEffect를 사용하십시오.

지나치게 사용하면 완료될 때까지 페인트를 차단하므로 성능이 저하될 수 있습니다.

효과 실행 시점에 대한 이해도를 확인해 보십시오.

페인트 후 측정하는 것이 깜박임 문제의 원인이고, useLayoutEffect가 페인트 전에 실행되며, FLIP 기법이 비용이 적은 변환으로 레이아웃 변경을 애니메이션하는 방법을 배웠습니다.

SSR 경고와 useEffect 및 requestAnimationFrame을 함께 사용하는 대체 방법도 살펴보았습니다.