여러개의 URL 쿼리 스트링 쓰기

문제 발생

페이지네이션 컴포넌트를 만들면서 url 쿼리 스트링을 통해 페이징을 하였다.

처음 만들 때는 생각없이 '?' 를 붙여서 쿼리 스트링을 추가해주었지만 여러개의 쿼리 스트링을 쓸 때 문제가 생겼다.

쿼리 스트링이 없을 때와 기존에 쿼리 스트링이 1개 이상 있을 때 붙여줄 부호가 달랐다.

// 쿼리 스트링이 없을 때 -> '?'로 연결
/path?page=1

// 쿼리 스트링이 있을 때 -> '&'로 연결
/path?keyword=hi&page=1

문제 해결

URL 쿼리 스트링을 포매팅 해주는 유틸 함수를 만들어서 해결했다.

유틸함수는 사용하는 쿼리 스트링들을 객체 형식으로 key: value 값으로 받아서 쿼리 스트링으로 포매팅 한다.

이렇게 만들어진 쿼리 스트링을 기존 path에 '?'로 연결하면 되게끔 만들어뒀다.

objectToQueryString.ts

export default function objectToQueryString(obj: {
  [key: string]: any;
}): string {
  return Object.entries(obj)
    .map(
      ([key, value]) =>
        `${encodeURIComponent(key)}=${encodeURIComponent(value)}`,
    )
    .join("&");
}