Next.js useParams와 쿼리스트링 차이 완전정복
안녕하세요, 오늘은 많은 개발자분들이 Next.js 프로젝트에서 자주 헷갈려하는 개념 하나를 풀어보려고 해요. 바로 useParams와 query string의 차이점인데요, 특히 /channel/[channelId] 같은 라우트에서 이 두 개념이 섞이면 초보자부터 실무 개발자까지도 종종 혼란을 겪게 됩니다.
1. useParams는 무엇인가요?
useParams는 Next.js App Router 환경에서 [...slug]와 같은 동적 라우팅에서 사용되는 훅이에요. 예를 들어 /channel/123이라는 주소에서 123을 가져오고 싶다면 다음처럼 사용할 수 있어요.
const params = useParams();
const channelId = params?.channelId;여기서 중요한 점! params.channelId는 URL 경로 안에 포함된 **파일 기반 동적 경로**에만 적용된다는 거예요.
2. query string은 언제 사용하는 걸까요?
query string은 ?key=value 형식의 URL 뒤에 붙는 파라미터를 말해요. 예를 들어 /channel?channelId=123 이런 주소에서는 Next.js에서 useSearchParams()를 사용하거나 useRouter().query로 값을 읽게 됩니다.
const searchParams = useSearchParams();
const channelId = searchParams.get("channelId");즉, 파일 경로에 포함된 동적 segment가 아닌 경우에는 query string을 사용해야 올바른 데이터를 가져올 수 있어요.
3. 실수하기 쉬운 상황은?
많은 분들이 아래와 같이 라우트 구조를 만들면서도 query string을 섞어버리곤 해요:
/channel/[channelId]파일 구조이면서/channel?channelId=123이런 URL을 열어보는 경우
이때 useParams()는 값을 반환하지 않아요! 이유는 해당 값이 경로 기반이 아닌 query로 들어갔기 때문이죠. 이럴 땐 반드시 useSearchParams()로 가져와야 합니다.
정리하며
간단하게 요약해볼게요!
- useParams(): 동적 라우팅 경로에서만 작동
- useSearchParams(): 쿼리스트링을 가져올 때 사용
- 둘을 혼용하면 값이 undefined가 되니 구조에 맞게 선택!
Next.js에서는 라우팅 방식이 다양해진 만큼, 정확한 구조 이해가 중요합니다. 이번 기회에 useParams와 query string의 차이를 확실히 알아두시면 앞으로 디버깅할 일도 줄어들 거예요.
궁금하신 점은 댓글로 남겨주세요. 다음에도 알찬 개발 정보로 찾아뵐게요!