useEffect 사용하기

import React, { useEffect } from 'react';
import { useRouter } from 'next/router';

function Example({ name }) {
  const router = useRouter();

  useEffect(() => {
    // router.isReady 또는 name이 변경될 때마다 실행됩니다.
    console.log('router.isReady or name has changed:', router.isReady, name);

    // cleanup 함수를 반환할 수도 있습니다. 이 함수는 다음 실행 전에 호출됩니다.
    return () => {
      console.log('Cleaning up:', router.isReady, name);
    };
  }, [router.isReady, name]); // 의존성 배열에 router.isReady와 name을 포함시킵니다.
  
  // ...
}

useState로 설정한 변수가 변경되면 실행되는 함수를 만들고 싶다면

useEffect라는 React Hook을 사용해야 합니다.

useEffect는 의존성 배열(dependency array)에 지정된 변수가 변경될 때마다 실행되는 side-effect 함수입니다.

 

가장 중요하다고 생각하는 사용법으로

두 번째 인자는 변경을 감지할 변수,

첫 번째 인자는 두 번째 인자에서 설정된 변수가 변경될 때 실행할 함수

를 작성합니다.

( 인지하기 쉽도록 두 번째 인자부터 설명했습니다. )

 

아래 예제는 count라는 상태 변수를 useState를 사용해 생성하고, count가 변경될 때마다 실행되는 함수를 useEffect를 사용하여 구현하였습니다.

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

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

  useEffect(() => {
    // 이 함수는 count가 변경될 때마다 실행됩니다.
    console.log('Count has changed:', count);

    // cleanup 함수를 반환할 수도 있습니다. 이 함수는 다음 실행 전에 호출됩니다.
    return () => {
      console.log('Cleaning up:', count);
    };
  }, [count]); // 의존성 배열에 count를 포함시킵니다.

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
    </div>
  );
}

위 코드에서 useEffect의 첫 번째 인자로 전달한 함수는 count가 변경될 때마다 실행됩니다. 두 번째 인자로 전달한 배열 [count]는 의존성 배열로, 이 배열에 포함된 변수가 변경될 때마다 useEffect의 첫 번째 인자로 전달한 함수가 실행됩니다.

 

활용

1. 의존성 배열에 여러개를 넣으면 어떻게 될까? 예를들어 router.isReady와 name 2개를 넣는다면?

import React, { useEffect } from 'react';
import { useRouter } from 'next/router';

function Example({ name }) {
  const router = useRouter();

  useEffect(() => {
    // router.isReady 또는 name이 변경될 때마다 실행됩니다.
    console.log('router.isReady or name has changed:', router.isReady, name);

    // cleanup 함수를 반환할 수도 있습니다. 이 함수는 다음 실행 전에 호출됩니다.
    return () => {
      console.log('Cleaning up:', router.isReady, name);
    };
  }, [router.isReady, name]); // 의존성 배열에 router.isReady와 name을 포함시킵니다.
  
  // ...
}

위 코드에서 useEffect의 의존성 배열에 router.isReady와 name을 포함시켰기 때문에, 두 변수 중 하나라도 변경될 때마다 useEffect의 첫 번째 인자로 전달한 함수가 실행됩니다.

 

2. 의존성 배열 빈배열로 둔다면? 

 

useEffect의 의존성 배열을 빈 배열([])로 설정하면, 컴포넌트가 마운트될 때 한 번만 실행되고, 어떤 변수의 변경에도 다시 실행되지 않습니다. 이는 초기화 작업이나 마운트 시 필요한 부작용(side-effect)을 처리하는 데 사용되곤 합니다.

import React, { useEffect } from 'react';

function Example() {
  useEffect(() => {
    // 컴포넌트가 마운트될 때만 실행됩니다.
    console.log('Component did mount');

    // cleanup 함수를 반환할 수도 있습니다. 이 함수는 컴포넌트가 언마운트될 때 호출됩니다.
    return () => {
      console.log('Component will unmount');
    };
  }, []); // 의존성 배열을 빈 배열로 설정합니다.

  // ...
}