[React]useEffect

⭐️ useEffect란?

useEffect는 React 컴포넌트가 렌더링된 이후 특정 작업을 수행하도록 설정할 수 있는 hook이다. 쉽게 말해, 어떤 컴포넌트가 화면에 보여졌을 때 또는 화면에서 사라졌을 때 무언가를 실행하고 싶다면 useEffect를 사용하면 된다.

⭐️ 코드로 보는 useEffect 기초

import React, { useEffect } from "react";

const App = () => {
  useEffect(() => {
    // 이 부분이 실행된다.
    console.log("hello useEffect");
  });

  return <div>Home</div>;
}

export default App;

위 코드는 App 컴포넌트를 처음으로 화면에서 볼 때 useEffect 안에 있는 console.log가 실행된다. 즉, 컴포넌트가 렌더링된 이후 특정 코드를 실행하는 것이 useEffect의 핵심 기능이다.

⭐️ useEffect 사용 시 주의할 점

useEffect는 해당 컴포넌트가 렌더링될 때마다 실행된다.
예를 들어, input에 값이 변경되어 컴포넌트가 리렌더링될 때마다 useEffect도 함께 실행된다.

import { useEffect, useState } from "react";

const App = () => {
  const [value, setValue] = useState("");

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

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(e) => {
          setValue(e.target.value);
          console.log("value =>", value);
        }}
      />
    </div>
  );
}

export default App;

⭐️ 의존성 배열

useEffect의 두 번째 인자는 의존성 배열이다. 이 배열에 있는 값이 변경될 때만 useEffect가 실행된다.

useEffect(() => {
  // 실행하고 싶은 함수
}, [의존성배열])

⭐️ 의존성 배열을 사용한 예제

특정 함수가 컴포넌트가 렌더링된 후 단 한 번만 실행되도록 하려면 의존성 배열을 빈 상태로 두면 된다.

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

const App = () => {
  const [value, setValue] = useState("");

  useEffect(() => {
    console.log("hello useEffect");
  }, []); // 비어있는 의존성 배열

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(event) => {
          setValue(event.target.value);
        }}
      />
    </div>
  );
}

export default App;

위 코드에서는 useEffect가 빈 배열을 의존성 배열로 가지므로, App 컴포넌트가 처음 렌더링될 때만 console.log("hello useEffect")가 실행된다. 이처럼 의존성 배열을 활용하면 useEffect의 실행 조건을 제어할 수 있다.

⭐️ useEffect 정리 및 추가 정보

Cleanup 함수:

useEffect 내에서 반환되는 함수는 컴포넌트가 언마운트되거나 업데이트되기 전에 실행된다. 이를 cleanup 함수라고 한다. 주로 타이머를 정리하거나 이벤트 리스너를 제거하는 데 사용된다.

useEffect(() => {
  const timer = setInterval(() => {
    console.log("Tick");
  }, 1000);

  // Cleanup 함수
  return () => {
    clearInterval(timer);
    console.log("Cleanup");
  };
}, []);

여러 개의 useEffect:

하나의 컴포넌트에서 여러 개의 useEffect를 사용할 수 있다. 각 useEffect는 독립적으로 동작하며, 선언된 순서대로 실행된다.

useEffect(() => {
  console.log("Effect 1");
}, []);

useEffect(() => {
  console.log("Effect 2");
}, []);

조건부 실행:

특정 조건에서만 useEffect를 실행하려면 조건부 논리를 사용할 수 있다.

useEffect(() => {
  if (value) {
    console.log("Effect 실행");
  }
}, [value]);

useEffect는 컴포넌트 라이프사이클에 맞춰 작업을 실행할 수 있게 해주는 도구이다. 이를 잘 활용하면 React 애플리케이션에서 복잡한 로직을 효과적으로 관리할 수 있다.