React input

✅ 1. 객체(state) 기반 관리 방식

각 체크박스의 상태를 객체 형태로 저장하고, onChange 이벤트로 해당 항목의 상태만 업데이트하는 방식이다. 많은 수의 체크박스를 개별적으로 제어해야 할 때 유용하다.

(1) State 정의

const [checkedItems, setCheckedItems] = useState({
  apple: false,
  banana: false,
  cherry: false,
});

(2) 상태 변경 함수

const handleChange = (event) => {
  const { name, checked } = event.target;
  setCheckedItems((prev) => ({ ...prev, [name]: checked }));
};

(3) 렌더링

{Object.keys(checkedItems).map((item) => (
  <label key={item}>
    <input
      type="checkbox"
      name={item}
      checked={checkedItems[item]}
      onChange={handleChange}
    />
    {item}
  </label>
))}

특징

• 각 체크박스의 상태를 독립적으로 관리할 수 있다.
• 개별 선택/해제 로직이 명확하다.
• 항목이 많을수록 상태 관리 객체의 크기가 커진다.

---

✅ 2. 배열(state) 기반 관리 방식

선택된 항목만 배열에 저장하여 관리하는 방식이다. 전체 선택/해제 기능을 쉽게 구현할 수 있다.

(1) State 정의

const [selectedItems, setSelectedItems] = useState([]);
const items = ["apple", "banana", "cherry"];

(2) 상태 변경 함수

const handleChange = (event) => {
  const { value, checked } = event.target;
  setSelectedItems((prev) =>
    checked ? [...prev, value] : prev.filter((item) => item !== value)
  );
};

(3) 전체 선택/해제 옵션

const handleSelectAll = (event) => {
  setSelectedItems(event.target.checked ? [...items] : []);
};

(4) 렌더링

<label>
  <input
    type="checkbox"
    checked={selectedItems.length === items.length}
    onChange={handleSelectAll}
  />
  전체 선택
</label>

{items.map((item) => (
  <label key={item}>
    <input
      type="checkbox"
      value={item}
      checked={selectedItems.includes(item)}
      onChange={handleChange}
    />
    {item}
  </label>
))}

특징

• 선택된 항목만 저장하므로 관리가 간결하다.
• 전체 선택/해제 기능을 손쉽게 추가할 수 있다.
• 개별 상태를 직접 참조하기는 상대적으로 불편하다.

---

⚖️ 선택 기준

구분	객체 기반 관리	배열 기반 관리
상태 저장 방식	각 항목의 상태를 key-value로 저장	선택된 항목만 배열에 저장
개별 제어	용이함	상대적으로 복잡
전체 선택/해제	별도 로직 필요	구현이 간단
적합한 경우	체크박스가 많고 개별 상태 관리가 필요한 경우	단순 선택 목록이나 전체 선택 기능이 필요한 경우

---