Query String(쿼리스트링)을 사용하여 상품 페이지 구현

여러 이커머스 사이트처럼 query string을 활용하여 상품 목록 페이지를 구현해보고자 합니다.
query string을 이용하면 브라우저의 URL을 통해 검색 상태를 유지할 수 있고, 사용자 경험을 향상시킬 수 있었습니다.

1. Query String을 통한 검색 쿼리 관리

먼저, HomePage.tsx 에서는 URLSearchParams 를 사용하여 브라우저 URL에서 query 값을 추출하고, 이를 검색 상태에 반영하였습니다.

const HomePage = () => {
	const [query,setQuery] = useState('');
	const params = new URLSearchParams(location.search);
	const value = params.get('query');
	
	useEffect(() => {
  if (value) {
    setQuery(value);
  }
}, [setQuery, value]);
}

location.search 로부터 쿼리스트링을 추출한 후params.get(’query’) 를 통해 검색어를 가져옵니다. 이렇게 가져온 검색어는 useEffect 를 통해 검색 상태에 반영됩니다.

이렇게 하면 페이지를 새로고침하거나 URL에 직접 검색어를 입력해도 상태가 유지되도록 할 수 있습니다.

2. 검색 기능에서 Query String 사용

검색창에 검색어를 입력하고 검색 버튼을 눌렀을 때 query string을 업데이트하는 로직을 구현하였습니다.

const onSearch: SearchProps['onSearch'] = (value, _e, info) => {
  params.set('query', value);
  setQuery(value);
  navigate(`?${params.toString()}`);
};

antd라이브러리의 검색창 부분을 사용해서 부가적인 요소가 코드에 포함 되었지만 여기서 params.set(’query’,value) 를 통해 새로운 검색어를 query string 으로 설정한 뒤, navigate 를 사용해 URL을 업데이트합니다.

이 과정에서 URL이 ?query=검색어 형태로 변경되며, 브라우저의 주소창에서도 검색어가 반영됩니다.

3. Query String을 통한 페이지 상태 관리

페이지네이션이나 페이지 사이즈와 같은 상태도 query string으로 관리되도록 하였습니다. 예를 들어, 페이지네이션에서는 현재 페이지 번호가 query string에 반영됩니다.

const page = params.get('page');

useEffect(() => {
  if (!page || isNaN(Number(page))) return;
  if (Number(page) > 0) {
    setCurrentPage(Number(page));
  }
}, [page, setCurrentPage]);

useEffect(() => {
  params.set('page', String(currentpage));
  navigate(`?${params.toString()}`);
}, [currentpage, navigate]);

해당 코드에서는 params.get(’page’) 로 현재 페이지 값을 URL에서 가져오고, 사용자가 페이지를 변경할 때 params.set(’page’, String(currentpage)) 로 URL을 업데이트 합니다.

여기서 첫 번째 useEffect 는 URL에서 page 값을 가져오고, 이 값이 유효하면 currentpage에 반영합니다. 즉, URL로부터 페이지 상태를 초기화합니다.

두 번째 useEffect는 currentpage가 변경되면 URL의 query string을 업데이트합니다. 즉, 사용자가 페이지를 변경할 때 URL을 최신 상태로 유지합니다.

이렇게 구현함으로써, 상태 간 일관성을 유지하면서 예외 상황도 처리할 수 있어 브라우저의 뒤로 가기 버튼을 사용해도 사용자가 있던 페이지 상태가 유지됩니다.

4. Query String을 통한 페이지 사이즈 변경

페이지당 아이템 수를 설정하는 콤보 박스의 경우에도 query string을 사용하였습니다.

const onChangePagesize = (value: string) => {
  params.set('size', value);
  setPageSize(Number(value));
  navigate(`?${params.toString()}`);
};

여기서도 마찬가지로 params.set('size', value)로 페이지 사이즈를 query string에 반영하고, URL을 업데이트합니다. 이 과정에서 페이지 사이즈가 URL에 반영되어 상태가 유지됩니다.

결론

query string 을 적극적으로 사용하여 사용자가 입력한 검색어, 페이지 번호, 페이지 사이즈 등의 상태를 URL로 관리하였습니다. 이를 통해 사용자는 새로고침, 뒤로 가기 등의 브라우저 기능을 사용해도 원하는 상태를 그대로 유지할 수 있습니다.

query string을 사용하면서 느낀 점은 사용자 경험을 향상시키고, 브라우저와 애플리케이션 상태를 일관되게 유지할 수 있다는 점에 있어 강력한 방법이라고 생각됩니다.