동적라우팅

보통의 웹 사이트는 전체 아이템이 보여지는 리스트 페이지와 거기서 어떤 아이템을 선택했을 때 해당 아이템의 디테일 한 정보가 보여지는 상세 페이지로 구성됩니다.

이때 특정 리소스에 아이템 값을 넣어 해당하는 아이템의 데이터가 보여지도록 하는데 이와 같이 라우트 경로에 특정 값을 넣어 해당하는 페이지로 이동할 수 있게 하는 것 을 동적 라우팅 이라고 합니다.

Path Parameter

localhost:3000/product/2
localhost:3000/product/45
localhost:3000/product/125

위의 2, 45, 125 와 같이, 라우트 경로 끝에 들어가는 각기 다른 id 값들을 저장하는 매개 변수를 Path Parameter 라고 합니다.

Path Parameter 는 Routes 컴포넌트에서 다음과 같이 정의됩니다!

<Router>
	<Switch>
		<Route exact path='/product/**:id**' component={productDetail} />
	</Switch>
</Router>

• : 는 Path Parameter 가 올 것임을 의미.
• id 는 해당 Path Parameter 의 이름. 임의의 이름을 지정해줄 수 있음. ex) :productId

history, match, location 객체

**Routes.js 의 Route 컴포넌트의 component 프로퍼티에 직접 연결되어 있는 하위 컴포넌트**는 history, location, match 3가지 객체를 props 를 통해 제공 받습니다.

// Routes.js
<Route exact path='/product/detail/:id' component={ProductDetail} />

// ProductDetail.js
render() {
	console.log(this.props) // { history: {}, location: {}, match: {}, ... }
	return (
		...
	);	
}

ProductDetail 컴포넌트는 Route 컴포넌트를 통해 3가지 객체를 제공 받습니다.

• history 객체는 페이지 이동을 위한 여러 메서드들을 담고 있습니다. (ex, push)
• location 객체는 현재 url 경로에 관한 정보를 담습니다.
• match 객체는 Path Parameter 에 관한 정보를 담습니다.

withRouter HOC

history, location, match 는 Route 컴포넌트가 component 프로퍼티에 연결 되어 있는 컴포넌트에 제공 하는 객체 입니다.

class NoRouter extends React.Component {
   ...
   render() {
      console.log(this.props); // {} -> history, location, match 가 없습니다.
      return (
         ...
      )
   }
}

NoRouter 컴포넌트는 Route 에 연결되어 있지 않기 때문 history, location, match 객체를 제공받지 못합니다.
이때 3가지 객체를 추가하기 위해 사용되는 함수가 withRouter 는 함수 입니다.
인자로 컴포넌트를 받고 해당 컴포넌트에 3가지 객체를 추가한 컴포넌트를 반환합니다.

import { withRouter } from 'react-router-dom';

class NoRouter extends React.Component {
	render() {
		**console.log(this.props); // { history: {}, location:{}, match:{}, ... }**
		return(
			...
		)
	}
}

export default withRouter(NoRouter);

this.props.match.params 객체

Path Parameter 로 명시해둔 값은 match 객체에 담기게 되고 match 객체에는 params라는 객체가 존재하여 this.props.match.params.선언한명칭 을 통해 해당하는 값을 가져올수 있습니다.
ex) this.props.match.params.id

👍 React Router: Declarative Routing for React 를 통해 더 자세한 정보를 알수 있습니다.