React | 동적 라우팅

동적 라우팅

1가지 경로에 대해서만 페이지 이동이 가능한 정적 라우팅과 달리 동적 라우팅은 id 값에 따라 수많은 url 파생시켜주는 기능이다. 동적인 경로에 대한 라우팅을 통해 한가지 레이아웃에 수 십, 수백 가지의 다른 데이터들이 들어가 다른 정보를 보여주는 페이지들을 쉽게 만들 수 있게한다.
(예를 들면 커머스 사이트에 일정한 틀을 가진 상품 상세페이지에 id 따라 각기 다른 상품들의 데이터를 보여주는 것과 같은 기능)
동적 라우팅의 방법에는 아래 2가지 방법이 존재한다.

Path Parameter

// Bad
"/users/1" => <Users id={1} />
"/users/2" => <Users id={2} />
"/users/3" => <Users id={3} />
"/users/4" => <Users id={4} />
"/users/5" => <Users id={5} />

 // Good
"/users/:id" => <Users /> // this.props.match.params.id

Query Parameter

// Bad
"/search?keyword=위코드"    : <Search keyword="위코드" />
"/search?keyword=리액트"    : <Search keyword="리액트" />
"/search?keyword=라우팅"    : <Search keyword="라우팅" />
"/search?keyword=쿼리스트링" : <Search keyword="쿼리스트링" />
"/search?keyword=SPA"     : <Search keyword="SPA" />

// Good
"/search?keyword=something" : <Search /> // this.props.location.search

기억해야할 것!!
Path Parameter ===> this.props.match.params.id
Query Parameter ===> this.props.location.search

Path Parameter

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

• : 는 path parameter가 올 것임을 의미한다.
• id는 해당 parameter의 이름을 의미한다. parameter의 이름은 변수명과 같이 임의로 정할 수 있다.

Path parameter 동작 프로세스

path parameter는 위와 같은 순서로 동작한다.

2번째로 ProductDetail 컴포넌트의 componentDidMount메서드에서 백엔드 idrk 1에 해당하는 정보를 요청하였다. 이 때 1은 url에 담겨있다. (/product/1).
이때 ProductDetail 컴포넌트에서 url 에 따른 데이터를 어떻게 가져오는가?

📌 history, match, location 객체

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

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

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

• history 객체는 페이지 이동을 위한 여러 메서드들을 담고 있다. (ex, push)

        this,props.history.push 도 history 객체가 제공하는 기능이다.

• location 객체는 현재 url 경로에 관한 정보를 담고 있다.
• match 객체는 Path Parameter 에 관한 정보를 담고 있다.

📌 withRouter HOC

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

만약 Route의 하위 컴포넌트의 하위에 또 다른 컴포넌트가 존재한다면 Route와 직접 연결되지 않은 컴포넌트는 history, location, match 객체를 전달받지 못한다.

하지만 Route 하위 컴포넌트의 하위 컴포넌트에서도 세가지 객체를 사용해야하는 경우가 있을 수 있다. 이럴때 사용할 수 있는 것이 withRouter HOC 이다.

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

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

export default withRouter(Payment);

this.props.match.params.id

url에 담겨 있는 동적인 id 값을 가져올 수 있는 방법이다.
match 객체에 path parameter로 명시해둔 값이 담기기 때문이다.

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

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

따라서 compountDidMount 메서드에 해당 id 값을 통해 서버에서 해당 id값을 가진 데이터를 받아올 수 있다.

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

//또는 

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 }))
}