동적라우팅이란?
라우트의 경로에 특정 값을 넣어 해당 페이지로 이동할 수 있게 하는 것.(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 // 필터링 >>> 직업이 프로그래머인 사용자 목록만 가져온다.
