✅ React 기초 강좌

🎯 학습 목표

• useEffect의 동작 원리와 실행 시점을 이해한다.
• 마운트, 업데이트, 언마운트 단계에서 각각 어떤 코드를 실행할 수 있는지 배운다.
• API 호출, 이벤트 등록/해제 등 실무용 사이드 이펙트 처리 방법을 익힌다.

✅ useEffect란?

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

기본 문법:

import { useEffect } from 'react';

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

📦 생명주기 관점에서의 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>;
}

✍️ 과제

🧩 1. GreetingTimer 컴포넌트를 만들어보세요

• 화면에 “안녕하세요!” 메시지를 출력

• 컴포넌트가 나타난 후 5초가 지나면

  → “5초 지남 – 인사 종료”로 메시지를 바꿈

• useEffect와 setTimeout을 사용

예시 출력:

1~5초 사이 → "안녕하세요!"
5초 이후 → "5초 지남 – 인사 종료"