useLayoutEffect로 DOM 요소 측정하기

element.getBoundingClientRect()는 뷰포트를 기준으로 한 요소의 크기와 위치를 나타내는 DOMRect 객체를 반환합니다. 여기에는 top, right, bottom, left, width, height가 포함됩니다. 정확한 값을 반환하기 위해 브라우저가 레이아웃을 계산하도록 강제하므로 꼭 필요한 경우에만 호출하십시오.

useEffect에서 getBoundingClientRect()를 읽으면 브라우저는 이미 화면에 그린 후입니다. 그런 다음 측정값을 바탕으로 상태를 설정하면 React가 다시 렌더링하고 브라우저가 다시 화면에 그립니다. 사용자는 두 번째 화면 그리기에서 수정되기 전까지 요소가 잠시 잘못된 위치나 크기로 표시되는 것을 볼 수 있습니다.

useLayoutEffect에서 측정값을 읽으면 DOM 변경 사항이 적용된 후, 화면에 그리기 전에 읽게 됩니다. 측정으로 인해 상태가 업데이트되면 React는 동기적으로 다시 렌더링하고 수정된 DOM을 커밋합니다. 이 모든 과정은 브라우저가 아무것도 화면에 그리기 전에 완료됩니다. 따라서 사용자는 한 번의 화면 그리기 주기에서 최종적으로 올바른 결과만 보게 됩니다.

도구 설명은 이를 여는 요소 가까이에 표시되어야 합니다. useLayoutEffect에서 getBoundingClientRect()를 사용해 해당 요소의 위치를 측정하고, 도구 설명의 절대 위치를 계산한 다음, 그 위치를 상태에 설정하십시오. 그러면 잘못된 초기 위치에서 보이는 점프 없이 첫 화면 그리기부터 도구 설명이 올바른 위치에 렌더링됩니다.

요소를 자연스러운(제약 없는) 크기에서 고정된 크기로 애니메이션하려면 제약을 적용하기 전에 자연스러운 크기를 알아야 합니다. useLayoutEffect에서 애니메이션 스타일을 적용하기 전에 요소의 높이를 읽고 상태에 저장한 다음, 그 값을 CSS 전환의 시작 키프레임 값으로 사용하십시오.

페이지에 고정 헤더가 있으면 본문 콘텐츠가 헤더 아래에 가려지지 않도록 헤더 높이만큼 위쪽 여백을 지정해야 합니다. 참조를 사용하여 useLayoutEffect에서 헤더 높이를 측정하십시오. headerRef.current.getBoundingClientRect().height를 콘텐츠 컨테이너의 paddingTop으로 설정하십시오. 첫 렌더링부터 레이아웃이 올바르게 표시됩니다.

useLayoutEffect 안에서 setState를 호출하면 React는 동일한 동기 작업 블록에서 즉시 또 한 번의 렌더링 및 커밋 주기를 실행합니다. 이 재렌더링에서도 해당 useLayoutEffect가 실행됩니다. 무한 루프가 만들어지지 않도록 주의하십시오. 새로운 측정값이 현재 상태 값과 다를 때만 상태를 업데이트하십시오.

서버에는 DOM 요소가 존재하지 않으므로 getBoundingClientRect()는 오류를 발생시키거나 0을 반환합니다. 다음 확인 조건으로 useLayoutEffect를 보호하십시오. if (typeof window === 'undefined') return; SSR 앱에서는 임시 크기로 하이드레이션한 후 클라이언트에서 하이드레이션이 완료되면 측정해야 할 수 있습니다.

useLayoutEffect를 사용한 한 번의 측정으로는 마운트 시점의 크기만 알 수 있습니다. 창 크기 변경, 동적 콘텐츠 또는 CSS 변경으로 요소 크기가 변할 때 이를 추적하려면 ResizeObserver를 대신 사용하십시오. 요소의 크기가 변할 때마다 콜백을 실행하므로 반응형 컴포넌트에 더 적합합니다.

여러 효과에서 동일한 측정값이 필요하다면 한 번만 계산한 후 컨텍스트를 통해 공유하거나 속성으로 하위 컴포넌트에 전달하십시오. 여러 useLayoutEffect 호출에서 동일한 getBoundingClientRect() 값을 계산하면 동기적인 레이아웃 읽기가 여러 번 실행되며, 각각의 작업은 비교적 비용이 큽니다. 가능한 경우 측정을 통합하십시오.

효과가 실행되기 전에 참조가 설정됩니다. useLayoutEffect가 실행될 때 ref.current는 DOM 요소를 가리키는 것이 보장됩니다. 다음 패턴이 동작하는 이유가 바로 이것입니다. useLayoutEffect(() => { const rect = ref.current.getBoundingClientRect(); ... }, []). 마운트된 컴포넌트의 레이아웃 효과 안에서 참조가 비어 있는 경우는 없습니다.

useEffect보다 useLayoutEffect에서 getBoundingClientRect()를 호출하는 것이 더 나은 이유는 무엇입니까?

변경 사항이 적용된 후 화면에 그리기 전에 DOM 측정값을 읽으려면 useLayoutEffect에서 getBoundingClientRect()를 사용하십시오. 이러한 측정으로 인한 상태 업데이트는 동일한 화면 그리기에 포함되는 동기적 재렌더링을 일으켜 깜박임을 방지합니다. typeof window 확인으로 SSR을 보호하십시오. 지속적으로 크기를 추적해야 한다면 ResizeObserver를 우선 사용하십시오.