포켓몬 도감 트러블 슈팅 - 카드 중복 에러

 

현재 중복된 카드의 검사를 하는 로직이 작동되지 않는다. RTK로 리팩터링하면서 뭔가 잘못된건가 싶어서 일단 슬라이스 컴포넌트를 확인했다.

 

const pokeSlice = createSlice({
  name: "pokeSlice",
  initialState,
  reducers: {
    addPokemonCard: (state, action) => {
      const selectedPokemonCard = state.pokemonData.find(
        (pokemon) => pokemon.id === action.payload.id
      );
      if (state.selectedPokemon.includes(selectedPokemonCard)) {
        toast.error("똑같은 포켓몬은 1마리만 데려갈 수 있습니다");
        return;
      }

 

 

토스트로 alert를 작업하는 와중에 위와 같은 오류를 찾아냈다. 그리고 개발자 도구에서는 다음과 같은 오류를 출력하고 있었다.

 

 

동일한 카드를 Dashboard에 추가할 때 카드의 id가 동일한 카드가 추가되는 것이었다. 분명 카드의 id는 전부 다른 id를 쓰는 것이기에 이상은 없었을것이다.

 

시간이 부족해 GPT의 도움을 받다가 includes, some을 이용한 방식의 중복체크에서 차이점이 있다는 것을 알게되었다.

 

includes는 객체의 참조를 비교한다, some은 pokemon.id를 비교한다. includes 메서드는 객체의 메모리 주소를 비교하므로 내용이 동일하더라도 중복을 방지하지 못한다. 같은 카드가 있어도 추가되는 것은 내용은 동일해도 서로 다른 참조로 인식되어서 추가가 된다.

 

내 의도대로 pokemon.id의 값만을 비교하길 원한다면 some 메서드를 사용해야한다.

 

 

 

이제 정상적으로 중복검사를 한다.