useLayoutEffect

함정!

useLayoutEffect(setup, dependencies?)

import { useState, useRef, useLayoutEffect } from 'react';

function Tooltip() {
  const ref = useRef(null);
  const [tooltipHeight, setTooltipHeight] = useState(0);

  useLayoutEffect(() => {
    const { height } = ref.current.getBoundingClientRect();
    setTooltipHeight(height);
  }, []);
  // ...

useLayoutEffect의 매개변수

useLayoutEffct 반환값

useLayoutEffect 사용시 주의사항

const serverUrl = 'https://localhost:1234';

function ChatRoom({ roomId }) {
  const [message, setMessage] = useState('');

  const options = { // 🚩 re-render 될 떄마다 생성되는 객체 - 함수도 마찬가지이다.
    serverUrl: serverUrl,
    roomId: roomId
  };

  useEffect(() => {
    const connection = createConnection(options); // It's used inside the Effect
    connection.connect();
    return () => connection.disconnect();
  }, [options]); // 🚩 As a result, these dependencies are always different on a re-render
  // ...

// 비반응형 로직이라면
import { useState, useEffect } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(c => c + 1); // ✅ Pass a state updater // 직접 값을 주는 것이 아니라 state 업데이터를 전달해서 의존성을 없애는 것!
    }, 1000);
    return () => clearInterval(intervalId);
  }, []); // ✅ Now count is not a dependency

  return <h1>{count}</h1>;
}

useLayoutEffect 사용법

1. 브라우저에서 화면을 다시 그리기 전 레이아웃 측정하기

1. 툴팁을 원하는 위치에 렌더링한다(위치가 잘못된 경우에도).

2. 높이를 측정하고 툴팁을 배치할 위치를 결정한다.

3. 올바른 위치에 툴팁을 다시 렌더링한다.

function Tooltip() {
  const ref = useRef(null);
  const [tooltipHeight, setTooltipHeight] = useState(0); // You don't know real height yet
                                                         // 아직 실제 height 값을 모릅니다.

  useLayoutEffect(() => {
    const { height } = ref.current.getBoundingClientRect();
    setTooltipHeight(height); // Re-render now that you know the real height
                              // 실제 높이를 알았으니 이제 리렌더링 합니다.
  }, []);

  // ...use tooltipHeight in the rendering logic below...
  // ...아래에 작성될 렌더링 로직에 tooltipHeight를 사용합니다...
}

1. React는 이를 DOM에 배치하고 useLayoutEffect에서 코드를 실행한다.

2. useLayoutEffect는 툴팁 콘텐츠의 높이를 측정하고 즉시 다시 렌더링을 촉발한다.

3. Tooltip이 실제 tooltipHeight로 다시 렌더링된다(따라서 툴팁이 올바르게 배치된다).

4. React가 DOM에서 이를 업데이트하면 브라우저에 툴팁이 최종적으로 표시된다.

import { useRef, useLayoutEffect, useState } from 'react';
import { createPortal } from 'react-dom';
import TooltipContainer from './TooltipContainer.js';

export default function Tooltip({ children, targetRect }) {
  const ref = useRef(null);
  const [tooltipHeight, setTooltipHeight] = useState(0);

  useLayoutEffect(() => {
    const { height } = ref.current.getBoundingClientRect();
    setTooltipHeight(height);
    console.log('Measured tooltip height: ' + height);
  }, []);

  let tooltipX = 0;
  let tooltipY = 0;
  if (targetRect !== null) {
    tooltipX = targetRect.left;
    tooltipY = targetRect.top - tooltipHeight;
    if (tooltipY < 0) {
      // It doesn't fit above, so place below.
      tooltipY = targetRect.bottom;
    }
  }

  return createPortal(
    <TooltipContainer x={tooltipX} y={tooltipY} contentRef={ref}>
      {children}
    </TooltipContainer>,
    document.body
  );
}

문제해결

1. 오류가 발생합니다: “useLayoutEffect가 서버에서 아무것도 수행하지 않아요ˮ

1. 초기 콘텐츠를 렌더링한다.

2. 브라우저가 화면을 다시 칠하기 전에 레이아웃을 측정한다.

3. 읽은 레이아웃 정보를 사용하여 최종 콘텐츠를 렌더링한다.

4. 사용자 또는 프레임워크가 서버 렌더링을 사용하는 경우, React 앱은 초기 렌더링을 위해 서버의 HTML로 렌더링된다. 이를 통해 JavaScript 코드가 로드되기 전에 초기 HTML을 표시할 수 있다. 문제는 서버에는 레이아웃 정보가 없다는 것이다.

• useLayoutEffect를 useEffect로 바꿔라. 이렇게 하면 React가 페인트를 막지 않고 초기 렌더링 결과를 표시해도 괜찮다고 알려준다(Effect가 실행되기 전에 원래 HTML이 보이게 되므로).

• 컴포넌트를 클라이언트 전용으로 표시해라. 이렇게 하면 서버 렌더링 중에 가장 가까운 <Suspense> 경계까지의 콘텐츠를 로딩 폴백(예: spinner 나 glimmer)으로 대체하도록 React에 지시한.

• hydration 후에만 useLayoutEffect를 사용하여 컴포넌트를 렌더링할 수 있다. false로 초기화된 불리언 isMounted state를 유지하고, useEffect 호출 내에서 이를 true로 설정한다. 그러면 렌더링 로직은 다음과 같을 수 있습니다: return isMounted ? <RealContent /> : <FallbackContent /> 서버에서 hydration이 진행되는 동안 사용자는 useLayoutEffect를 호출하지 않는 FallbackContent를 보게 된다. 그러면 React는 클라이언트에서만 실행되고 useLayoutEffect 호출하는 RealContent로 대체한다.

• 컴포넌트를 외부 데이터 저장소와 동기화하고 레이아웃 측정이 아닌 다른 이유로 useLayoutEffect에 의존하는 경우, 대신 서버 렌더링을 지원하는 useSyncExternalStore를 고려해라.