React에서 useLayoutEffect 훅 사용법

 

useLayoutEffect는 React에서 제공하는 훅 중 하나로, DOM 조작이 필요한 작업에서 유용하게 사용됩니다. 이 글에서는 useLayoutEffect의 특징, 사용법, 그리고 주의할 점을 상세히 알아보고, 실전 예제를 통해 이해를 돕겠습니다.

---

1. useLayoutEffect란 무엇인가?

useLayoutEffect는 React의 함수형 컴포넌트에서 동기적으로 DOM 작업을 수행할 수 있게 해주는 훅입니다. 이는 브라우저가 화면을 렌더링하기 전에 실행되므로 DOM이 업데이트되기 직전에 작업을 수행할 수 있습니다.

주요 특징:

1. 동기적 실행: useLayoutEffect는 DOM이 업데이트된 후 화면이 그려지기 전에 실행됩니다. 따라서 사용자는 변경된 DOM을 볼 수 없습니다.
2. useEffect와의 차이점: useEffect는 비동기로 동작하며, 브라우저가 화면을 업데이트한 후에 실행됩니다. 반면, useLayoutEffect는 동기적으로 실행되어 레이아웃 업데이트 전에 작업을 완료합니다.
3. UI 깜빡임 방지: DOM 변화를 동기적으로 처리하기 때문에 UI 변경 사항이 깜빡이는 문제를 방지할 수 있습니다.

---

2. 언제 useLayoutEffect를 사용할까?

useLayoutEffect는 다음과 같은 상황에서 유용합니다:

1. DOM 크기나 위치 계산이 필요한 경우: 예를 들어, 요소의 크기나 위치 정보를 기반으로 스타일을 적용해야 한다면 useLayoutEffect를 사용할 수 있습니다.
2. 애니메이션 시작 전 작업: 애니메이션 효과를 적용하기 전에 DOM 상태를 초기화해야 하는 경우에 적합합니다.
3. 외부 라이브러리와의 통합: 외부 라이브러리에서 DOM 조작이 필요한 경우에도 useLayoutEffect를 사용하면 렌더링 타이밍 문제를 해결할 수 있습니다.

---

3. useLayoutEffect 사용법

기본 구조

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

function MyComponent() {
  const divRef = useRef(null);

  useLayoutEffect(() => {
    // DOM에 직접 접근하여 작업 수행
    if (divRef.current) {
      divRef.current.style.backgroundColor = 'yellow';
    }
  }, []); // 의존성 배열

  return <div ref={divRef}>Hello, World!</div>;
}

export default MyComponent;

코드 설명

1. useRef 사용: useLayoutEffect는 DOM 요소에 접근해야 하므로 useRef를 함께 사용합니다.
2. 의존성 배열: 빈 배열([])을 전달하면 컴포넌트가 처음 렌더링될 때만 useLayoutEffect가 실행됩니다. 특정 상태나 props를 기반으로 실행하려면 의존성 배열에 해당 값을 추가합니다.

---

4. useLayoutEffect와 useEffect 비교

특징useLayoutEffectuseEffect

실행 시점	렌더링 이후, 화면 업데이트 이전	화면 업데이트 이후
동기/비동기 실행	동기적으로 실행	비동기적으로 실행
주요 용도	DOM 크기 계산, 동기적인 스타일 업데이트	데이터 가져오기, 비동기 작업
UI 깜빡임 방지 여부	가능	불가능

예제 비교

import React, { useEffect, useLayoutEffect, useRef } from 'react';

function Example() {
  const divRef = useRef(null);

  useLayoutEffect(() => {
    console.log('useLayoutEffect 실행');
    divRef.current.style.backgroundColor = 'yellow';
  });

  useEffect(() => {
    console.log('useEffect 실행');
    divRef.current.style.backgroundColor = 'green';
  });

  return <div ref={divRef}>Hello, World!</div>;
}

export default Example;

실행 결과

1. useLayoutEffect가 먼저 실행되어 배경색을 노란색으로 변경합니다.
2. 이후 useEffect가 실행되면서 배경색이 녹색으로 변경됩니다.

---

5. 실전 예제

예제: DOM 크기를 동적으로 계산하여 스타일 적용

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

function DynamicBox() {
  const boxRef = useRef(null);
  const [boxHeight, setBoxHeight] = useState(0);

  useLayoutEffect(() => {
    if (boxRef.current) {
      setBoxHeight(boxRef.current.offsetHeight);
    }
  }, []);

  return (
    <div>
      <div ref={boxRef} style={{ width: '100px', height: '100px', backgroundColor: 'blue' }}>
        Box
      </div>
      <p>The height of the box is: {boxHeight}px</p>
    </div>
  );
}

export default DynamicBox;

코드 설명

1. offsetHeight 계산: useLayoutEffect를 사용하여 렌더링된 DOM의 높이를 동기적으로 계산합니다.
2. 상태 업데이트: 계산된 값을 상태에 저장하여 화면에 표시합니다.

---

6. useLayoutEffect 사용 시 주의사항

1. 성능 문제: useLayoutEffect는 동기적으로 실행되므로 너무 자주 호출되면 성능에 영향을 줄 수 있습니다. 꼭 필요한 경우에만 사용하세요.
2. 서버 사이드 렌더링(SSR): useLayoutEffect는 브라우저 환경에서만 동작하며, SSR에서는 경고 메시지가 표시될 수 있습니다. 이를 방지하려면 조건부 렌더링을 고려하세요.
3. if (typeof window !== 'undefined') { useLayoutEffect(() => { // 브라우저 전용 작업 }); }

---

결론

useLayoutEffect는 DOM 조작이나 레이아웃 관련 작업에서 강력한 도구입니다. 그러나 과도하게 사용하면 성능 문제를 유발할 수 있으므로, 언제 useLayoutEffect를 사용해야 하는지 명확히 이해하고 적용하는 것이 중요합니다.

useEffect와의 차이점을 숙지하고, 적절한 상황에서 활용하여 더욱 효율적인 React 애플리케이션을 개발해보세요!