UseEffect와 UseLayoutEffect 차이에 대해

react로 개발을 하다 보면 useEffect란 hook을 많이 사용하게 되는데요. 가끔 보면 useEffect가 아닌 useLayoutEffect를 사용하는 코드를 볼 수 있습니다. 오늘은 비슷하지만 다른 이 두 훅의 차이점에 대해 간략하게 써보겠습니다.

 

결론적으로 두 훅은 컴포넌트 렌더링 라이프 사이클에서 사이드 이펙트를 처리하는 데 사용되지만, 실행 타이밍에서 큰 차이를 보이는데요.

 

useEffect

useEffect는 대부분의 사이드 이펙트 처리에 사용되는 기본 훅입니다. 이 훅은 모든 DOM 업데이트가 완료된 후 비동기적으로 실행되므로, 렌더링 과정을 방해하지 않고 성능 최적화에 기여합니다. API 호출, 이벤트 리스너 등록 및 해제, 그리고 일부 구독 로직 등을 useEffect 안에서 처리할 수 있습니다. 아래에 사용 예를 들어보겠습니다.

 

import React, { useEffect, useState } from 'react';

function ExampleComponent() {
    const [teset, setTest] = useState(null);

    useEffect(() => {
        fetch('url')
            .then(response => response.json())
            .then(json => setData(json));
    }, []); // 의존성 배열이 비어 있기 때문에, 컴포넌트가 마운트될 때 한 번만 실행됩니다.

    return (
        <div>
            {data ? <p>{data.title}</p> : <p>Loading...</p>}
        </div>
    );
}

 

위 예제 코드에서 볼 수 있듯이, useEffect는 렌더링 결과가 화면에 나타난 후 실행되며, 이로 인해 사용자는 'Loading...' 텍스트를 보게 됩니다. 그 후, 데이터가 로드되면 화면이 업데이트됩니다. 사용자는 렌더링 된 화면을 우선 보고 데이터 패칭으로 인한 변경 사항이 생겼을 때 깜박이는 현상을 볼 수 있습니다.

 

useLayoutEffect

useLayoutEffect는 레이아웃 조정과 관련된 작업을 수행할 때 사용됩니다. DOM 업데이트 이후, 화면을 그리기 전에 동기적으로 실행되는 이 훅은 DOM의 레이아웃을 조정하거나 읽어야 할 필요가 있을 때 효과적입니다. 렌더링 후 즉시 DOM 요소의 크기를 조절하거나, 스크롤 위치를 조정하는 작업이 이에 해당합니다.

 

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

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

    useLayoutEffect(() => {
        const rect = ref.current.getBoundingClientRect();
        console.log(`The element's size is ${rect.width}x${rect.height}`);
    }, []);

    return <div ref={ref}>테스트!</div>;
}

 

위의 예시에서 useLayoutEffect를 사용하면 사용자는 깜박임 없이 요소의 크기를 계산할 수 있습니다. 만약 useEffect를 사용했다면, 화면에 이미 렌더링이 완료된 후에 크기를 계산하게 되므로, 화면의 잠깐의 깜박임이나 레이아웃 변화가 사용자에게 보일 수 있습니다.

 

다시금 결론을 내보면 

결론 : 일반적으로는 useEffect가 더 자주 사용되지만, DOM의 크기나 위치 등을 조정할 필요가 있는 경우에는 useLayoutEffect가 적절할 수 있다!!!