학습목표
1.Path Parameter와 Query Parameter 의 차이점에 대해서 설명할 수 있다.
2.useNavigate, useLocation, useParams 훅의 용도가 무엇인지 설명할 수 있다.
3.URL 에서 동적인 부분을 변수로 처리할 수 있고, 이를 통해 동적 라우팅 기능을 구현할 수 있다.
4.offset 과 limit 개념을 사용하여 페이지네이션 기능을 구현할 수 있다.
멘토가이드
🔥동적 라우팅은 상품 목록 페이지에서 상품 상세 페이지로 이동할 때 활용되는 기능입니다. 이때 페이지를 이동하는 흐름이 한번에 와 닿지 않을 수 있습니다. 하지만 내용이 어렵다기 보다, 흐름이 어색한 것이기 때문에 지엽적인 코드 보다는 시각화 자료를 통해 큰 그림을 먼저 파악하는게 우선입니다!
🔥사용자 브라우저에 입력되는 url 주소와 백엔드에 요청하는 API 주소를 구분해야 합니다. 주소라는 공통점만 있을 뿐, 이 둘은 서로 다른 목적으로 사용됩니다. 혼동하지 않도록 주의하세요!
정적라우팅
:방법이 딱 정해져있음
:지정되어 있지 않은 경로로 접속하면(=라우터에 path에 지정하지 않은 경로로)
컴포넌
동적라우팅
동적라우팅
: 내가 경로를 정해주지 않았어도, 변수를 가져와서 화면에 뿌릴 수 있게 해주는 것
특정데이터에 접근해서 그걸 백엔드에게 보내줌
: 내가 그 특정경로로 들어갔을 때, 화면에 받아올 수 있게 함 (id, title 등등)
id 확인
개발자도구 -> 네트워크 탭 ->
Path Parameter vs Query Parameter
- 검색할때(보내는 값이 많을때 길게 붙여서) 쿼리 파라미터
- 상세페이지(딱 한가지의 정보에 대해 보낼때) path 파라미터
Path Parameter
// Bad "/users/1" => <Users id={1} /> "/users/2" => <Users id={2} /> "/users/3" => <Users id={3} /> "/users/4" => <Users id={4} /> "/users/5" => <Users id={5} />// Good "/users/:id" => <Users /> // useParams().id
Query Parameter
물음표로 시작~
&연산자로 붙여나갈 수 있음// Bad "/search?keyword=위코드" : <Search keyword="위코드" /> "/search?keyword=리액트" : <Search keyword="리액트" /> "/search?keyword=라우팅" : <Search keyword="라우팅" /> "/search?keyword=쿼리스트링" : <Search keyword="쿼리스트링" /> "/search?keyword=SPA" : <Search keyword="SPA" />// Good "/search?keyword=something" : <Search /> // useLocation().search
useNavigate url의 경로를 바꾸는 hook
useparams: path parameter값을 가져옴 -> 객체로 변환해서 반환함:
producth/1 중 1 부분을 path parameter로 처리
클릭 -> navigate로 이동 -> params로 주솟값 조회 -> 백엔드에 데이터 요청 -> 수리한 데이터 렌더링 순인 건가요?
navigate로 경로를 바꿔주는 것 자체는 라우트에 id값을 추가로 붙이는 것 말고는 하는 게 없는 거네요?
path parameter fetch로 보내서 백엔드에 보내는 것
Q:상품리스트에서 디테일로 넘어갈때 navigate로 props id 컨트롤이되고, 디테일에서 데이터 받아올때 params로 해당 데이터만 뽑아오는걸로 이해하면 되나요?
A:네비게이트 의 props id는 전달만해주는 것뿐 = 즉 해당하는 변수를 여기에 넣어주는 것으로 이해해야함
A:디테일에서 데이터 받아올때 params로 해당 데이터만 뽑아오는걸로 이해하면 되나요? yes
Pagination & Query Parameter
Pagination
:해당 스크롤이 해당 위치까지 내려오면 데이터를 받아와라 (몇개씩 짤라가지구)
:more 버튼 같은 걸 누르면 몇개씩 끊어서 데이터를 받아옴
-> 이렇게 데이터를 끊어서 받아오는 이유는?
A: 유저가 페이지에 들어갔을 때 3초동안 페이지가 안 뜨면 그 페이지를 떠난다구 함
:데이터를 한번에 받아온다는 건 그만큼 시간이 오래 걸리고, 사용성이 좋지 않고 과부하가 걸릴 수 있기 때문
