💪 React. Dynamic Routing

📌 개발 공부 1개월 차인 to-be 개발자의 자습 블로그🙂ﾠAug 30 ~ Sep 3, 2021

현재 상태

https://www.notion.so/wecode/React-2-React-Router-Sass-fdcb50b662814a2c95f600fced8ab42c

공식 문서

Dynamic Routing

라우트 경로에 특정 값을 넣어 해당하는 페이지로 이동할 수 있게 한다.

> Path Parameter

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

pagination 되어 있지 않아도 위처럼 경로 parameter가 있다면 해당 화면으로 이동 가능
2, 45, 125가 각기 다르 id 값을 저장하는 매개 변수

> Routes component에서의 path parameter 정의

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

• : 는 path parameter 가 올 것임을 의미
• id 는 해당 path parameter 의 이름을 의미 (변수 명을 짓듯이 임의의 이름 지정 가능 ex :productId)

> ex

1. 제품 카드를 클릭하면 onClick event 시 발생하는 push 함수를 통해 /product/1로 이동

• URL이 /product/1로 변하면 Route component에 정의되어 있는 path='/product/:id에 따라 ProductDetail component가 mount됨

2. ProductDetail component에서는 BE에 id가 1인 item에 대한 정보를 요청
3. 응답으로 받은 setState 함수를 통해 state에 저장하고, 이를 통해 상세 page UI render됨
   
   

history, match, location object

위 세 가지 객체를 사용해 URL의 id 값을 가져올 수 있다.
Routes.js 의 Route component의 component property에 직접 연결되어 있는 하위 component는 history, location, match 3가지 객체를 props를 통해 제공 받는다.
아래 ProductDetail component는 Route component를 통해 3가지 객체를 제공 받는다.

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

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

• history 객체는 페이지 이동을 위한 여러 method들을 담고 있음 ex push
• location 객체는 현재 url 경로에 관한 정보를 담음
• match 객체는 path parameter 에 관한 정보를 담음

페이지 이동을 위해 사용하던 push 함수도 history 객체가 제공하는 기능
ex onClick={ () ⇒ this.props.history.push('/main') }

✓

Q 그럼 그냥 link 걸면 되는 거 아닌가?
A link는 새로고침되고, 동적 routing은 log가 누적됨

> (+) withRouter HOC

history, location, match는 Route component가 component property에 연결 되어 있는 컴포넌트에 제공하는 객체이기 때문에 component가 Route에 연결되어 있지 않으면 withRouter 함수를 사용해야 함

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

class Payment extends React.Component {
	render() {
		console.log(this.props); // { history: {}, location:{}, match:{}, ... }
        // Payment component는 Router에 연결되어 있지 않아서 history, location, match 객체를 제공하지 못하기 때문에 withRouter를 적음
		return(
			...
		)
	}
}

export default withRouter(Payment);

this.props.match.params.id

path parameter로 명시해둔 값은 match 객체에 담기기 때문에 match 함수로 URL에 담겨있는 id 값을 가져올 수 있다.
그래서 componentDidMount method에 해당 id를 입력해 server에 요청하여 원하는 정보를 받을 수 있음

// ProductDetail.js
// current URL -> localhost:3000/product/1

class ProductDetail extends React.Component {
	...
	render() {
		console.log(this.props.match.params.id) // 1
		return (
			...
		);	
	}
}

componentDidMount() {
	fetch(`${API}/${this.props.match.params.id}`)
	.then(res => res.json())
	.then(res => ...);

summary

• 개별 상품 클릭
  → this.props.history.push("/product/1") 로 상세 page로 이동
• 상세 page로 이동 시 URL이 "http://localhost:3000/product/1" 과 같이 변경
• page에 필요한 daat를 componentDidMount 에서 fetching
  • 필요한 id는 URL에 존재하므로 this.props.match.params.id에서 가져옴
  • 해당 id를 가지고 BE에서 만들어준 API를 호출

    componentDidMount() {
    	const id = this.props.match.params.id
    	fetch(`http://123.456.123.123:8000/products/${id}`) // 1
    		.then(res => res.json())
    		.then(res => this.setState({ data: res }))
    }

• server에서 가져온 data (res)를 컴포넌트의 state 객체에 저장
• state 객체에 담긴 data로 component UI 를 render