React에서 체크 박스에 관련된 기능 구현을 정리한 글입니다.
onChange
이벤트를 통해 전체 체크를 하는 함수입니다.onChnage
이벤트를 통해 개별 체크를 하는 함수입니다.const dataLists = [
{id : 1, data : "aaa"},
{id : 2, data : "bbb"},
{id : 3, data : "ccc"},
...
]
const CheckBox = () => {
1️⃣const [checkedList, setCheckedLists] = useState([]);
// 전체 체크 클릭 시 발생하는 함수
const onCheckedAll = useCallback(
(checked) => {
if (checked) {
const checkedListArray = [];
2️⃣dataLists.forEach((list) => checkedListArray.push(list));
setCheckedLists(checkedListArray);
} else {
3️⃣setCheckedLists([]);
}
},
[dataLists]
);
// 개별 체크 클릭 시 발생하는 함수
const onCheckedElement = useCallback(
(checked, list) => {
4️⃣if (checked) {
setCheckedLists([...checkedList, list]);
} 5️⃣else {
setCheckedLists(checkedList.filter((el) => el !== list));
}
},
[checkedList]
);
};
checkedListArray.push(list.id))
return (
<input
type="checkbox"
1️⃣onChange={(e) => onCheckedAll(e.target.checked)}
checked={
2️⃣checkedList.length === 0
? false
: 3️⃣checkedList.length === dataLists.length
? true
: false
}
/>
{dataLists.map((list) => (
<input
key={list.id}
type="checkbox"
4️⃣onChange={(e) => onCheckedElement(e.target.checked, list)}
5️⃣checked={checkedList.includes(list) ? true : false}
/>
))}g
)}
</CartListContainer>
);