쿼리스트링 이용해 원하는 정보만 가져와 list 페이지 구현하기

우리의 홈페이지에는 문구, 리빙 등등의 카테고리가 있고 버튼을 누를 때마다 그에 맞는 데이터만 보여줄 수 있도록 구현을 해야했다. 그래서 이번엔 Location 객체를 리턴하는 useLocation hook을 사용해 쿼리스트링을 적용해보려고 한다.

 

useLocation과 쿼리스트링 사용하기

먼저 useLocation hook을 사용하기 위해 import를 해온다. 그리고 변수를 location 으로 선언해 useLocation()을 불러온다.

이때 useLocation의 serch라는 키의 값이 우리가 사용할 쿼리스트링이기 때문에 변수로 그 값을 선언해주어 간단하게 사용할 예정이다.

쿼리스트링은 백엔드 쪽에서 미리 작업을 해주어야 serch 안에 값이 들어가고 그 값을 우리가 불러올 수 있다.

import { useLocation } from 'react-router-dom';

  const location = useLocation();
  const queryString = location.search;

백엔드에게 받아온 쿼리스트링의 형태는 category=숫자, limit=숫자, offset=숫자 이렇게 세개였다.

그 중 전체 카테고리에서 console.log(queryString)을 하게 되면 값은 아래와 같다.

?category=1,2,3,4,5

이제 쿼리스트링을 사용하기 위해 데이터를 가져오자. 데이터가 들어갈 수 있도록 useState를 선언해준다.

  const [productListData, setProductListData] = useState([]);

side effect를 컨트롤 하기 위해 useEffect를 사용해서 데이터를 가져온다.

이때 가져와야하는 api 주소 부분에 우리가 필요한 쿼리스트링을 가져온다.

list가 end point 였고 그 이후로 필요한 쿼리스트링을 적어주면 된다.

기본값이 limit=10, offset=0이었기 때문에 전체데이터를 한번에 다 받아오려면 limit=50으로 설정해주어야했다.

의존성 배열에 쿼리스트링이 바뀔 때마다 값을 가져와야하기때문에 쿼리스트링을 넣어준다.

  useEffect(() => {
    fetch(`api.com/products/list${queryString}&limit=50`)
      .then(response => response.json())
      .then(data => setProductListData(data.data));
  }, [queryString]);

 

데이터 가공하기

nav 부분에 카테고리가 있었기 때문에 상수데이터로 만들어둔 NavData에서 path 부분에 각각에 맞는 쿼리스트링을 직접 적어준다.

const NavData = [
  { text: '전체', path: '/productList?category=1,2,3,4,5' },
  { text: '문구', path: '/productList?category=1' },
  { text: '리빙', path: '/productList?category=2' },
  { text: '책/매거진F', path: '/productList?category=3' },
  { text: '의류', path: '/productList?category=4' },
  { text: '콜라보레이션', path: '/productList?category=5' },
];

export default NavData;

받아오는 카테고리의 데이터가 그저 categoryId:1 로 와서 1을 다시 문자로 바꿔주는 작업을 해주어야했다.

다른 좋은 방법이 있을 것 같은데 if 문만 떠올라서 if문으로 작업했다.

데이터가 배열로 들어왔기 때문에 length가 0 이상일때 실행되도록 했고 전체 카테고리의 경우 첫번째 상품의 카테고리 id가 1이면서 우리의 모든 데이터가 50개 이기때문에 데이터의 length가 50일때 보이도록 했다.

나머지 카테고리의 경우에는 첫번째 상품의 카테고리가 각각 바뀔 때마다 다른 이름을 보이도록 구현했다.

  const titleText = () => {
    if (productListData.length > 0) {
      if (
        productListData[0].productCategoryId === 1 &&
        productListData.length === 50
      ) {
        return '전체';
      } else if (productListData[0].productCategoryId === 1) {
        return '문구';
      } else if (productListData[0].productCategoryId === 2) {
        return '리빙';
      } else if (productListData[0].productCategoryId === 3) {
        return '책/매거진F';
      } else if (productListData[0].productCategoryId === 4) {
        return '의류';
      } else if (productListData[0].productCategoryId === 5) {
        return '콜라보레이션';
      }
    }
  };

if문이 들어간 함수를 title 자리에서 실행되도록 적어주었다.

    <p className="title">{titleText()}</p>

마지막으로 받아온 데이터를 map을 통해 보여주면 된다.

   {productListData.map(productData => (
            <Product
              key={productData.id}
              data={productData}
              width={250}
              height={250}
            />
          ))}

 

동적라우팅 수업을 들으면서 이해는 했지만 적용을 못하는 경우가 대부분이었는데 이번처럼 수업자체가 이해가 안되는 건 처음이었다.. 그래서 강의도 다시 들어보고 강의 자료를 다시 읽어보고 개발자 지인에게 물어보기도 했고 몬스터 과제까지 해보았지만 여전히 좀 어렵다.. 하지만 여태까지의 경험에 비추면 언젠간 이해하고 바로바로 적용할 수 있게 되니까 포기하지 않고 계속 사용해보면서 공부해보려고 한다.

2차 프로젝트를 하면서 알게된 사실은 백엔드에도 저장이 되어있는 위와같은 카테고리 이름명 같은 경우에는 상수데이터를 사용하면서 데이터를 가공하는 것이 아니라 get요청을 통해 받아와야하는 데이터였다는 것이다. 이번 프로젝트에서는 카테고리이름만 이런 경우라 가공을 해서 사용을 했지만 2차 프로젝트에서는 백엔드에게 get 요청으로 데이터를 받아와 작업을 했다.