React Router URL

식별자는 경로에, 화면 조건은 쿼리에 둔다

제품 상세는 /product/:id처럼 리소스를 가리키고, 제품 목록의 검색과 필터는 ?category=&q=처럼 선택 상태를 표현합니다.

상세 페이지 /product/123 123이 없으면 어떤 제품을 볼지 결정할 수 없어 경로 의미가 깨집니다.
vs
목록 페이지 /products?category=electronics&q=notebook 필터가 없어도 목록은 유효하며, 값이 있으면 표시 결과만 좁힙니다.

useParams로 읽기

URL 경로의 일부인 id, slug, userId처럼 화면의 주인공을 정하는 값에 씁니다.

useSearchParams로 읽기

검색어, 카테고리, 정렬, 페이지 번호처럼 같은 화면 안의 조건에 씁니다.

Route path에 적는 값

/product/:id:id처럼 필수 경로 조각만 정의합니다.

Route path에 적지 않는 값

?q=react 같은 쿼리는 라우트 정의가 아니라 컴포넌트에서 읽습니다.