Skip to content

찜목록 전체선택, 선택삭제

Young2un edited this page Jul 11, 2024 · 2 revisions

설계를 해보자,

해야할 일

  1. 선택을 하면 상태에 상품의 아이디가 쌓여야함.
  2. 선택삭제를 누르면 delete 호출
  3. 전체선택을 누르면 모든 리스트가 선택되어야 함
  4. 하나라도 체크가 해제 될 시 전체선택이 해제 되어야 함.
  5. 전체선택을 한번 더 누르면 전체 해제가 되어야 함.

구조

// 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>

할 수 있는 방법

  1. 개별 삭제 시 위로 상태를 넘겨준다
  2. useEffect를 사용해 데이터의 길이 변화를 체크한다.
  3. 함수를 만들어 데이터의 아이디가 set에 다 담겨있는지 체크한다 => 이걸로 했음. 이유: 불필요한 상태와 이팩트를 만들지 않아도 돼서 => 만약 delete가 없는 아이디를 보냈을때 문제가 생긴다면 문제가 될 수 있는 코드이지만 현재 코드에서는 문제가 되지 않고 가장 현명한 방법으로 느껴짐

const isAllChecked = () => data?.every((v) => selectedList.has(v.productId));

checked={isAllChecked()}

Clone this wiki locally