[React] Hook - 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,
  });
};

---

⚠️ 상태 변경 시 주의사항

상태를 직접 수정하면 안된다 ❌

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

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

setCount(count + 1);