Router3 쿼리스트링과 useParams 사용해 원하는 정보만 받아오기 현재 상품의 카테고리에 맞는 추천 상품 리스트 노출하기 상품 리스트를 불러올 때도 쿼리스트링을 이용했지만 그땐 path를 하드코딩으로 입력했었다. 이번에는 쿼리스트링을 변수로 처리해보았다. 전체를 다 쿼리스트링을 이용할 수도 있지만 이번에는 무조건 카테고리값만 가져올 것이고 카테고리의 id 값만 변경되기 때문에 좀 더 수월하게 작업할 수 있었다. 먼저 데이터를 받아올 usState를 선언한다. 그리고 useEffect 안에 fetch 함수를 호출한다. 이때 api의 end point는 products/list 까지이고 물음표 이후로는 쿼리스트링이다. 백엔드에서 보내준 쿼리스트링 중 이번에 사용할 것은 세가지다. 데이터를 몇번째부터 불러올지 결정하는 offset, 몇개까지 노출할지 결정하는 limit, 마.. 2023. 8. 11. 원하는 페이지에서만 nav와 footer 라우팅 및 잘못된 경로는 404 페이지 라우팅하기 이번 홈페이지에서는 nav와 footer가 모든 화면에서 다 보여지고 있어서 다른 설정을 해주지 않아도 되었는데 404페이지를 만들자는 의견이 나오면서 라우팅을 손을 봐주어야했다. 404페이지 path 404페이지는 정해지지 않은 path를 입력하는 경우 무조건 떠야하기 때문에 아주 간단하게 path에 *를 입력해주면 된다. 근데 이렇게만 코드를 넣어주니 nav와 footer가 같이 보이거나 에러가 나는 상황이 생겼다. react-router-dom 의 outlet 그래서 알게 된 방법이 컴포넌트를 분리해 라우팅을 해주면 되는 것이었다. Layout이라는 컴포넌트 안에서 Nav와 Footer를 불러오고 그에 따라 달라져야하는 부분을 Outlet으로 처리해주었다. const Layout = () => { .. 2023. 7. 16. SPA로 구성된 React에서 Router 구현하기 리액트는 SPA로 html파일이 하나밖에 없는 라이브러리다. MPA처럼 다른 파일로 넘어가는것처럼 보여주기 위해 여러컴포넌트를 라우터를 이용해 옮겨다닌다. 우리는 한페이지짜리 웹을 만드는 것이 아니니까 라우터 기능을 필히 알아야한다. 이번에는 기존에 작업하던것에 라우터를 적용해보려고 한다. [과제 1] Router 컴포넌트 구현하고 Router 기능 구현하기 일단 먼저 link와 useNavigate를 쓸거기때문에 import를 먼저 해준다. 당연히 export도 미리 해준다. import React from "react"; import { Link } from "react-router-dom"; import { useNavigate } from "react-router-dom"; import "./In.. 2023. 6. 15. 이전 1 다음
