[TIL] React Checkbox 선택 및 해제

요즘 코드를 짜면서 가장 크게 느끼는 점은 큰 그림을 보면서 코드를 짜야한다는 것이다.
예를 들어, 재사용 가능성이 높은 것들은 컴포넌트를 분리해서 다른 곳에서도 재사용할 수 있게끔 만든다던지..
함수를 작성할 때 여러가지 경우의 수를 생각하고 작성해야 한다는 것들..

아직은 실력이 부족해서인지 그러한 것들을 모두 다 고려하지 못 하는 것 같다.
이번에 checkbox 선택 및 해제하는 코드를 짜면서도 하나 해결하면, 다른게 오류나서 그런 것들을 하나씩 수정하다 보니 어느새 엄청 복잡한 코드가 된 것 같은 느낌이다.
앞으로는 좀 더 이러한 것들을 신경 쓰면서 코드를 짜야겠다.

1. 우선 isChecked라는 state를 만들어서 checkbox의 상태를 관리했다.

2. 선택한 checkbox가 전체 선택일 경우 isChecked = {allCheckde: true 또는 false} 로 지정하여,
   true일 경우 전체 리스트의 id를 key값으로, value로 true를 만들어주는 map을 사용했다.
   만약 클릭한 당시isChecked = {allCheckde: true}일 경우 이미 선택되어 있는 상태이기에 isChecked = {allCheckde: false} 로만 상태를 지정했다.

3. 선택한 checkbox가 개별 선택일 경우에는 스프레드 연산자를 통해 기존 isChecked의 값에 선택한 리스트의 id를 key값으로, 현재 상태의 반대(true<=>false)를 value로 추가해주는 로직으로 작성했다.

4. 그리고 onClick시 위에서 작성한 함수를 실행시키고, checked의 값으로 isChecked를 바라보며 체크 상태를 변경해주었다.
   • allChecked = true일 경우 checked=true가 되어 모든 checkbox가 체크 된다.
   • allChecked = false이고, 해당 리스트의 id가 true일 경우 체크가 된다.