쿼리스트링 이용하기

기존 프로젝트의 방탈출 업체를 찾아보는 페이지에서 지역별 필터와, 페이지네이션이 적용되어 있었다.

 

하지만 해당 페이지는 /company url에서 변하지 않고 내부적으로 지역상태와 페이지번호 상태를 가지고 서버에서 데이터만 새로 받아와서 보여주었다.

 

하지만 이것이 사용자 경험을 해칠 수 있다는 생각이 들었다.

 

만약 내가 보고있는 현재 정보를 누군가에게 공유하려고 한다고 할 때, 우리는 습관적으로 주소창의 주소를 복사하여 카톡 등으로 공유를 한다.

 

하지만 맨 끝 url이 /company로만 끝나는 현재 페이지는 항상 전체 지역의 첫번째 페이지만 보여주게 되므로, 잘 맞지 않다고 생각했다.

 

그래서 쿼리스트링을 이용해서 해당 문제를 해결하였다.

 

Query string이란?

 

먼저 간단하게 쿼리스트링이 무엇인지 살펴보자면 url 주소에 파라미터를 넘겨서 데이터를 받는 방식이다.

 

http://naver.com/movie?title=스파이더맨 

여기서 빨간 배경색을 가진 부분이 쿼리스트링이다.

쿼리스트링은 이처럼 물음표 뒤에 적으며, ?key=value 형태이다. 

 

 

useSearchParams

react router dom의 useSearchParams를 이용하면 쉽게 url의 쿼리스트링 정보를 가져올 수 있다.

 

우리가 자주 쓰는 훅을 쓰듯이

const [searchParams, setSearchParams] = useSearchParams()

이런식으로 사용하면 된다. (물론 구조분해할당이므로 이름은 마음대로 써도 된다.)

 

searchParams에서 get메서드를 이용하면 현재 url의 쿼리스트링 정보를 가져올 수 있다.

 

현재 url이 https://il-tal.com/company?page=1&location=강남   이라고 가정해보자

const [searchParams, setSearchParams] = useSearchParams();

const location = searchParams.get("location");
const pageNumber = searchParams.get("page");

console.log(location, pageNumber)
// 1, 강남

위처럼 get메서드 안에 쿼리스트링의 key값을 문자열로 넣어주면 해당 value값을 얻을 수 있다.

 

실제 내 코드에 적용

const CompanyList = () => {
  const [searchParams, setSearchParams] = useSearchParams();

  const location = searchParams.get("location");
  const pageNumber = searchParams.get("page");

  const { data, isLoading } = useQuery(
    ["getCompanyList", , location, pageNumber],
    () => companyList({ pageParam: pageNumber, location })
  );

//select의 onchange핸들러이며, select에 이벤트가 생기면 해당 밸류를 setSearchParams를 통해 변경
  const onChangeHandler = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setSearchParams({ location: e.target.value, page: "0" });
  };


//pagination의 onchange핸들러이며, page를 입력받으면 setSearchParams를 통해 변경
  const onPageHandler = (page: number) => {
    const pageIndex = page - 1;
    setSearchParams({ page: String(pageIndex), location: location! });
    window.scrollTo(0, 0);
  };
  
  아래 JSX문은 생략!

코드에서 알 수 있지만, setSearchParams를 사용하여 url에 쿼리스트링을 붙여주려면 value값이 string값 이어야 한다.

 

쿼리라는 단어가 요청하다, 질문하다 의 의미이고 스트링이 말 그대로 스트링인 것을 생각해보면 이해가 쉽다.

(말 그대로 ?쿼리=스트링..  이게 정확한 의도가 아닐 수 있지만 이렇게 이해하면 매우 직관적이고 쉬움)