민섭 trouble‐shooting‐1

1. useLocation vs useParams

해당 URL에서 즉시 query parameter 값을 가져와서 훅에 parameter로 넣어줘야 했다. 처음에 useParams를 사용해서 값을 넣어봤는데 동작하지 않았다.

useParams

useParams는 URL의 다이나믹 params를 읽는 데 사용된다. 다이나믹 params란 URL 경로에 포함된 변수로, 일반적으로 :paramName 형식으로 라우트에 정의된다.

예를 들어, /results/:region/:category_parking 같은 라우트에서 region과 category_parking은 다이나믹 params이다. 이 경우, useParams를 사용하여 region과 category_parking 값을 가져올 수 있다.

그러나 쿼리 스트링(?key=value 형태)을 사용하는 경우 useParams는 적절한 값을 반환하지 않는다.

useLocation

useLocation은 현재 location 객체를 반환한다. 따라서 즉각적인 URL변화에서 전체 url을 가져온다. const location = useLocation(); const searchParams = new URLSearchParams(location.search);

따라서 다음과 같이 location.search를 사용해서 searchParams를 불러올 수 있다.

이후

const getNumberParam = (param: string, defaultValue: number) => { const value = searchParams.get(param); return value !== null ? Number(value) : defaultValue; }; getNumberParam이라는 함수를 만들어서 함수의 유효성 검사를 하고 기본값을 넣어줄 수 있도록 반환하는 함수를 제작하고

const validParams = { region: getNumberParam("region", 99), type: getNumberParam("type", 99), category_cooking: getNumberParam("category_cooking", 2), category_parking: getNumberParam("category_parking", 2), category_pickup: getNumberParam("category_pickup", 2), };

반환될 객체를 만들어서 해당 함수를 적용시켰다.