✅ React 기초 강좌

📄 components/MultiCounter.jsx

import { useState } from 'react';

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

  const handleIncrease = () => setCount(count + 1);
  const handleDecrease = () => setCount(count - 1);
  const handleReset = () => setCount(0);

  return (
    <div style={{ padding: '10px', border: '1px solid #ccc', marginTop: '20px' }}>
      <h2>🔢 카운터</h2>
      <p>현재 숫자: {count}</p>
      <button onClick={handleIncrease}>+1</button>
      <button onClick={handleDecrease}>-1</button>
      <button onClick={handleReset}>초기화</button>
    </div>
  );
}

export default MultiCounter;

📄 App.jsx에서 사용

import MultiCounter from './components/MultiCounter';

function App() {
  return (
    <div>
      <h1>useState 예제</h1>
      <MultiCounter />
    </div>
  );
}

export default App;

✅ 실행 결과 예시

🔢 카운터
현재 숫자: 0
[+1] [-1] [초기화]

버튼 클릭 시 각각 +1, -1, 0으로 상태가 변경되며, 자동으로 렌더링됩니다.

GitHub - heroyooi/react-app at ch3_1