🛒 쇼핑몰 클론코딩을 하며 배운 것들 #2

두번째로는 상품을 가격순으로 정렬하는 버튼을 구현했습니다. 원본 사이트에는 인기도순, 누적판매순 등 다양한 상품 정렬 버튼이 있지만 저희 api에는 해당 정보들이 없기 때문에 낮은 가격순, 높은 가격순 그리고 정확도순으로 상품을 정렬하는 버튼을 구현했습니다.

🔀 정렬 버튼 구현

const [product, setProduct] = useState();

const handleLowPrice = () => {
    let copyLow = [...products]
    copyLow.sort(function(a,b){
        return a.price - b.price;
      })
    setProduct(copyLow)
  }

  const handleHighPrice = () => {
    let copyHigh = [...products]
    copyHigh.sort(function(a,b){
        return b.price - a.price;
      })
    setProduct(copyHigh)
  }

  const handleAllProduct = () => {
    setProduct(products)
  }

...

{products.map((product) => (
          <Product/>
        ))}

먼저 낮은 가격순, 높은 가격순으로 상품을 정렬하기 위해 기존 상품 배열의 복사본을 만들어 sort 함수를 사용했습니다.

낮은 가격순으로 정렬된 배열 copyLow, 높은 가격순으로 정렬된 배열 copyHigh를 만든 뒤, 이 값들을 setProduct 함수에 넣어 product값을 변경했습니다. (사실 배열을 복사해 정렬하는 방법이 가장 좋은 방법이 아닐 것 같은데 .. 제가 알고 있는 방법 중 가장 쉽고 빠르고 .. 제품 개수가 많지 않아 이 방법을 선택했습니다 ..)

Too many re-renders. React limits the number of renders to prevent an infinite loop.

그런데 이렇게 product값을 바꾸자 위와 같은 오류가 발생했습니다.

리액트는 state에 변경이 있을 때, 부모 컴포넌트가 렌더링 될 때, 새로운 props가 들어올 때 렌더링이 되는데 저의 경우 setProduct로 product의 값을 변경하려고 하다보니 계속해서 리랜더링이 일어나 오류가 발생한 것이었습니다.

const filters = ['정확도순', '낮은 가격순', '높은 가격순'];
const [filter, setFilter] = useState(filters[0]);
onFilterChange={(filter) => setFilter(filter)}

<ul className={style.btns}>
      {filters.map((filter, index) => (
      <li className={style.btn_wrap} key={index}>
        <button className={style.btn} onClick={()=>onFilterChange(filter)}>{filter}</button>
      </li>))}
    </ul>

문제를 해결하고 기존의 버튼들을 컴포넌트화하며 수정한 최종 정렬 버튼은 위와 같습니다. 먼저 버튼에 클릭이벤트가 발생하면 해당 버튼 상태를 setFilter 함수로 변경시키고, 이렇게 변경된 상태를 상품 목록 페이지에서 공유합니다.

const filtered = getFilteredProducts(filter, products)

function getFilteredProducts(filter, products) {
  if(filter === '정확도순') {
    return products;
  } else if(filter === '낮은 가격순') {
    let copyLow = [...products]
    copyLow.sort(function(a,b){
        return a.price - b.price;
      })
    return copyLow;
  } else if(filter === '높은 가격순') {
    let copyHigh = [...products]
    copyHigh.sort(function(a,b){
      return b.price - a.price;
    })
    return copyHigh;
  }
}

{filtered.map((product) => (
          <Product/>
        ))}

변경된 filter의 상태에 따라 getFilteredProducts로 해당되는 상품 배열을 반환하면, filtered에 대해 map을 돌며 제품이 출력됩니다.

짜잔 ! 바로 이렇게요

📂 훅을 이용한 로직 분리

정렬 버튼은 전체 상품 페이지, 카테고리별 페이지, 검색결과 페이지 총 3곳에서 사용되었습니다. 중복되는 버튼 요소는 sortButton 컴포넌트, 반복되는 로직은 useFilter 훅을 만들어 코드를 작성했습니다.

export default function useFilter (products) { 
  const filters = ['정확도순', '낮은 가격순', '높은 가격순'];
  const [filter, setFilter] = useState(filters[0]);
  const filtered = getFilteredProducts(filter, products);

  return [filters, filter, setFilter, filtered];
}

훅은 위와 같이 정렬 버튼의 상태값을 변경하는 state, 제품을 가격순으로 정렬하는 함수 등을 포함하고 있습니다.

그러나 전체 상품 페이지, 카테고리 페이지에서는 문제 없이 작동하던 버튼이 서치페이지에서는 작동하지 않았습니다. 콘솔에 값을 찍어보며 문제점을 확인해보니

검색결과 값이 products로 들어오기 전에 useFilter 훅이 실행되어 undefined를 map으로 돌리려 하고 있었습니다.

export default function useFilter (products) { 
  const filters = ['정확도순', '낮은 가격순', '높은 가격순'];
  const [filter, setFilter] = useState(filters[0]);
  if(!products) return
  const filtered = getFilteredProducts(filter, products);

  return [filters, filter, setFilter, filtered];
}

오류를 처리하기 위해 상품이 없는 경우, 훅을 종료 시켜 상품을 재정렬하는 함수가 작동하지 않도록 수정했습니다.

undefined is not iterable
--.map is not a function

그러나 .. 위와 같은 또 다른 오류가 발생했습니다 ..

처음에는 위에서 작성한 상품이 없는 경우에 대한 예외처리가 잘못된 것인 줄 알고 .. 조건문을 다양한 방법으로 작성했는데요 .. 문제가 해결되지 않았습니다 💢

결국 useFilter 훅 자체를 호출해 상품 정보를 담고 있는 'filtered' 배열엔 제대로 값이 찍히고 있다는 것을 확인했고 .. 문제는 다른 곳에 있다는 것을 알았습니다.

const [filters, setFilter, filtered] = useFilter(search)

약 2시간을 헤맨 끝에 찾은 문제점을 바로 이 부분이었습니다.

export default function useFilter (products) {
...
  return [filters, filter, setFilter, filtered];
}

useFilter는 filters, filter, setFilter, filtered를 배열에 담아 리턴합니다. 그런데 저는 검색 결과 페이지에서는 filter가 사용되지 않기 때문에 멋대로 나머지 변수만 받아오는 악행을 저질렀습니다 .. 그러나 배열은 순번이 있는 데이터지요 ..? 결국 배열의 순서를 무시한 채 값을 불러온 것이 문제였습니다 ..

export default function useFilter (products) { 
  const filters = ['정확도순', '낮은 가격순', '높은 가격순'];
  const [filter, setFilter] = useState(filters[0]);
  if(!products) return undefined;
  const filtered = getFilteredProducts(filter, products);

  return {filters, filter, setFilter, filtered};
}

최종적으로는 객체로 값을 리턴해 문제를 해결했습니다. 이렇게 수정하면 순서와 무관하게 데이터를 쓸 수 있어 지금과 같은 오류가 발생할리 없겠죠 ..

분명 코드리뷰 때 이삭님께서 배열이 아닌 객체로 값을 return 하라는 조언을 해주셨는데 .. 까먹고 있다가 이러한 문제점이 발생ㅇ했네요 .. 그래도 이번에 이렇게 고생했으니 다음엔 절대 안 까먹지 않을까요 ? ㅎㅎ