동적인 경로를 처리할 수 있는 방법으로 Path Parameter 와 Query Parameter 이 있습니다.
1) Path Parameter
"/users/:id" => <Users /> // useParams().id위 예시에서 라우트 경로 끝에 들어가는 각기 다른 id 값들이 들어갑니다. 2, 45, 125 . url 경로에서 달라지는 부분을 저장하는 매개 변수를 Path Parameter 라고 합니다.
Path Parameter 는 Router 컴포넌트에서 다음과 같이 정의됩니다!
- : 는 Path Parameter 가 올 것임을 의미합니다.
- id 는 해당 Path Parameter 의 이름을 의미합니다. 변수 명을 짓듯이, 임의의 이름을 지정해줄 수 있습니다. ex) :productId
React Router 에서는 useNavigate, useLocation, useParams 라는 라우팅 관련한 훅을 제공합니다.
useLocation Hook훅을 실행하면 경로 정보를 담고 있는 객체 를 반환합니다. pathname: 현재 경로 값,search: 현재 경로의 query parameter 값
useParams 훅을 실행하면 path parameter 정보를 담고 있는 객체 를 반환합니다.
useNavigate 훅은 url 를 변경하는 함수 를 반환하고
useLocation 훅은 현재 경로 정보를 담고 있는 객체 를 반환하고
useParams 훅은 Router 에 등록해준 path parameter 정보를 담고 있는 객체 를 반환합니다.
2) Query Parameter
"/search?keyword=something" : <Search /> // useLocation().search이 과정에서 Query Parameter(혹은, Query String, 쿼리 스트링)를 사용하게 됩니다. 쿼리 스트링이란 말 그대로 해당 엔드포인트에 대해 질의문(query)를 보내는 요청을 뜻합니다.
예를 들어, localhost:8000/products?limit=10&offset=5 라는 주소가 있다고 가정해보겠습니다. API 뒷 부분에 붙어있는 ? 로 시작하는 텍스트가 바로 쿼리스트링 입니다.
?limit=10&offset=5 의 경우, "limit이 10이면서 offset이 5일 경우의 product 페이지를 보여달라" 는 요청으로 해석됩니다.
- ? 기호는 쿼리스트링의 시작을 알립니다. url 에서 ? 기호는 유일무이 합니다.
- limit : 한 페이지에 보여줄 데이터 수
- offset : 데이터가 시작하는 위치(index)
- parameter=value 로 필요한 파라미터의 값을 적습니다.
- 파라미터가 여러개일 경우 &를 붙여서 여러개의 파라미터를 넘길 수 있습니다.
useLocation().search
Path Parameter 에 대한 정보가 useParams 훅이 반환한 객체 안에 담겨있었듯이, 쿼리스트링에 대한 정보는 useLocation 훅이 반환한 객체의 search 프로퍼티 안에 담겨있습니다.
이를 통해 url 에서 쿼리스트링 정보를 받아와서, 해당 정보를 통해 데이터를 요청할 수 있습니다.
🐔출처
위코드
