-
Notifications
You must be signed in to change notification settings - Fork 2
찜목록 전체선택, 선택삭제
Young2un edited this page Jul 11, 2024
·
2 revisions
설계를 해보자,
해야할 일
- 선택을 하면 상태에 상품의 아이디가 쌓여야함.
- 선택삭제를 누르면
delete
호출 - 전체선택을 누르면 모든 리스트가 선택되어야 함
- 하나라도 체크가 해제 될 시 전체선택이 해제 되어야 함.
- 전체선택을 한번 더 누르면 전체 해제가 되어야 함.
구조
// WishList.tsx
여기서 상태관리,,
return
<CheckBox>전체선택</CheckBox>
{ data.map() => {
<CheckBox/>
<WishItem/>
}
개별 삭제시 set이 업데이트 되지 않아서, 전체선택이 해제 되는 상황 발생
<div className={cn('check-area')}>
<input
type='checkbox'
id='all-check'
onChange={toggleAllCheckedById}
checked={data?.length === selectedList.size} // 이 부분 문제
className={cn('select-item-input')}
/>
<label htmlFor='all-check' className={cn('select-item-label')} />
</div>
- 개별 삭제 시 위로 상태를 넘겨준다
- useEffect를 사용해 데이터의 길이 변화를 체크한다.
- 함수를 만들어 데이터의 아이디가 set에 다 담겨있는지 체크한다 => 이걸로 했음. 이유: 불필요한 상태와 이팩트를 만들지 않아도 돼서 => 만약 delete가 없는 아이디를 보냈을때 문제가 생긴다면 문제가 될 수 있는 코드이지만 현재 코드에서는 문제가 되지 않고 가장 현명한 방법으로 느껴짐
const isAllChecked = () => data?.every((v) => selectedList.has(v.productId));
checked={isAllChecked()}
민정 🐶
- event 타입 지정하기
- React Hook "useState" is called in function "page" that is neither a React function component nor a custom React Hook function
- className을 prop으로 넣고 싶어요
- The ref value 'elementRef.current' will likely have changed by 어쩌고 에러
- react hydration error
- input type='file'
- ObjectRef와 MutableRefObject
- react-hook-form onChange가 trigger 되지 않는다면?