[React] Hook - useEffect

✅ useEffect란?

useEffect는 컴포넌트가 렌더링된 후 특정 작업을 수행할 수 있게 해주는 훅

📦 생명주기 관점에서의 useEffect

생명주기 단계	동작	예시
마운트(처음)	화면에 컴포넌트가 등장할 때	API 호출, 초기 데이터 불러오기
업데이트	상태/props가 바뀔 때	변경된 값에 따른 처리
언마운트	컴포넌트가 사라질 때(cleanup)	타이머 제거, 이벤트 제거 등 정리작업

---

//기본문법
import { useEffect } from 'react';

useEffect(() => {
  // 이 코드는 컴포넌트가 처음 렌더링된 후 실행.
});

🔍 의존성 배열 ([])

useEffect(() => {
	console.log('컴포넌트가 처음 나타났을 때만 실행');
}, []); // 빈 배열 -> 마운트 시 한 번만 실행

useEffect(() => {
	console.log(`count 값이; ${count}로 바뀌었음`);
},[count]); // count가 바뀔 때마다 실행됨

🔧 언마운트 시 정리(clean-up)

useEffect(() => {
	const timer = setInterval(() => {
    	console.log('1초 마다 실행')
    }, 1000);
  
  	return() => {
    	clearInterval(timer); // 컴포넌트가 사라질 때 정리
    }
}, []);

실습 예제: 타이머 만들기

import { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    return () => clearInterval(interval); // 정리
  }, []);

  return <p>⏱️ 경과 시간: {seconds}초</p>;
}