포켓몬 리스트에서 발생한 문제와 해결 방법
포켓몬 리스트에서 클릭 이벤트 충돌, 포켓몬 넘버 포맷 문제, 쿼리 스트링에서 데이터 누락 등의 이슈가 발생했다.
오늘 해결한 트러블 슈팅을 정리해본다.
Add 버튼을 클릭했을 때, Detail 페이지로 이동하는 문제
💡 문제
포켓몬 리스트의 li 태그 전체에 onClick 이벤트가 있어서 포켓몬 카드를 클릭하면 디테일 페이지로 이동하게 구현했다. 그런데, li 내부에 있는 Add 버튼을 클릭했을 때도 li의 onClick이 함께 실행되면서, 포켓몬이 추가되지 않고 디테일 페이지로 이동하는 문제가 발생했다.
🔍 원인
- 이벤트 버블링(Event Bubbling)으로 인해 Add 버튼을 클릭해도 부모 요소(li)의 onClick이 실행됨.
✅ 해결 방법
<AddButton onClick={(e) => {
e.stopPropagation(); // 이벤트 버블링 방지
addPokemon(pokemon);
}}>
ADD
</AddButton>포켓몬 넘버 포맷 문제
💡 문제
포켓몬 ID를 no.00{pokemon.id} 형태로 하드코딩을 했는데, ID가 10 이상일 때 "no.0010"처럼 4자리 숫자로 표시되는 문제가 발생했다.
🔍 원인
- id 값이 1자리 또는 2자리일 때는 정상적으로 "no.001"처럼 표시되지만,
3자리 이상이 되면 "no.0010"처럼 길이가 맞지 않는 문자열이 됨.
✅ 해결 방법
padStart()를 사용해서 ID를 3자리로 맞추기!
<p>No.{pokemon.id.toString().padStart(3, "0")}</p>- padStart의 첫번째 파라미터로 원하는 자리수를 입력해주고 두번째로 원하는 문자를 넣어주면 된다.
- 추가로 padEnd()를 사용하면 원하는 문자를 뒤에 붙일수도 있다.
- 내가 사용하던 MOCK_DATA의 객체의 id값은 숫자였기 때문에 toString()을 사용해서 string으로 바꿔주었다.
쿼리 스트링으로 디테일 페이지 이동 시 포켓몬 이름이 undefined로 뜨는 문제
💡 문제
포켓몬 카드를 클릭하면 디테일 페이지로 이동하면서 id, name, img 정보를 쿼리 스트링으로 넘겼다. 하지만, 포켓몬 이름이 undefined로 표시 되는 문제가 생겼다.
🔍 원인
pokemon.Korean_name에서 K가 대문자로 잘못 표기 되었었다.🤦♀️
실제 MOCK_DATA에서는 pokemon.korean_name(소문자)이 올바른 키 값이다.
이런 대소문자 차이 때문에 사소한 오류가 많이 뜨기 때문에 데이터 구조를 한 번 콘솔에 출력해서 확인하는 습관을 들여야 한다고 생각이 들었다.
