FACTS(사실, 객관) : 내가 한 일
카드 를 눌렀을 때 =>디테일 페이지로 / 카드 안의 추가 버튼을 눌렀을 때 => 나만의 포켓몬에 추가
되어야하는데 어딜 눌러도 디테일페이지로 이동하는 문제 => eventBubbling 문제였음
https://youtu.be/3GabN9mz0_U (참고영상)
부모요소에 설정한 이벤트가 자식요소까지 퍼지는 것으로, 이벤트를 퍼지는 것을 막는 메서드로 stopPropagation()이 있다고 함. 여기까진 알았는데 이걸 어떻게 넣어야 하는지 모르겠음!
{isSelected ? (
<Button
onClick={(e) => {
e.stopPropagation().onRemove(pokemon);
}}
>
삭제
</Button> //onRemove인 경우 삭제로
) : (
<Button
onClick={(e) => {
e.stopPropagation().onAdd(pokemon);
}}
>
추가
</Button> //onAdd인 경우 추가로
)}
일단 이렇게 넣었는데 이제 상세페이지로 넘어가지 않는 대신에,
아..
그리고 상세페이지에도 문제가 있는데,
매치되는 routes가 없다고함
Router.jsx에 가보니 연결이 안되어있어서 연결
import PokemonDtail from "../pages/pokemonDetail";
const Router = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/pokemonDetail" element={<PokemonDtail />} />
</Routes>
</BrowserRouter>
);
};
연결하고 새로고침하니 또 오류가
const pokemon = MOCK_DATA.some((p) => p.id === id);
문제가 되는 코드는 이 줄이었는데 p의 id가 어떤 아이디가 같아야 하는지 지정해주지 않아서 그런거같아
const pokemon = MOCK_DATA.some((p) => p.id === MOCK_DATA.id);
목업 데이터의 아이디를 연결시켜줬더니
화면에 이런 결과가 나옴
태그 안 중괄호로 묶인 부분이 하나도 표시되지 않고
뒤로가기를 누르면 이런 오류가..
번역기의 힘을 빌렸는데
잡히지 않은 오류: 잘못된 후크 호출입니다.
훅은 함수 컴포넌트의 본문 내부에서만 호출할 수 있습니다.
다음 이유 중 하나로 인해 이 오류가 발생할 수 있습니다:
1. React와 렌더러의 버전이 일치하지 않을 수 있습니다(예: React DOM).
2. Hook의 규칙을 위반하고 있을 수 있습니다.
3. 동일한 앱에 React 복사본이 두 개 이상 있을 수 있습니다.
이 문제를 디버그하고 수정하는 방법에 대한 팁은 https://reactjs.org/link/invalid-hook-call 을 참조하세요.
뭔지 몰라도 2번같음 . . 어딘진 모르겠지만 규칙을 위반했겠지
FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌
한번에 딱 해결되지 않고 하나 고치면 하나 문제생기고 하나 고치면 하나 문제생기고 하는게 답답하다
FINDINGS(배운 것) : 그 상황으로부터 내가 배운 것, 얻은 것
stopPropagation()로 이벤트 버블링을 막는 것
FUTURE(미래) : 배운 것을 미래에는 어떻게 적용할 지