react 배열카드 순서변경 Object.entries

육희영·2023년 3월 8일

회고록

목록 보기
11/24

card의 순서를 변경하면 버튼이 disabled가 풀리는데 순서를 변경하다가 원래대로 되돌리면 disalbled가 다시 되야하는데 그게 안되었다.
또 카드 추가 삭제를 해도 위와 같이 버튼이 작동해야 했다.

이걸 적용하려면

1.originCardList와 cardList의 길이 비교
2.originCardList.unUseItem와 cardList.unUseItem의 길이 비교
3.1,2번이 다시 원래대로 배열 순서가 돌아갔는지 체크

const isCardItemsUpdated = React.useMemo(() => {
    // 길이가 다르면 업데이트 되었다고 판단.
    if(originCardList?.length !== cardList?.length) {
      return true
    }

    if(originCardList.unUseItem?.length !== cardList?.unUseItem?.length) {
      return true
    }

    const updated = originCardList?.find((_: any, index: number) => {
      return Object.entries(originCardList[index]).toString() !== Object.entries(cardList[index]).toString()
    })

    if(updated) {
      return true
    }

    return false
  }, [data])
  
  <button disabled={!isCareNotesItemsUpdated}>
  저장
  </button>
 

0개의 댓글