🟦 [React] useEffect 개념 잡기

📌  useEffect는 리액트 컴포넌트가 렌더링될 때 실행되는 코드(사이드 이펙트)를 관리하는 훅

=> 호출 시점 정해줌

 

 

✔️ 렌더링 이후 실행되는 코드

=> 컴포넌트가 처음 화면에 나타날 때 실행되는 코드 생성 가능

import React, { useEffect } from "react";

const Hello = () => {
  useEffect(() => {
    console.log("👋 컴포넌트가 화면에 나타남!");
  }, []); // 의존성 배열이 빈 배열 -> 처음 1번만 실행

  return <h1>안녕하세요!</h1>;
};

export default Hello;

 

결과:

 

• Hello 컴포넌트가 화면에 나타날 때 console.log("👋 컴포넌트가 화면에 나타남!")이 실행
• 빈 배열 []을 넣으면 처음 마운트될 때만 실행되고 이후에는 실행되지 않음.

 

 

 

✔️ 의존성 배열에 따라 실행되는 시점 조절 가능

=> 특정 값이 바뀔 때마다 실행

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

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

  useEffect(() => {
    console.log(`📢 count 값이 변경됨: ${count}`);
  }, [count]); // count가 변경될 때마다 실행됨

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1 증가</button>
    </div>
  );
};

export default Counter;

 

결과:

 

• 버튼을 누를 때마다 count 값이 증가하면서 useEffect가 실행됨.
• [count] → count 값이 바뀔 때만 실행

 

 

 

✔️ 컴포넌트가 언마운트될 때 정리(cleanup) 가능

=> ex) 타이머, 이벤트 리스너 등을 설정했다면 컴포넌트가 사라질 때 정리

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

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

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

  return <h1>타이머 실행 중...</h1>;
};

const App = () => {
  const [show, setShow] = useState(true);

  return (
    <div>
      {show && <Timer />}
      <button onClick={() => setShow(!show)}>타이머 ON/OFF</button>
    </div>
  );
};

export default App;

 

 

결과: 

 

• 타이머가 시작되면 ⏰ 1초마다 실행됨이 계속 출력
• 버튼을 눌러 Timer 컴포넌트를 제거하면 "🧹 타이머 정리됨"이 출력
  → 타이머가 정리되어 더 이상 실행되지 않음!

 

useEffect 특징

실행 조건	useEffect 코드
컴포넌트가 처음 나타날 때 실행	useEffect( () => {...}, {} )
특정 값이 변경 될 때 실행	useEffect( () => {...}, [value] )
컴포넌트가 사라질 때 정리 (cleanup)	return() => {...}