[React] Basic Hook (2) _ useEffect

박하늘·2025년 2월 19일

React

목록 보기

4/15

useEffect 란 ?

useEffect는 React의 Hook 중 하나로, 컴포넌트의 라이프사이클 동안 특정 로직을 실행할 때 사용됩니다.

렌더링 이후 실행되는 코드
비동기 작업 (API 호출, 이벤트 리스너 등록, 타이머 설정 등)에 활용
의존성 배열을 통해 실행 시점을 제어 가능

기본 사용 방법 및 구조

📍 기본 문법

(1) 기본

import { useEffect } from "react";

useEffect(() => {
  // 실행할 코드 (예: API 호출, 이벤트 리스너 등록 등)
});

➡️ 첫 렌더링(Mount) 시 실행 [ 리렌더링(Update) 시에도 실행 ]

(2) 기본 + 의존성 배열

import { useEffect } from "react";

useEffect(() => {
  // 실행할 코드 (예: API 호출, 이벤트 리스너 등록 등)
}, [의존성_배열]);

➡️ 의존성_배열 값 포함 : [value] => 맨 처음 렌더링(Mount) 시, 의존성 배열 값 변경(Update) 시 실행
➡️ 의존성_배열 값 미포함(빈배열) : [] => 맨 처음 렌더링(Mount) 시에만 실행

(3) 의존성 배열 + return

useEffect(() => {
  // 실행할 코드 (예: API 호출, 이벤트 리스너 등록 등)
  return () => {
    // 종료시 실행할 코드 (예: 이벤트 리스너 해지, 타이머 해지 등)
  };
}, []);

➡️ useEffect에서 이벤트 리스너, 타이머 등을 등록한 경우 반드시 정리(cleanup)해야 함
➡️ ex) 실행할 코드 에 구독 관련 내용을 넣었다면, 종료 실행 코드에는 구독해지 관련 내용 작성

1️⃣ useEffect() – 의존성 배열 없음

📍 예제

useEffect(() => {
  console.log("컴포넌트가 렌더링될 때마다 실행됨!");
});

매 렌더링 마다 실행됨 (컴포넌트가 업데이트될 때도 실행)
상태가 변할 때마다 특정 동작을 실행하고 싶을 때 사용

2️⃣ useEffect(..., []) – 의존성 배열 : [] 빈 배열

📍 예제

import { useEffect, useState } from "react";

const App = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts/1")
      .then((res) => res.json())
      .then((json) => setData(json));
  }, []);

  return <div>{data ? data.title : "Loading..."}</div>;
};

컴포넌트가 처음 렌더링될 때만 데이터를 가져옴
useEffect에 빈 배열 []이 있어서 추가 렌더링 시 실행되지 않음 ( 업데이트 시에도 실행 X )

3️⃣ useEffect(..., [state]) – 의존성 배열 : [특정_값]

📍 예제

import { useState, useEffect } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`Count 변경됨: ${count}`);
  }, [count]); // count가 변경될 때만 실행

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

export default Counter;

맨 처음 렌더링 시 , [count] 값이 변경될 때만 실행
[count] 외의 다른 상태가 변경되어도 실행되지 않음
최적화 가능 (불필요한 실행 방지)

4️⃣ useEffect의 클린업 (Cleanup)

📍 예제

useEffect(() => {
  const interval = setInterval(() => {
    console.log("1초마다 실행됨");
  }, 1000);

  return () => {
    clearInterval(interval); // 컴포넌트가 사라질 때 정리됨
    console.log("타이머 제거됨!");
  };
}, []);

useEffect에서 이벤트 리스너, 타이머 등을 등록한 경우 반드시 정리(cleanup)해야 함
메모리 누수 방지를 위해 return을 사용하여 정리 작업 수행
useEffect 내부에서 return을 사용하면 정리(cleanup) 함수를 실행
컴포넌트가 언마운트(Unmount) 될 때 실행됨

🍒 마무리 🍒

의존성 배열을 잘 활용하여 불필요한 실행을 방지
API 호출, 타이머, 이벤트 리스너 등은 클린업 함수에서 정리

클래스형 컴포넌트에서는 componentDidMount, componentDidUpdate, componentWillUnmount를 사용해야 했습니다.
하지만 함수형 컴포넌트를 이용하여 useEffect를 사용하면 이 복잡한 과정을 하나의 함수로 관리할 수 있다는 큰 장점이 있습니다.
이를 통하여 조금 더 최적화된 사이트를 만들어야겠다.