useEffect, useLayoutEffect 발표자료

useEffect란?

 

리액트 컴포넌트가 렌더링 될 때 마다 특정 작업을 실행할 수 있도록 하는 Hook.

 

오래걸리는 코드(또는 렌더링과 상관없는)를 나중에 실행하게 해 준다 컴포넌트가 mount 됐을 때, 컴포넌트가 unmount 됐을 때, 컴포넌트가 update 됐을 때 특정 작업을 처리할 수 있다.

 

컴포넌트는 라이프 사이클 (생명주기)를 가지고 있다.

 

mount:컴포넌트가 처음으로 화면에 렌더링 되는 시점

 

update: 화면을 업데이트 하는 것(count:0 ->1로 변경)

 

unmount: 더이상 필요하지 않은 컴포넌트가 화면에서 제거되는 시점

 

 

간단한 사용예제를 통해 useEffect 사용법을 알아보자!

 

useEffect 사용 예제

 

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

function ExampleComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 컴포넌트가 마운트될 때와 업데이트될 때 실행되는 코드
    console.log(`You clicked ${count} times`);

    // 클린업 함수: 컴포넌트가 언마운트될 때 실행되는 코드
    return () => {
      console.log('다음 effect가 실행되기 전에 cleanup 된다');
    };
  }, [count]); // 의존성 배열

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

 

위 코드에서 useEffect는 count 가 변경될 때마다 실행된다. 의존성 배열에 [count]를 넣으면 count 값이 변경될 때마다 실행된다.

만약 의존성 배열을 빈 배열 []로 설정하면, 이 효과는 컴포넌트가 처음 마운트 될 때만 실행되고 업데이트 될때는 실행되지 않는다.

 

의존성 배열: 특정 값이 변경될 때만 효과를 실행하고 싶다면, 해당 값을 배열에 넣는다.

 

클린업 함수: 컴포넌트가 언마운트 되거나 다음 효과가 실행되기 전에 호출되며 return 문에서 실행된다. return을 사용하지 않으면 새로운 useEffect를 수행하기 전에 아무런 작업을 하지 않는 것으로 인식한다. 

 

컴포넌트가 언마운트원마운트 되었을 때 이벤트 리스너를 제거하지 않으면, 이벤트 리스너가 콜백 함수를 계속 호출하려고 시도하면서 문제가 발생할 수 있다. 컴포넌트가 언마운트된 후에는 해당 컴포넌트에 접근하면 안 되기 때문에, 이벤트 리스너를 제거하지 않으면 존재하지 않는 컴포넌트에 접근하는 문제가 발생한다.

 

결론적으로 clean up 함수는 메모리 누수를 방지하고, 컴포넌트의 상태를 올바르게 유지하며, 필요 없어진 이벤트 핸들러를 제거하는데 필요하다.

 

 

 

useEffect와 useLayoutEffect의 차이점

 

 

useEffect로 전달된 함수는 layout가 paint가 완료된 후에 비동기적으로 실행된다.

paint 된 후에 실행되기 때문에, useEffect 내부에 dom 영향을 주는 코드가 있을 경우 사용자 입장에서는 화면의 깜빡임이 보일 수 있다.

 

useLayoutEffect는 컴포넌트들이 render된 후 실행되며, 그 이후에 paint 가 된다. 이 작업은 동기적으로 실행된다. paint가 되기 전에 실행되기 때문에 dom을 조작하는 코드가 존재하더라도 사용자는 깜빡임을 경험하지 않는다.

 

useLayoutEffect는 동기적으로 실행되고 내부의 코드가 모두 실행된 후 painting 작업을 거친다 . 

따라서 로직이 복잡할 경우 사용자가 레이아웃을 보내는데까지 시간이 오래 걸린다는 단점이 있어, 

기본적으로는 항상 useEffect만을 사용하는 것을 권장한다.