[ React ] 쇼핑몰 최신순 / 높은가격순 / 낮은가격순 정렬

쇼핑몰과 같은 페이지에 흔히 있는 SORT옵션이다.
select태그로 항목을 선택할 수 있으며, 선택하는 값에 따라 상품들이 정렬된다.!

      <div>
        <label htmlFor='sort'>sort by :</label>
        <select id='sort' className=' outline-none' onChange={onSelected}>
          <option value='createdAt'>최신순</option>
          <option value='descendingOrder'>높은 가격순</option>
          <option value='ascendingOrder'>낮은 가격순</option>
        </select>
      </div>

  const {
    isLoading,
    error,
    data: products,
  } = useQuery(["products", category], () => getProducts(category), {
    staleTime: 1000 * 60,
  });

// useState를 선언한다. 초기값은 최신순이다.
  const [order, setOrder] = useState(["timeStamp", "createdAt"]);  

// 정렬된 내용을 담을 변수 선언.
// (지금 생각해보니 sort는 배열 자체를 수정해주는거라서 굳이 새 변수로 할당이 불필요할 수도...?)
let sortedProducts = {};

  const handleSelected = (e) => {
    // option태그에서 지정한 value값을 가져와 할당한다.
    const sortOrder = e.target.value;
    // 가격과 시간 두가지 기준으로 구분되므로 값을 배열로 주었다.
    // [기준, 정렬방식]
    if (sortOrder === "ascendingOrder") {
      setOrder(["price", "ascendingOrder"]);
    } else if (sortOrder === "descendingOrder") {
      setOrder(["price", "descendingOrder"]);
    } else {
      setOrder(["timeStamp", "createdApp"]);
    }
  };

// 오름차 순 일때
// 정렬조건이 오름차순이면, 각 객체의 가격을 비교해서 오름차순 sort한다.
// a[order[0]]의 의미는 "a객체의 price키의 값"을 의미한다.
  if (order[1] === "ascendingOrder") {
    sortedProducts =
      products && products.sort((a, b) => a[order[0]] - b[order[0]]);
// 내림차 순 일 때
// 정렬조건이 내림차순이면, 각 객체의 가격을 비교해서 내림차순 sort한다.
  } else if (order[1] === "descendingOrder") {
    sortedProducts =
      products && products.sort((a, b) => b[order[0]] - a[order[0]]);
// 둘다 아니면 최순실
// 정렬조건이 최신순이면, 타임스탬프의 시간을 비교해서 내림차순으로 sort한다.
  } else {
    sortedProducts =
      products && products.sort((a, b) => b[order[0]] - a[order[0]]);
  }

sort메서드 설명 바로가기

최종적으로 sortedProducts 변수에는 요청에 따라 정렬된 배열이 할당되고, 이를 map메서드를 통해서 풀어주어 UI상에 보여준다.

작동은 아주 잘 되지만 코드가 조금 조잡해 보이는 감이 있다. 가격만으로 오름차순 내림차순하는 것은 쉽지만, 최신순 때문에 기준을 바꿔어줘야하다보니 이렇게 되었다. BEST WAY는 아닌듯하다. 분명 더 좋은 방법이 있을 것이다. 추후에 알게된다면 추가 포스팅하겠다.