✅ React 기초 강좌

📄 components/GreetingTimer.jsx

import { useState, useEffect } from 'react';

function GreetingTimer() {
  const [message, setMessage] = useState('안녕하세요!');

  useEffect(() => {
    const timer = setTimeout(() => {
      setMessage('5초 지남 – 인사 종료');
    }, 5000); // 5초 후 실행

    return () => clearTimeout(timer); // 컴포넌트 언마운트 시 타이머 제거
  }, []);

  return (
    <div>
      <h2>{message}</h2>
    </div>
  );
}

export default GreetingTimer;

📄 App.jsx에서 사용

import GreetingTimer from './components/GreetingTimer';

function App() {
  return (
    <div>
      <h1>useEffect 타이머 예제</h1>
      <GreetingTimer />
    </div>
  );
}

export default App;

✅ 동작 흐름

1. 페이지 로드 시 → "안녕하세요!" 출력
2. 5초 후 → "5초 지남 – 인사 종료"로 변경됨
3. 컴포넌트가 사라질 경우 타이머 자동 제거됨

GitHub - heroyooi/react-app at ch3_2