URL 파라미터와 쿼리의 역할 분리

경로 매칭

라우터가 현재 pathname을 읽고 :id 자리에 들어온 값을 추출한다.

조건 해석

search params는 페이지, 정렬, 필터 같은 화면 옵션으로 파싱한다.

데이터 요청

식별자와 조건을 조합해 API key 또는 query key를 만든다.

URL 갱신

필터 변경은 상태만 바꾸지 말고 공유 가능한 주소로 반영한다.

postId

필수 식별자 없으면 화면 자체가 성립하지 않는 값

잘못된 값은 404 또는 fallback

page

목록 보기 옵션 같은 목록을 어느 위치에서 볼지 결정

기본값을 명시

sort

정렬 기준 서버 요청과 화면 표시 순서에 함께 사용

허용 목록 검증

filter

공유 가능한 조건 새로고침과 링크 공유 후에도 유지

폼 임시값과 분리

직접 접근 · 타입 변환 · 기본값 점검

직접 접근 깊은 URL로 들어와도 필요한 데이터를 다시 불러온다.

타입 변환 숫자와 boolean query를 문자열 그대로 쓰지 않는다.

기본값 없는 query에 대한 기본 페이지와 정렬이 정해져 있다.

히스토리 필터 변경이 뒤로가기 경험을 망치지 않는다.

파라미터와 쿼리 읽기

const { postId
        overflow-wrap: break-word;
        word-break: keep-all;
      } = useParams();
const [searchParams] = useSearchParams();
const page = Number(searchParams.get('page') ?? 1);