[React] useEffect Hook의 사용법

useEffect Hook이란 ?

const App = () => {
  const [name, setName] = useState('');
  useEffect(() => { // (1)
    setName('우현');
    return (() => { // (2)
      console.log('Cleanup'); 
    }
  }, []);
  useEffect(() => { // (3)
    console.log(name);
  }, [name]);
  return (
    <div>{name}</div>
  );
}

useEffect 이란 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 생애주기를 대신 하기 위한 Hook이다.

useEffect 는 Class Component의 componentDidMount, componentDidUpdate, 그리고 componentWillUnmount라는 Life cycle API의 역할을 대체 할 수 있는 Hook이다.

 

useEffect Hook 사용법

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

첫 번째 인자에는 Dependancy Arrary안에 들어가 있는 값이 변경될 때 실행되는 콜백함수가 들어가있고, 두 번째 인자는 Dependancy Array로, 이 배열 안에 들어있는 값이 변경될 시 콜백이 실행되도록 되어있다.

 

import { useEffect, useState } from "react";

function App() {
  const [counter, setCounter] = useState(0);
  const [keyword, setKeyword] = useState("");

  const onClick = () => setCounter((prev) => prev + 1);
  const onChange = (event) => setKeyword(event.target.value);

  useEffect(() => {
    console.log("I run only once.");
    return () => console.log("Component removed !");
  }, []);

  useEffect(() => {
    console.log("I run when 'keyword' changes.");
  }, [keyword]);

  useEffect(() => {
    console.log("I run when keyword & count change");
  }, [keyword, counter]);

  return (
    <div>
      <input
        value={keyword}
        onChange={onChange}
        type="text"
        placeholder="Search here.."
      />
      <h1>{counter}</h1>
      <button onClick={onClick}>Click me !</button>
    </div>
  );
}

export default App;

 

최초 렌더링 시에만 실행되도록 하기

useEffect(() => {
    console.log("I run only once.");
}, []);

의존성 배열이 [] 인 경우에는 컴포넌트가 최초로 랜더링 될 때 한 번만 구동된다.

👉🏻 componentDidMount를 대체한다고 볼 수 있다. 그래서 컴포넌트가 켜질 때 첫 세팅을 하거나, 서버로부터 데이터를 받아와야 할 때 이용한다.

 

특정 값이 변경되었을 때 실행되도록 하기

useEffect(() => {
    console.log("I run when 'keyword' changes.");
}, [keyword]);

  useEffect(() => {
    console.log("I run when keyword & count change");
}, [keyword, counter]);

의존성 배열에 들어가 있는 값들이 변경될 경우, 콜백함수(effect)가 실행된다 !

👉🏻 이는 componentDidUpdate의 기능을 대신하고 있다고 볼 수 있다 !

 

컴포넌트가 제거(Unmount)될 때 실행되도록 하기

 useEffect(() => {
    console.log("I run only once.");
    return () => console.log("Component removed !");
}, []);

useEffect 에서 return으로 반환하는 콜백은 ‘cleanup’이라고 한다. 해당 콜백은 컴포넌트가 Unmount 될 때 동작한다고 생각하면 된다.

 

만약 useEffect 내에서 Subscribe 작업이나 비동기 작업 등 메모리 누수가 될 수 있는 작업을 실행할 경우에는 반드시 cleanup을 이용해 해당 작업들을 취소해줘야 한다.

👉🏻 componentWillUnmount를 역할을 대신하고 있다고 생각할 수 있다 !

---

useEffect는 ‘복잡하고 읽기 어려운 컴포넌트 구조’를 해결하는데 큰 역할을 한다.

 

useState 와 마찬가지로 useEffect 는 여러 번 사용할 수 있다. componentDidUpdate 하나에 필요한 모든 업데이트 관련 작업을 몰아넣어야 하는 Class Component에 비해 적절히 나누는 것이 가능하다.

 

즉, useEffect 를 이용하면 componentDidUpdate를 사용할 때보다 코드를 더 깔끔하게 작성할 수 있게 된다.