리액트 – useEffect 라이프사이클

useEffect 란 ?

useEffect() 함수는 React component가 렌더링 될 때마다 특정 작업(Sied effect)을 실행할 수 있도록 하는 리액트 Hook이다.
여기서 Side effect는 component가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 뜻한다. 이러한 기능으로 인해 함수형 컴포넌트에서도 클래스형 컴포넌트에서 사용했던 생명주기 메서드를 사용할 수 있게 되었다.

데이터를 패칭해와서 프론트에 노출시키는 것을 만들어보자.

import Products from "./components/Products";
import { useState } from "react";
export default function AppProducts() {
  const [showProducts, setShowProducts] = useState(true);
  return (
    <div>
      {showProducts && <Products />}
      <button onClick={() => setShowProducts((show) => !show)}>Toggle</button>
    </div>
  );
}

export default function Products() {
  const [count, setCount] = useState(0);
  const [products, setProducts] = useState([]);

  fetch("data/products.json")
    .then((res) => res.json())
    .then((data) => {
      console.log("네트워크에서 받아옴");
      setProducts(data);
    });

  return (
    <>
      <ul>
        {products.map((product) => (
          <li key={product.id}>
            <article>
              <h3>{product.name}</h3>
              <p>{product.price}</p>
            </article>
          </li>
        ))}
      </ul>
      <button onClick={() => setCount((prev) => prev + 1)}>{count}</button>
    </>
  );
}

만약 위와 같이 json 데이터를 패칭해와서 setProducts() 를 이용하여 데이터를 노출시키면 어떻게 될까 ?

setProducts을 이용해서 state를 변경하면 리액트는 다시 함수 컴포넌트를 호출하면서 재귀적으로 실행된다. (계속해서 데이터 패칭됨)

그래서 아래와 같이 useEffect() 를 사용해야한다.

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

export default function Products() {
  const [count, setCount] = useState(0);
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetch("data/products.json")
      .then((res) => res.json())
      .then((data) => {
        console.log("네트워크에서 데이터 패칭");
        setProducts(data);
      });
    return () => {
      console.log("메모리 릴리즈");
    };
  }, []);
  return (
    <>
      <ul>
        {products.map((product) => (
          <li key={product.id}>
            <article>
              <h3>{product.name}</h3>
              <p>{product.price}</p>
            </article>
          </li>
        ))}
      </ul>
      <button onClick={() => setCount((prev) => prev + 1)}>{count}</button>
    </>
  );
}

useEffect()의 첫번째 인자는 콜백함수를 전달하면 되고, 딱 한번만 실행해야할 경우에 두번째 인자로 dependency를 전달한다. 그래서 ‘[]’ 와 같이 빈 dependency 를 전달하면 아무런 디펜던시가 없으므로 최초 한번만 호출한다.

컴포넌트가 없어질때 소켓 통신을 닫는다던지, 메모리를 정리하는 등의 일을 처리해야할 때는 useEffect에 리턴함수를 정의해주면 된다.

---

useEffect dependency

컴포넌트가 처음 마운트되었을때만 네트워크 통신을 할때도 있지만, 특정한 값이 변경되었을때 다시 네트워크 요청을 할 때도 있을 것이다.

예를 들어 체크박스 선택시 다른 데이터를 패칭해서, 컴포넌트를 재렌더링 해야한다고 생각해보자.

그럴 경우 어떤 조건에서 데이터가 재패칭될지 dependency를 useEffect의 두번째 인자로 넘겨주면 된다.

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

export default function Products() {
  const [count, setCount] = useState(0);
  const [products, setProducts] = useState([]);
  const [checked, setChecked] = useState(false);
  const handleChange = () => setChecked((prev) => !prev);
  useEffect(() => {
    fetch(`data/${checked ? "sale_" : ""}products.json`) //checked 되어있으면 sale_products.json 호출
      .then((res) => res.json())
      .then((data) => {
        console.log("네트워크에서 받아옴");
        setProducts(data);
      });
    return () => {
      console.log("청소");
    };
  }, [checked]); // checked 가 변경될때마다 호출됨
  return (
    <>
      <input
        id="checkbox"
        type="checkbox"
        value={checked}
        onChange={handleChange}
      />
      <label htmlFor="checkbox">Show Only Sale Products</label>
      <ul>
        {products.map((product) => (
          <li key={product.id}>
            <article>
              <h3>{product.name}</h3>
              <p>{product.price}</p>
            </article>
          </li>
        ))}
      </ul>
      <button onClick={() => setCount((prev) => prev + 1)}>{count}</button>
    </>
  );
}

---

정리

useEffect는 컴포넌트가 렌더링될때 특정 작업을 해야할때 사용한다. 인자는 첫번째론 콜백함수, 두번째는 dependency 이다.

dependency에 빈 배열을 넘기면 컴포넌트가 처음 마운트 되었을때만 실행하고, dependency로 특정 조건을 넘겨주면 조건에 따라 비동기로 콜백함수를 재실행할 수 있다.