React useEffect 완전정복｜렌더링 후 실행, 상태 변화 감지, 클린업까지 한눈에

📘 리액트 스터디 시리즈 6편

useEffect 완전 이해하기｜React의 사이드 이펙트와 라이프사이클

안녕하세요! 오늘은 React에서 외부 작업을 처리할 수 있게 해주는

useEffect

훅에 대해 배워봅니다 🧪

API 호출, 타이머 설정, 로컬 저장소 접근 등은 모두 "사이드 이펙트(Side Effect)"이며, React의 렌더링 사이클과 연계해서 제어해야 합니다.

---

⚡ useEffect란 무엇인가요?

useEffect는 리액트 컴포넌트가 렌더링된 이후 실행되는

Effect Hook

입니다.

import { useEffect } from 'react';

useEffect(() => {
  // 여기에 실행할 코드 작성
}, []);

• ✅ 컴포넌트가 마운트(처음 렌더링)되었을 때 실행
• ✅ 의존성 배열에 따라 업데이트될 때마다 재실행
• ✅ 컴포넌트가 언마운트될 때 정리(clean-up)도 가능

---

📋 예제 ① 마운트 시 콘솔 출력

import { useEffect } from 'react';

function HelloEffect() {
  useEffect(() => {
    console.log('컴포넌트가 화면에 나타났습니다!');
  }, []);

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

🎯 의존성 배열이 빈 경우 [], 마운트 시 1회만 실행됩니다.

---

📋 예제 ② 상태 변화 감지

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    console.log(`count가 ${count}로 바뀌었습니다.`);
  }, [count]);

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

👉 count가 변경될 때마다 useEffect가 실행됩니다.

---

🧹 정리(clean-up) 함수란?

타이머, 구독 이벤트 등은 컴포넌트가 사라질 때 정리해줘야 합니다.
그럴 때 return () => {...} 패턴을 사용합니다.

useEffect(() => {
  const timer = setInterval(() => {
    console.log('⏰ 타이머 실행 중');
  }, 1000);

  return () => {
    clearInterval(timer);
    console.log('🧼 타이머 정리 완료');
  };
}, []);

📌 이 코드는 컴포넌트가 언마운트될 때 자동으로 clearInterval 합니다.

---

🧠 정리 - 오늘 배운 핵심 포인트

• ✔️ useEffect는 렌더링 이후 실행되는 훅
• ✔️ 의존성 배열로 실행 타이밍을 제어
• ✔️ 외부 요청(API, 타이머 등)을 다룰 때 사용
• ✔️ 언마운트 시 정리(clean-up)를 반드시 고려

---

📌 다음 편 예고

7편에서는 사용자의 입력을 다루는 폼 처리와 Controlled 컴포넌트를 보다 실전적으로 배워보겠습니다 📩

입력값, 버튼, 체크박스를 React에서 어떻게 다루는지 궁금하셨죠?
다음 편에서 자세히 알아봅니다!

---

💬 궁금한 점은 댓글로 남겨주세요. React 스터디, 이제 본격적인 실전 단계로 갑니다! 🚀