[React] useEffect를 사용하여 mount/unmount/update시 작업 설정하기

useEffect란?

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

컴포넌트가 mount/unmount/update 됐을 때 특정 작업을 처리할 수 있다.

 

useEffect의 첫 번째 인자는 함수(effect), 두 번째 인자는 배열(deps)이 들어간다.

useEffect(effect, deps);

컴포넌트가 mount 될 때

렌더링 결과가 DOM에 반영된 직후에 함수가 호출된다.

import { useEffect, useState } from "react";

export default function DayList() {
  const [days, setDays] = useState([]);

  useEffect(() => {
    console.log("change");
  });

  return (
	<></>
  );
}

컴포넌트가 update 될 때 (특정 props, state가 바뀔 때)

import { useEffect, useState } from "react";

export default function DayList() {
  const [days, setDays] = useState([]);
  const [count, setCount] = useState(0);

  function onClick() {
    setCount(count + 1);
  }

  useEffect(() => {
    console.log("count change");
  });

  return (
    <button onClick={onClick}>{count}</button>
  );
}

컴포넌트가 unmount 될 때

cleanup 함수(return 뒤에 나오는 함수)를 반환한다.

useEffect(() => {
    console.log("count change");
    return () => {
      console.log("removed");
    };
  });

deps

위와 같이 deps를 넣지 않으면 컴포넌트가 리렌더링 될 때마다 useEffect 함수가 호출되어 불필요한 호출이 발생한다.

예를 들어, 다음과 같이 state를 하나 더 추가하면, days를 변경할 때와 count를 변경할 때 모두 useEffect가 호출된다.

import { useEffect, useState } from "react";

export default function DayList() {
  const [days, setDays] = useState([]);
  const [count, setCount] = useState(0);

  function onClick() {
    setCount(count + 1);
  }

  function onClick2() {
    setDays([
      ...days,
      {
        id: Math.random(),
        day: 1,
      },
    ]);
  }

  useEffect(() => {
    console.log("count change");
  });

  return (
    <>
      <button onClick={onClick}>{count}</button>
      <button onClick={onClick2}>Day change</button>
    </>
  );
}

 

count에 대해서만 useEffect를 호출하게 하려면 defs 배열에 count 변수를 추가하면 된다.

import { useEffect, useState } from "react";

export default function DayList() {
  const [days, setDays] = useState([]);
  const [count, setCount] = useState(0);

  function onClick() {
    setCount(count + 1);
  }

  function onClick2() {
    setDays([
      ...days,
      {
        id: Math.random(),
        day: 1,
      },
    ]);
  }

  useEffect(() => {
    console.log("count change");
  }, [count]);

  return (
    <>
      <button onClick={onClick}>{count}</button>
      <button onClick={onClick2}>Day change</button>
    </>
  );
}

 

마찬가지로 props, state와 상관없이 렌더링 직후에만 useEffect를 호출하게 하려면 빈 배열을 넣으면 된다.

import { useEffect, useState } from "react";

export default function DayList() {
  const [days, setDays] = useState([]);
  const [count, setCount] = useState(0);

  function onClick() {
    setCount(count + 1);
  }

  function onClick2() {
    setDays([
      ...days,
      {
        id: Math.random(),
        day: 1,
      },
    ]);
  }

  useEffect(() => {
    console.log("count change");
  }, []);

  return (
    <>
      <button onClick={onClick}>{count}</button>
      <button onClick={onClick2}>Day change</button>
    </>
  );
}