문제의식

기존 버전(v1.0)의 필터링 방식에서는 상태 관리(recoil)를 통해 선택된 옵션의 데이터를 보여주는 방식으로 구현하고 있었다. 이러한 방식은 복잡한 다중 필터링을 구현하게 될때 데이터 상태 관리가 어려워지게 되고 페이지 이동 시 필터링 설정을 잃어버리게 된다는 불편함이 발생했다. 우리는 쿼리 파라미터를 사용하여 필터링 된 데이터를 URL에 저장하는 방식을 도입하여 이러한 문제점을 해결하고자 한다.

기존 버전(v1.0)의 필터링 방식

기존방식의 필터링 데이터 관리

const ParcelFilter = () => {
	//사용자가 선택한 옵션 상태 업데이트 
  const [selectedProduct, setSelectedProduct] = useRecoilState(selectedProductState);
  const [selectedStatus, setSelectedStatus] = useRecoilState(selectedStatusState);

  const productList = useGetProductsQuery();

  return (
    <div className={styles.filterWrapper}>
      <DatePicker />
      <MediumDropdown
        id={"parcelProducts"}
        placeholder={"상품"}
        itemList={productList}
        selected={selectedProduct}
        setSelected={setSelectedProduct}
      />
      <MediumDropdown
        id={"parcelStatus"}
        placeholder={"배송상태"}
        itemList={["전체", "신규주문", "배송완료", "주문취소"]}
        selected={selectedStatus}
        setSelected={setSelectedStatus}
      />
    </div>
  );
};

export default ParcelFilter;

const ServiceTable = () => {
	// 사용자가 선택한 필터링 데이터 가져오기 
  const product = useRecoilValue(selectedProductState);
  const status = useRecoilValue(selectedStatusState);
  const startDate = useRecoilValue(selectedStartDateState);
  const endDate = useRecoilValue(selectedEndDateState);
  
  //ㅅ
   const [selectedProduct, setSelectedProduct] =
    useRecoilState(selectedProductState);

	//테이블 데이터 조회 hook
  const { data } = useExcelQuery(`[${startDate},${endDate}]`,
    product === "전체" ? null : product,
    status === "전체" ? null : status
  );
  
  return (
		  <div>
			   //... 테이블 로직 
		  </div>
  );
};

export default ServiceTable

기존방식의 문제점

• URL 정보 미반영

  필터링 된 결과가 URL에 반영되지 않아, 사용자가 새로 고침이나 뒤로/앞으로 버튼을 사용할 때 필터링 된 정보를 유지할 수 없게 되어 사용성에 문제가 발생된다.

• 상태 관리의 복잡성 증가

  필터링 정보를 URL이 아닌 클라이언트 상태로 관리할 경우, 페이지 이동이나 새로고침 시 상태를 유지하기 위한 추가 로직이 필요하게 되며, 이는 상태 관리의 복잡성을 증가시키고, 잘못된 상태 관리로 인해 버그가 발생할 가능성을 높이게 된다.

• SEO 문제

  검색 엔진 최적화(SEO) 관점에서 필터링 정보를 URL에 포함하지 않으면 검색 엔진이 다양한 필터링 상태를 인식하고 인덱싱할 수 없으며, 필터링 조건에 대한 검색 결과 노출이 제한될 수 있다.

필터링 방법 고민해보기

위와 같은 문제들을 해결하기 위해 우리는 URL에 쿼리 파라미터로 필터링 정보 포함시키는 방식을 선택하게 되었고, 프로젝트에 적용하기 위해서는 두가지 방식(**usesearchparams,URLSearchParams)**을 고민할 수 있다.

1. usesearchparams란?

React Router v6에서 제공하는 훅(Hook)으로, URL의 쿼리 파라미터를 읽고 설정하는 데 사용될 수 있다. 이 훅은 URL의 쿼리 스트링을 간편하게 읽고 업데이트할 수있는 두가지의 주요기능을 제공한다.

https://reactrouter.com/en/main/hooks/use-search-params

  const [searchParams, setSearchParams] = useSearchParams();
  
  const filter = searchParams.get('filter') || 'default';
  setSearchParams({ filter, category });

2. URLSearchParams 란?

웹의 URL 쿼리 문자열을 다루는 JavaScript의 내장 클래스이며,이 클래스는 쿼리 문자열을 파싱하고, 조작하고, 검색하기 위한 다양한 메서드를 제공한다.