useLayoutEffect

 

🎯 useLayoutEffect란 무엇일까요?

**useLayoutEffect**는 **DOM(화면 요소)**이 그려지기 전에 실행되는 React 훅이에요.

"그게 무슨 말이죠?" 하고 궁금할 수 있죠?
React에서 화면이 업데이트되면 다음과 같은 단계가 있어요:

1. 컴포넌트 렌더링 → 화면에 뿌릴 준비를 함.
2. DOM 업데이트 → 화면에 실제로 요소를 그려요.
3. useEffect 실행 → 화면이 다 그려진 다음에 실행돼요.
4. useLayoutEffect 실행 → 화면이 그려지기 직전에 실행돼요.

 

🐢 useEffect와 useLayoutEffect의 차이점 비유

여러분이 그림을 그리는 화가라고 상상해 볼게요. 🎨

• **useEffect**는 그림이 완전히 다 그려진 후에 작업하는 거예요.
  → "그림을 다 그리고 나서 액자에 넣는다."
• **useLayoutEffect**는 그림이 그려지기 직전에 작업하는 거예요.
  → "그림을 그리기 직전에 캔버스 크기나 위치를 미리 조정한다."

 

🛠️ useLayoutEffect 코드 예시

화면에 요소를 그리기 전에 크기나 위치를 조정하는 예제를 보여드릴게요.

import React, { useState, useEffect, useLayoutEffect, useRef } from "react";

function BoxExample() {
  const [height, setHeight] = useState(0);
  const boxRef = useRef();

  // useLayoutEffect: 화면이 그려지기 직전에 실행돼요.
  useLayoutEffect(() => {
    const box = boxRef.current;
    const boxHeight = box.getBoundingClientRect().height; // 요소 높이 가져오기
    setHeight(boxHeight);
    console.log("useLayoutEffect 실행됨! 요소 높이:", boxHeight);
  }, []);

  // useEffect: 화면이 다 그려진 후에 실행돼요.
  useEffect(() => {
    console.log("useEffect 실행됨!");
  }, []);

  return (
    <div>
      <div
        ref={boxRef}
        style={{
          width: "200px",
          height: "100px",
          backgroundColor: "lightblue",
        }}
      >
        이 박스의 높이: {height}px
      </div>
    </div>
  );
}

export default BoxExample;

 

🔍 코드에서 무슨 일이 일어날까요?

1. useLayoutEffect
   • 화면이 그려지기 직전에 실행됩니다.
   • getBoundingClientRect()를 사용해 요소의 높이를 가져와서 상태에 저장해요.
2. useEffect
   • 화면이 다 그려진 이후에 실행됩니다.
3. 결과
   • useLayoutEffect가 먼저 실행되니까, 화면에 그려질 때 이미 정확한 높이 값이 설정돼 있어요.
   • useEffect는 그 이후에 실행되니까 타이밍이 달라요.

 

🚦 useLayoutEffect를 언제 사용할까요?

1. 화면이 그려지기 전에 요소의 크기나 위치를 정확하게 계산해야 할 때
   • 예: 애니메이션, 레이아웃 조정, 스크롤 위치 설정 등
2. 화면 깜빡임(Flash)이나 레이아웃이 튀는 현상을 방지해야 할 때
   • useEffect는 화면이 다 그려진 후에 실행되니까 잠깐 깜빡일 수 있어요.
   • useLayoutEffect를 사용하면 렌더링이 끝나기 전에 바로 작업이 적용돼요.

 

🚨 주의할 점

• useLayoutEffect는 동기적으로 실행돼요.
  → 화면이 그려지기 직전에 실행되니까 렌더링을 잠깐 막을 수 있어요.
• 너무 많은 작업을 넣으면 화면이 느려질 수 있으니까 꼭 필요한 경우에만 사용하세요!

 

🌟 한 줄 요약

useLayoutEffect는 화면이 그려지기 전에 실행돼서 레이아웃이나 스타일을 조정하는 데 유용한 React 훅이에요.