`React` 타입 오류 해결

안녕

 

개인 프로젝트 진행중 쿼리 스트링으로 URL에서 id 값을 가져와서 값에 해당하는 상세 페이지를

렌더링하도록 코드를 짰는데 어째서인지 상세 페이지가 보이지 않는 것이다..

 

const searchParams = new URLSearchParams(location.search);
//////////////////범인 검거/////////////
const pokemonId = searchParams.get("id");
////////////////////////////////////////
console.log(typeof pokemonId);

 

 

콘솔 창에도 아무런 정보가 나오질 않아서 혹시나 하고 id 값에 타입을 확인해 보았더니

String이 나오는 것이었다.. !

 

  const searchParams = new URLSearchParams(location.search);
  const pokemonId = Number(searchParams.get("id"));
  console.log("pokemonId의 타입=>", typeof pokemonId);

 

 

그리하여  searchParams에 Number를 덮어줘서 숫자로 형변환하고

pokemonId에 다시 넣어주면 숫자로 변경이 되어 상세페이지가 정상적으로 작동되기 시작했다

 

결론

URLSearchParams.get() 메서드는 항상 쿼리 스트링에서 값을 문자열로 반환하기 때문에

값을 숫자로 사용하려 할 때는 Number() 또는 parseInt()와 같은 함수를 사용하여 문자열을 숫자로 변환해야 한다

내가 사용하는 데이터의 타입이 무엇인지 잘 확인하면서 개발을 임해야 할 것 같다..!