useLayoutEffect

useEffect 라는 hook 은 들어봤는데
useLayoutEffect 는 무엇일까요??

 

useEffect vs useLayoutEffect

 

React에서 컴포넌트의 생명주기를 관리하기 위해 useEffect와 useLayoutEffect를 사용합니다.

이 두 훅은 비슷해 보이지만, 실제로는 매우 다른 역할을 합니다.

왜냐하면 useEffect는 비동기적으로 실행되기 때문에, DOM이 업데이트된 후에 실행되기 때문입니다.

반면에 useLayoutEffect는 동기적으로 실행되어, DOM이 업데이트되기 전에 실행됩니다.

 

 

간단한 useEffect 의 동작 원리

useEffect는 비동기적으로 실행되며, 이는 이벤트 루프의 테스트 큐에 콜백이 쌓이는 방식으로 동작합니다.

왜냐하면 useEffect 의 콜백이 테스크 큐에 쌓이기 때문에, DOM 업데이트 후에 실행되기 때문입니다.

예를 들어, 다음 코드를 보겠습니다.

useEffect(() => {
    console.log('useEffect 실행');
}, []);

이 코드는 컴포넌트가 렌더링 된 후에 'useEffect 실행' 을 출력합니다.

따라서, useEffect 는 주로 비동기 작업이나 DOM 업데이트 후에 실행되어야 하는 작업에 사용됩니다.

 

useLayoutEffect 사용법

useLayoutEffect 는 언제 사용하는 것이 좋을까요??

아래 예제 코드를 보면 간단한 스크롤 박스 예제 입니다.

아래 코드를 보면 두번째 useEffect 에서 많은 작업을 하는 for 문을 실행한 뒤에 마지막 요소로 스크롤 하는 코드입니다.

function getNumbers() {
	return [1,2,3,4,5,6,7,8,9,10];
}

function App() {
    const [numbers, setNumbers] = useState([]);
    const ref = useRef(null);

    useEffect(() => {
      const nums = getNumbers();
      setNumebers(nums)
    }, [])

    useEffect(() => {
      if(numbers.length === 0) return;
      for(let i = 0; i < 30000000; i++) {}
      ref.current.scrollTop = ref.current.scrollHeight;
    },[numbers])

    return (
        <div
          ref={ref}
          style={{overflow: "scroll"}}
        >
        {numbers && numbers.map(item => (
          <p>{item}</p>
        ))}
        </div>
	)
}

 

코드를 짜고 화면을 지켜보면 for 문 때문에 마지막 요소로 스크롤 하는 기능이 1초 뒤에 실행하는 것을 볼 수 있습니다.

만약 컴포넌트가 그려지고 여러 작업이 많을 때 의도치 않게 useEffect 가 나중에 실행하여 느려질 수 있기 때문입니다.

따라서 아래에 코드처럼 useLayoutEffect 를 사용하면 컴포넌트가 렌더링 되기 이전에 useLayoutEffect 가 먼저 실행함으로써 컴포넌트가 렌더링 되면 마지막 요소로 바로 스크롤 하는 모습을 보실 수 있습니다.

useEffect(() => {
    if(numbers.length === 0) return;

    for(let i = 0; i < 30000000; i++) {}

    ref.current.scrollTop = ref.current.scrollHeight;
},[numbers])

// -----------------------------------------------------

useLayoutEffect(() => {
    if(numbers.length === 0) return;

    for(let i = 0; i < 30000000; i++) {}

    ref.current.scrollTop = ref.current.scrollHeight;
},[numbers])

 

useEffect 와 useLayoutEffect 의 차이점

useEffect 와 useLayoutEffect 의 가장 큰 차이점은 실행 시점입니다.

왜냐하면 useEffect 는 비동기적으로 실행되고, useLayoutEffect 는 동기적으로 실행되기 때문입니다.

이 차이점은 성능과 사용자 경험에 큰 영향을 미칠 수 있습니다.

예를 들어, useEffect 는 비동기 작업에 적합하며, useLayoutEffect 는 DOM 조작에 적합합니다.

따라서, 상황에 맞게 적절한 hook 을 선택하는 것이 중요합니다.

하지만 사용할 때 가능하다면 useEffect 를 사용하는 걸 추천합니다.

 

무분별하게 사용하면 useLayoutEffect 의 컴포넌트를 blocking 하는 기능 때문에 의도치 않게 성능 저하로 이어질 수 있습니다.