query string2 쿼리스트링과 useParams 사용해 원하는 정보만 받아오기 현재 상품의 카테고리에 맞는 추천 상품 리스트 노출하기 상품 리스트를 불러올 때도 쿼리스트링을 이용했지만 그땐 path를 하드코딩으로 입력했었다. 이번에는 쿼리스트링을 변수로 처리해보았다. 전체를 다 쿼리스트링을 이용할 수도 있지만 이번에는 무조건 카테고리값만 가져올 것이고 카테고리의 id 값만 변경되기 때문에 좀 더 수월하게 작업할 수 있었다. 먼저 데이터를 받아올 usState를 선언한다. 그리고 useEffect 안에 fetch 함수를 호출한다. 이때 api의 end point는 products/list 까지이고 물음표 이후로는 쿼리스트링이다. 백엔드에서 보내준 쿼리스트링 중 이번에 사용할 것은 세가지다. 데이터를 몇번째부터 불러올지 결정하는 offset, 몇개까지 노출할지 결정하는 limit, 마.. 2023. 8. 11. 쿼리스트링 이용해 원하는 정보만 가져와 list 페이지 구현하기 우리의 홈페이지에는 문구, 리빙 등등의 카테고리가 있고 버튼을 누를 때마다 그에 맞는 데이터만 보여줄 수 있도록 구현을 해야했다. 그래서 이번엔 Location 객체를 리턴하는 useLocation hook을 사용해 쿼리스트링을 적용해보려고 한다. useLocation과 쿼리스트링 사용하기 먼저 useLocation hook을 사용하기 위해 import를 해온다. 그리고 변수를 location 으로 선언해 useLocation()을 불러온다. 이때 useLocation의 serch라는 키의 값이 우리가 사용할 쿼리스트링이기 때문에 변수로 그 값을 선언해주어 간단하게 사용할 예정이다. 쿼리스트링은 백엔드 쪽에서 미리 작업을 해주어야 serch 안에 값이 들어가고 그 값을 우리가 불러올 수 있다. impor.. 2023. 7. 15. 이전 1 다음
