react project 트러블슈팅

포켓몬 삭제 기능이 작동하지 않는 문제 해결

🛑 문제 상황

• 삭제 구동 함수

const removePokemon = (id) => {
  setAddedPokemons((prev) => prev.filter((pokemon) 
  => pokemon.id !== id));
};

코드 상 문제가 없어보이나 Dashboard.jsx에서 삭제 버튼을 눌러도 포켓몬이 삭제되지 않음.

• console.log( ) 로 오류 출력

const removePokemon = (id) => {
  console.log("삭제하려는 포켓몬 ID:", id); // 삭제하려는 포켓몬 ID 출력
  setAddedPokemons((prev) => prev.filter((pokemon) => pokemon.id !== id));
  console.log("삭제 후 상태:", addedPokemons); // 업데이트 후 상태 확인
};

• 콘솔 오류:

Uncaught TypeError: setAddedPokemons is not a function

👉 setAddedPokemons가 undefined이기 때문에 상태를 변경할 수 없음.
👉 undefined라면 Dashboard.jsx에서 PokemonCard에 removePokemon을 전달하는 과정에서 문제가 있다고 판단하였으나 문제 없음.

🧐 문제 원인 분석

✅ Dex.jsx에서 Dashboard.jsx를 렌더링할 때 setAddedPokemons을 props로 전달하지 않음!
✅ Dashboard.jsx에서 setAddedPokemons을 사용하려 했지만, undefined이므로 오류 발생.

🔧 문제 해결 과정

Dex.jsx에서 를 렌더링할 때 setAddedPokemons을 전달하지 않음.
이렇게 되면 Dashboard.jsx에서 setAddedPokemons가 undefined가 되고, 삭제 기능이 작동하지 않게 됨.
🚀 해결 방법: Dex.jsx에서 setAddedPokemons을 Dashboard에 전달하기!

• 수정 전 : ❌ setAddedPokemons을 전달하지 않아서 Dashboard.jsx에서 undefined가 됨.

<Dashboard addedPokemons={addedPokemons} />

• 수정 후 : ✅ setAddedPokemons을 전달해서 삭제 기능이 정상 작동하도록 수정!

<Dashboard addedPokemons={addedPokemons} 
setAddedPokemons={setAddedPokemons} />

💯 최종 수정된 Dex.jsx 코드

import { useState } from "react";
import PokemonList from "../components/PokemonList";
import Dashboard from "../components/Dashboard";
function Dex() {
  const [addedPokemons, setAddedPokemons] = useState([]);
  const addPokemon = (pokemon) => {
    if (!addedPokemons.some((p) => p.id === pokemon.id)) {
      setAddedPokemons([...addedPokemons, pokemon]);
    }
  };
  return (
    <div>
      {/* ✅ setAddedPokemons을 Dashboard에 전달! */}
      <Dashboard addedPokemons={addedPokemons} setAddedPokemons={setAddedPokemons} />
      <PokemonList addPokemon={addPokemon} />
    </div>
  );
}
export default Dex;

🎯 최종 결론

• setAddedPokemons이 undefined가 되지 않도록 Dex.jsx에서 Dashboard.jsx로 올바르게 전달해야 함.
• 함수가 정상적으로 실행 되지 않을때 콘솔 로그를 활용해 디버깅하기.
- 상위 컴퍼넌트를 짤 때 덤벙대지 않기.