Routing
Single Page Application으로 작동되는 React이므로 페이지마다 해당하는 경로를 만들 수 없기때문에 동적으로 Routing을 관리해야한다.
정적 Routing
각각의 페이지로 가능 url(path)를 지정하는 방식.
상품의 페이지 수가 많아지면, 관리가 힘들어지고 SPA의 의미에 부합하지 않는다.
동적 Routing
경로를 지정해주지 않아도 특정 변수를 사용하여, 그 id값에 해당하는 페이지에 접근이 가능하다.
1. Path Parameter
/users/1 => /users/:id
매개변수를 활용하여 경로를 지정하는 방식
⭐️ 제품상세페이지 같이 하나의 값만을 불러올때 사용
2. Query Parameter
/search?keyword=리액트 => /search?keyword=something
⭐️ 검색기능같이 사용자의 input과 그에 해당하는 필터링이 필요한 경우
Hooks 사용
🐶 useNavigate(상품 리스트에서 해당 디테일 페이지로 접근할때)
const navigate = useNavigate();
console.log(navigate); // result: 함수를 반환한다.
navigate(products/${props.id})🐶 useParam(상품 디테일 페이지에서 특정 값만 받아올때)
const param = useParams();
console.log(param); //result: {id: 1}이라는 객체가 들어온다.이걸 이용해서 해당 페이지에 필요한 데이터를 걸러서 받아오는게 가능해진다.
백엔드에서 데이터를 분리해서 각각요청할 필요 없다.
Pagenation
데이터가 100개 있을때, 한번에 띄우면 과부하 걸리기때문에, 페이지별로 쪼개서 보내기 예를들어 20개씩 다섯 페이지로 구성.
limit을 지정하여 한 페이지에 몇개의 요소를 보여줄것인지 설정
offset으로 해당 위치의 index를 부여한다.
1페이지를 누른다 => offset초기값 지정 => limit에다 offset+데이터개수 해서 limit을 지정.
Location
const location = useLocation();
console.log(location.search) // result: 사용자가 걸어놓은 필터 or offset, limit
fetch (`${API}${location.search}`)
.then (response => response.json())
.then (data => set함수(data));👻Conclusion
상품 리스트에서 해당 상품 클릭했을때, 해당 페이지로 넘어가게 하는것은 useNavigate로 id값 변경, 상품 디테일에서는 useEffect안에서 useParams로 해당 id값에 맞는 데이터만 뽑아온다. 그리고 의존성 배열이 바뀔때마다 side Effect가 일어나야하므로 의존성배열에 API주소중 바뀌는 부분을 채워놓으면 된다. 필터링이 필요한 영역은 offset과 limit을 설정하여 서버 과부하가 걸리지않도록 정해서 특정 개수의 데이터만 페이지에 요청하여 띄운다.
