✅ React 기초 강좌

🎯 학습 목표

• useState의 개념과 사용법을 이해한다.
• 다양한 타입의 상태(숫자, 문자열, 배열, 객체)를 관리해본다.
• 상태 변경이 일어날 때 컴포넌트가 어떻게 다시 렌더링되는지 이해한다.

✅ useState란?

React 컴포넌트 안에서 **상태(state)**를 생성하고 관리할 수 있게 해주는 Hook입니다.

📦 기본 사용법

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // count: 현재값, setCount: 변경 함수

  return (
    <div>
      <p>현재 값: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

• useState(초기값)은 배열 [값, 설정함수]를 반환합니다.
• 상태가 변경되면 자동으로 해당 컴포넌트가 다시 렌더링됩니다.

🔢 숫자 상태 예제: 카운터

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

✍️ 문자열 상태 예제: 입력값 관리

const [name, setName] = useState('');

🧾 배열 상태 예제: 목록 추가

const [items, setItems] = useState([]);

const addItem = () => {
  setItems([...items, '새 아이템']);
};

🧱 객체 상태 예제: 폼 데이터

const [form, setForm] = useState({ name: '', age: '' });

const handleChange = (e) => {
  setForm({
    ...form,
    [e.target.name]: e.target.value,
  });
};

⚠️ 상태 변경 시 주의사항

1. 상태를 직접 수정하지 마세요 ❌

   count += 1; // 잘못된 방식
   

2. 반드시 setState 함수로 변경해야 함 ✅

   setCount(count + 1);
   

✅ 과제

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

• 버튼 3개가 있습니다:
  • “+1”
  • “-1”
  • “0으로 초기화”
• 숫자 상태를 조절하며 화면에 표시되도록 구현해보세요.

출력 예시:

현재 숫자: 3
[+1] [-1] [초기화]