✅ React 기초 강좌

✅ 1단계: 기본 좋아요 버튼 구현

📄 src/components/LikeButton.jsx

import { useState } from 'react';

function LikeButton() {
  const [likes, setLikes] = useState(0);

  return (
    <div>
      <p>❤️ 좋아요 {likes}개</p>
      <button onClick={() => setLikes(likes + 1)}>좋아요</button>
    </div>
  );
}

export default LikeButton;

✅ 2단계: 좋아요 취소(토글) 기능 추가

이미 눌렀을 경우 좋아요를 취소하면 숫자가 줄어듭니다.

import { useState } from 'react';

function LikeButton() {
  const [liked, setLiked] = useState(false);
  const [likes, setLikes] = useState(0);

  const handleClick = () => {
    if (liked) {
      setLikes(likes - 1);
    } else {
      setLikes(likes + 1);
    }
    setLiked(!liked);
  };

  return (
    <div>
      <p>❤️ 좋아요 {likes}개</p>
      <button onClick={handleClick}>
        {liked ? '좋아요 취소' : '좋아요'}
      </button>
    </div>
  );
}

export default LikeButton;

✅ 3단계: 초기화 버튼까지 추가 (확장 과제)

import { useState } from 'react';

function LikeButton() {
  const [liked, setLiked] = useState(false);
  const [likes, setLikes] = useState(0);

  const handleClick = () => {
    if (liked) {
      setLikes(likes - 1);
    } else {
      setLikes(likes + 1);
    }
    setLiked(!liked);
  };

  const resetLikes = () => {
    setLikes(0);
    setLiked(false);
  };

  return (
    <div>
      <p>❤️ 좋아요 {likes}개</p>
      <button onClick={handleClick}>
        {liked ? '좋아요 취소' : '좋아요'}
      </button>
      <button onClick={resetLikes}>초기화</button>
    </div>
  );
}

export default LikeButton;

📄 App.jsx에서 사용

import LikeButton from './components/LikeButton';

function App() {
  return (
    <div>
      <h1>React Like Button 예제</h1>
      <LikeButton />
    </div>
  );
}

export default App;

🧪 직접 실행해보시면 버튼 클릭 → 좋아요 수 증가/감소,

초기화 버튼으로 리셋되는 동작을 확인할 수 있습니다.