details 페이지에서 Add 버튼을 추가하려고 했는데, 에러가 발생했다!
원래 Add버튼은 포켓몬 정보를 보여주는 PokemonList에 있었고 그 똑같은 기능을 Details 페이지에서도 구현하는 것이 목표였다! 기존 Details 페이지에는 PokemonList에서 쿼리스트링으로 이미지, 이름, 타입, 설명을 받아왔지만 Add 버튼을 추가하기 위해 포켓몬 id가 필요했다.
참고로 id를 사용하지 않고 포켓몬 이름으로도 구별할 수 있지만 id를 사용하는 것이 좀 더 직관적이고 코드를 읽었을 때, 내가 지금 포켓몬 중에서 어떤 포켓몬을 filtering하길 원한다는 생각을 전달하기도 쉽다고 생각해서 꼭 id를 받아오고 싶었다.
details 페이지에서는
- const id = params.get("id"); "id" 값을 받아오고 id라는 상수에 담았음
- MOCK_DATA.js에서 포켓몬 데이터를 가져와서
- useContext를 이용해 addPokemon 함수도 가져왔다.
handleAddPokemon이라는 새로운 이벤트 핸들러를 만들어서 Add 버튼을 눌렀을 때 실행되게 했는데,
함수 내부에는 MOCK_DATA.find()를 사용해서 id가 일치하는 포켓몬을 찾는 로직을 작성했다.
근데...! 버튼을 누르니까 에러가 발생했고, console.log(pokemon)을 찍어보니까 undefined(?)가 나왔다. 😱
🔥 해결방법은..? 쿼리스트링으로 가져온 id를 Number 타입으로 변환해야 한다!
쿼리"스트링"으로 가져온 값은 이름에서도 알수 있듯이 문자열(string) 타입이다.
그런데 MOCK_DATA 안의 포켓몬 id 값은?
숫자(number) 타입이다.
그러니까 find() 안에서 p.id === id 이렇게 비교하면 타입이 다르니까 조건이 성립되지 않아서 pokemon이 undefined가 되는 것이었다.
👉 해결 방법:
const id = Number(params.get("id"));이렇게 Number()를 써서 형변환을 해주면 아주 쉽게 해결된다 :)
configureStore에서 pokemonSlice를 import 했는데, 안 됐다?!
Redux Toolkit을 설정할 때, configureStore.js에서 pokemonSlice를 가져와서 store안에 reducer에 등록하려고 했는데... 또 무지 막지한 에러가 발생했다. 대체 왜..ㅠ?
분명 문제가 없었다고 확신했기 때문에 console로 PokemonSlice를 찍어봤다.
아니.. reducers값 내부에 있는 함수가 나올줄 알고 있었는데 name, initailState 그리고 reducers가 나오잖아? 왜 그런가 했더니
어이없게도 pokemonSlice라는 slice를 만들때 나도 모르고 평소 컴포넌트를 export하는 습관대로 파일의 최하단에 pokemonSlice를 export를 해버린 것이다.😅
그러니까 pokemonSlice 자체가 아니라 reducer를 export 해야하는 것이었다.
export default pokemonSlice.reducer;이렇게 코드를 수정해 주면? reducer가 잘 출력되는 것을 확인 할수 있다.
