동적라우팅이란?
라우트의 경로에 특정 값을 넣어 해당 페이지로 이동할 수 있게 하는 것.(Dynamic Routing)
React Router에서는 두 가지 방법을 통해 유동 라이팅 기능을 구현할 수 있습니다.
1. Query parameters
2. URL parameters
라우트로 설정한 컴포넌트의 3가지 props
1. history
이 객체를 통해 다른 경로로 이동하거나 앞, 뒤페이지로 전환할 수 있습니다.
2. location
이 객체는 현재 경로에 대한 정보를 지니고 있고, URL 쿼리에 대한 정보도 가지고 있습니다.
3. match
이 객체에는 어떤 라우트에 매칭이 되어있는지에 대한 정보가 있고, params 정보를 가지고 있습니다.
Query parameters
location
this.props.location을 통해서 URL 주소의 정보를 가지고 올 수 있습니다.
해당 URL에서 필요한 key값을 추출하여, 백엔드와 데이터 통신을 하고, 백엔드와 통신한 데이터로 원하는 정보를 페이지에 담을 수 있습니다.
URL parameters
match
params 정보는 this.props.match.params를 통해 가지고 올 수 있습니다.
params 데이터를 사용하기 위해서는 Route.js에서 라우트 설정을 조금 수정해야 합니다.
Route exact path 뒤에 /:id를 붙여주면 해당 컴포넌트에서 this.props.match.params.id를 통해 해당 값을 가지고 올 수 있습니다.
String parameters VS Query parameters
String parameters
- 해당 페이지에서 여러 정보가 필요한 경우
- Query parameters를 사용할 경우, routes.js를 수정해야 하기 때문에 유지 보수 측면에서 좋지 않다고 판단될 경우
- 필터링을 하고 싶은 경우
Query parameters
- 특정한 resource를 식별하고 싶은 경우. 즉, 하나만 딱 필요한 경우.
/users // 사용자 전체의 목록을 가져온다.
/users/123 // id 값이 123인 사용자를 가져온다.
/users?job=programer // 필터링 >>> 직업이 프로그래머인 사용자 목록만 가져온다.