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>