console.log로 확인을 마쳤다면 바로 지우기

export default function PokemonDetail() {
  const navigate = useNavigate();
  const location = new URLSearchParams(useLocation().search);
  const pokemonId = parseInt(location.get("id"));

  console.log(pokemonId);

  const selectedPokemon = MOCK_DATA.find(
    (pokemon) => pokemon.id === pokemon.id
  );

  console.log("selectedPokemon", selectedPokemon);

위 코드는 MOCK_DATA의 id값과 페이지의 id값이 서로 일치하면 해당 정보를 불러오게 작동하는 코드이다

사전에 console.log(pokemonId); 을 작성하여 올바른 id를 불러오고 있는지 확인 후 진행하려는데

id값 10번에 해당하는 페이지를 클릭했으나 MOCK_DATA값이 1인 정보가 가져와 지는 문제가 발생

작성한 코드를 다시 확인해본 결과 문제의 원인은 금방 찾았다

const selectedPokemon = MOCK_DATA.find(
    (pokemon) => pokemon.id === pokemon.id
  );

해당 로직 부분의

pokemon.id === pokemon.id X
pokemon.id === pokemonId O

일치연산자를 사용하는 곳에서 오타가 발생했던 것

아마 작성시에 비슷한 단어이니 복사하고 수정을 거치지 않은 듯 한데, 원래라면 설치해두었던 확장앱인 에러렌즈가 작동하여

해당 사진처럼 알려주어야 했으나 앞서 확인할 때 사용한 코드인 console.log(pokemonId); 로 인해 매치가 되어 에러렌즈가 감지하지 못하게 되었었다

결론은 심각한 문제는 아니였지만 사용하지 않는 코드 특히 console.log를 이용한 코드는 바로 지워주거나 주석을 달아주는것이 좋다고 크게 느꼈었다