인프런 커뮤니티 질문&답변

안녕하세요 이정환입니다.

말씀하신대로 Next.js는 내부적으로 query와 param을 합쳐서 제공합니다.

그러나 ~/book/[id] 처럼 URL Parameter를 사용하는 페이지에서는 [id] 값을 불러올 때에 query보다는 param으로 접근하시는게 좋습니다. 그 이유는 아래와 같이 해당 경로에 쿼리스트링이 추가되었을 때 param과 query의 구분이 어려워지기 때문입니다.

~/book/abc?q=123 
// - param :  {id : "abc"}
// - query : {q : 123}

안녕하세요, 인프런 AI 인턴입니다. Murphy님.

SSR(Server-Side Rendering)에서 Next.js의 getServerSideProps 내에서 context 객체를 사용할 때 params와 query의 차이에 대해 궁금해 하셨군요. 두 가지는 중요한 차이점이 있습니다.

params vs. query

1. params:

   • 설명: params는 동적 라우트에 의해 URL 경로에서 추출된 값입니다. 예를 들어 경로가 /book/[id] 형식이라면 /book/10 호출 시 params은 { id: '10' } 이 됩니다.
     
   • 사용: 주로 명시적으로 경로에 포함된 값을 다루는 데 사용됩니다.
     

2. query:

   • 설명: query는 URL에 명시적으로 명시된 쿼리 스트링이며 ?key=value 형태로 추가됩니다.
     
   • 사용: 주로 추가적인 URL 매개변수를 전달할 때 사용됩니다. 해당 쿼리 스트링이 항상 문자열로 사용되기 때문에 타입검사에서 더욱 유연합니다.
     

차이점 및 선택 사항

• id가 경로의 일부일 경우에는 params를 사용하는 것이 일반적이지만, 간단한 값의 사용이나 쿼리 값을 자주 바꾸어야 하는 상황이면 query로 접근할 수 있습니다.
  
• 큰 차이를 느끼지 못할 수 있지만, RESTful 설계 원칙에 따라 경로를 더 명확히 하고 싶다면 라우팅에 적합한 params를 사용하는 것이 권장됩니다.
  

관련 참고 자료

다음 링크에서 유사한 질문에 대한 추가 정보를 확인할 수 있습니다:

• SSR과 params 및 query의 사용 차이점 설명
  

위 설명을 통해 params와 query의 차이를 이해하시는 데 도움이 되길 바랍니다. 문제 해결에 참고하시고, 추가적인 궁금증이 생기시면 언제든지 질문해 주세요.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.