객체 배열 비교

자바스크립트를 사용해서 프로젝트를 진행할때
리스트에 객체를 포함하고 빼는 기능이 필요할때가 있다.

예를들어 체크박스
체크박스를 선택했을때 리스트에 담고
체크박스를 해제했을때 리스트에 해제할때

이때 전체선택기능을 만들때 filter를 사용해서 기능을 개발했는데
까먹지않기위해 기록한다.

그리고 전체 선택기능은 많이 사용하니깐

이렇게 API 호출을 통해서 받아온 결과값 객체배열

arr은 전체선택했을때 선택된 리스트
chkQuestionPointList는 이미 선택된 모든 리스트들

전체선택 버튼을 클릭했을 때 filter를 통해서

if (
  arr.filter(item => 
    chkQuestionPointList.map((value) => value.id).indexOf(item.id.toString()) >= 0
  ).length === arr.length
) {
  setChkQuestionPointList((prev) => prev.filter((prevItem) => !arr.map((item) => item.id).includes(prevItem.id))) 
  return
}

arr과 chkQuestionPointList를 비교해서
arr에 filter를 통해 얻은 결과값과 original arr의 값을 비교해서
length가 같으면
이미 포함된 리스트라고 판단해서 chkQuestionPointList에서 arr에 포함된 객체들을 chkQuestionPointList에서 삭제해준다(전체선택을 해제해준다.)

length가 같지 않다면
전체선택되지 않았다고 판단해서 chkQuestionPointList에 arr을 포함시켜줘서
전체선택을 해주게 되었다.

setChkQuestionPointList((prev) => [...prev, ...arr])

물론 indexOf가 아니라 includes나 some을 사용할 수 도 있지만 이번에는 indexOf를 사용해서 해결하였습니다.

추가로 chkQuestionPointList.map((value) => value.id)를 하게되면

이런식으로 배열이 생성되게 되어서 이 배열에 arr에 포함된 value 값이 있는지 없는지를 비교하였습니다.