React #20 (고급 훅 - useLayoutEffect)

 

useEffect와 비슷, DOM 변경 후 브라우저가 화면을 그리기 전에 "동기적"으로 실행

- 레이아웃을 측정하거나 스타일을 변경해야 할 때 사용

 

src/components/LayoutEffectExample.tsx

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


export default function LayoutEffectExample () {
    const boxRef = useRef<HTMLDivElement | null>(null);

    // useEffect (() => {
    //     if (boxRef.current) {
    //         boxRef.current.style.background = 'yellow';
    //         boxRef.current.style.width = '500px';
    //         boxRef.current.style.height = '100px';
    //     }
    // }, []);


    useLayoutEffect (() => {
        if (boxRef.current) {
            boxRef.current.style.background = 'orange';
            boxRef.current.style.width = '500px';
            boxRef.current.style.height = '100px';
        }
    }, []);


    return (
        <div ref={boxRef}>
            useLayoutEffect로 스타일 적용
        </div>
    );
}

 

src/pages/HookTest.tsx

import LayoutEffectExample from "../components/LayoutEffectExample";


export default function HookTest () {
    return (
        <div>
            <LayoutEffectExample />
            {/* <IdExample /> */}
            {/* <TransitionExample /> */}
            {/* <ParentComponent /> */}
        </div>
    );
}

 

src/App.tsx

import React from 'react';
import logo from './logo.svg';
import './App.css';
import HookTest from './pages/HookTest';


function App() {
  return (
    <div className="App">
      <HookTest />
    </div>
  );
}

export default App;

 

 

 

 

 

※ useEffect(좌) vs useLayoutEffect(우) 비교

실행 타이밍	DOM 업데이트 후 비동기적으로 실행 브라우저가 화면을 그린 후	DOM 업데이트 후 동기적으로 실행 브라우저가 화면을 그리기 전
실행 순서	1. 컴포넌트 렌더링 2. DOM 변경사항 적용 3. 브라우저가 화면에 페인팅 4. useEffect 콜백 실행	1. 컴포넌트 렌더링 2. DOM 변경사항 적용 3. useLayoutEffect 콜백 실행 4. 브라우저가 화면에 페인팅
성능 영향	✓ 렌더링을 블로킹하지 않음 ✓ 더 나은 성능 ✓ 사용자 인터페이스 응답성 좋음	✗ 렌더링을 블로킹할 수 있음 ✗ 무거운 작업 시 성능 저하 동기적 실행으로 인한 지연 가능성
사용 사례	• API 호출 • 이벤트 리스너 등록/해제 • 타이머 설정 • 로깅, 분석 • 대부분의 사이드 이펙트	• DOM 측정 (offsetWidth, scrollHeight 등) • DOM 조작 후 즉시 다시 조작 • 깜빡임 방지가 필요한 경우 • 레이아웃 관련 계산
시각적 차이	화면이 먼저 업데이트되고 이펙트가 실행되므로 깜빡임이 보일 수 있음	이펙트 실행 후 화면이 업데이트되므로 깜빡임 없이 자연스러운 전환
권장 사용법	✓ 기본적으로 사용 대부분의 경우에 적합 React 공식 권장사항	⚠ 필요한 경우에만 사용 시각적 깜빡임이 문제가 될 때 DOM 측정이 필요할 때
브라우저 호환성	모든 환경에서 안전하게 동작	서버 사이드 렌더링에서 경고 발생 useEffect로 대체 권장
디버깅	비동기 실행으로 인해 디버깅이 상대적으로 쉬움	동기 실행으로 인해 성능 문제 파악이 어려울 수 있음

 

 

 

 

💡 선택 가이드라인

• 기본적으로 useEffect 사용 - 99%의 경우에 적합
• useLayoutEffect는 특별한 경우에만 - DOM 측정, 깜빡임 방지가 꼭 필요한 경우
• 성능상 의심스럽다면 useEffect부터 시도 - 문제가 생겼을 때 useLayoutEffect로 변경