useEffect와 useLayoutEffect의 차이점

안녕하세요! 오늘은 React에서 자주 사용되는 두 훅, useEffect와 useLayoutEffect의 차이점에 대해 알아보겠습니다. 이 두 훅은 컴포넌트의 사이드 이펙트를 처리하는 데 사용되지만, 사용 시기와 동작 방식에서 중요한 차이가 있습니다.

useEffect와 useLayoutEffect의 차이점

1. useEffect

useEffect는 컴포넌트가 렌더링된 후에 실행됩니다. 이 훅은 비동기 작업, 데이터 페칭, 타이머 설정 및 이벤트 리스너 설정 등 다양한 사이드 이펙트를 처리하는 데 사용됩니다.

import React, { useEffect } from 'react';

function MyComponent() {
    useEffect(() => {
        console.log('Component rendered');

        return () => {
            console.log('Cleanup on component unmount');
        };
    }, []);

    return <div>Hello, World!</div>;
}

위 예제에서 useEffect는 컴포넌트가 화면에 렌더링된 후에 실행됩니다. 또한, 컴포넌트가 언마운트될 때 클린업 함수를 실행합니다.

2. useLayoutEffect

useLayoutEffect는 컴포넌트가 DOM에 변화를 반영하기 전에 실행됩니다. 따라서 DOM 업데이트 후에 바로 실행되는 useEffect와는 달리, DOM 업데이트 이전에 실행되므로 레이아웃 측정과 DOM 조작이 필요할 때 사용됩니다.

import React, { useLayoutEffect } from 'react';

function MyComponent() {
    useLayoutEffect(() => {
        console.log('Component rendered (useLayoutEffect)');

        return () => {
            console.log('Cleanup on component unmount (useLayoutEffect)');
        };
    }, []);

    return <div>Hello, World!</div>;
}

위 예제에서 useLayoutEffect는 컴포넌트가 렌더링된 직후, 하지만 브라우저가 화면을 그리기 전에 실행됩니다. 따라서 useEffect보다 먼저 실행됩니다.

차이점 요약

• 실행 시점: useEffect는 컴포넌트가 렌더링된 후에 실행되고, useLayoutEffect는 컴포넌트가 렌더링된 직후 DOM 업데이트 이전에 실행됩니다.
• 사용 시기: useEffect는 비동기 작업이나 데이터 페칭 등 일반적인 사이드 이펙트에 사용되고, useLayoutEffect는 레이아웃 측정이나 DOM 조작이 필요한 경우에 사용됩니다.
• 퍼포먼스: useLayoutEffect는 렌더링 성능에 영향을 줄 수 있으므로, 꼭 필요한 경우에만 사용해야 합니다.

예제 비교

다음은 useEffect와 useLayoutEffect를 사용한 예제를 비교한 것입니다.

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

function Example() {
    const [value, setValue] = useState(0);

    useEffect(() => {
        console.log('useEffect - value:', value);
    }, [value]);

    useLayoutEffect(() => {
        console.log('useLayoutEffect - value:', value);
    }, [value]);

    return (
        <div>
            <p>Value: {value}</p>
            <button onClick={() => setValue(value + 1)}>Increment</button>
        </div>
    );
}

export default Example;

이 예제에서 버튼을 클릭하면 value가 증가하면서 useEffect와 useLayoutEffect가 각각 호출됩니다. 콘솔 로그를 통해 두 훅의 실행 순서를 확인할 수 있습니다.

결론

React에서 useEffect와 useLayoutEffect는 사이드 이펙트를 처리하는 훅으로, 각각의 사용 시기와 용도가 다릅니다. useEffect는 일반적인 사이드 이펙트에, useLayoutEffect는 DOM 조작과 레이아웃 측정이 필요한 경우에 사용됩니다. 올바른 훅을 선택하여 성능과 코드의 가독성을 높이세요.

오늘도 제 글을 읽어주셔서 감사합니다. 다음 시간에 더 유익한 주제로 찾아뵙겠습니다.