URL 검색 파라미터 때문에 막힐 때 원인 좁히기

검색 필터나 페이지네이션처럼 URL 쿼리스트링에 상태를 담는 화면에서 버그가 나면, 화면만 보고 원인을 짐작하기 어렵다. 같은 화면이 어떤 URL에서는 멀쩡하고 어떤 URL에서는 비어 보이기 때문이다. 그래서 나는 화면보다 파라미터의 실제 값을 먼저 본다.

실제로 들어온 값을 찍어본다

useSearchParams로 읽은 값을 한 번 로그로 남긴다. 머릿속의 기대값과 실제 값이 다른 경우가 의외로 많다.

const params = useSearchParams();
console.log("page=", params.get("page"), "sort=", params.get("sort"));

여기서 자주 걸리는 것:

• 값이 항상 문자열이다. page === 1은 항상 false다. Number(page)로 변환해야 한다.
• 없는 파라미터는 null이다. 기본값 처리를 안 하면 그대로 쿼리에 섞여 들어간다.
• 한글이나 공백이 들어가면 인코딩된 채로 온다.

서버와 클라이언트를 나눠 본다

SSR이 끼면 서버에서 읽은 파라미터와 클라이언트에서 읽은 파라미터가 한 순간 다를 수 있다. 서버에서는 요청 URL을, 클라이언트에서는 hydration 이후 값을 각각 찍어보면 어느 쪽에서 어긋나는지 보인다.

마지막은 URL을 직접 바꿔본다

문제가 의심되는 파라미터만 URL에 직접 넣어 새로고침해본다. 코드를 고치기 전에 "이 파라미터 값이면 재현된다"를 확정해두면, 그다음 수정이 훨씬 빠르다.