장바구니 컴포넌트
전체 체크박스가 있는 컴포넌트
각 개별 체크박스가 있는 컴포넌트
일단 체크 박스 전체를 관리하는 함수 하나와 상품의 개수만큼 생성되는 개별 체크 박스를 관리하는 함수 2가지가 필요했다.
개별 체크 박스의 경우 체크박스의 상태가 true일 경우 새로운 배열 state에 해당 개별 체크박스 컴포넌트의 id를 넣어주었고 false일 경우에는 filter를 통해 해당 id를 state에서 지워주었다.
전체 체크 박스의 경우 체크박스의 상태가 ture일 경우 빈 배열을 하나 만들어 주었고 forEach 메소드를 통해 장바구니 상품목록에 있는 상품 id를 빈 배열에 push해주었다. false의 경우에는 체크리스트를 빈 배열로 setState해주었다.
그리고 각 해당 컴포넌트에서 checked 속성을 보면 전체체크박스의 경우 체크리스트의 길이와 처음 데이터를 불러온 상품 목록의 길이가 같을 때 true 다르면 false로 설정했다. 이런 로직으로 짤 경우 전체 체크 박스가 체크 되었다고 하더라도 개별 체크 박스가 하나라도 체크 되면 전체 체크 박스가 자동으로 해제되게 되며 개별 체크 박스가 모두 체크 됐을 때 전체 체크박스가 자동으로 체크되게 된다.
개별체크 박스의 경우도 checked 속성을 보면 해당 체크박스의 id가 체크리스트에 있으면 true 없으면 false라는 뜻이다.
처음에는 굉장히 간단한 기능으로 생각했지만 구현하려고 했을 땐 그게 아니라는 걸 크게 깨달았다. 이 기능을 구현하기 위해서 여러 코드를 보았고 뜯어보며 이해하려고 하다보니 리액트에 대한 사고가 크게 확장된 것을 느끼게 되었다
