동적 라우팅?

라우트 경로에 특정 값을 넣어 해당하는 페이지로 이동할 수 있게 하는 것! 예를 들어서상품 목록 페이지에서 상품 상세 페이지로 이동할 때 활용되는 기능!
React는 기본적으로 라우팅 시스템을 갖추고 있지 않으므로, react-router-dom 과 같은 부가적인 라이브러리를 설치해서 라우팅 기능을 추가해야한다. 동적인 경로를 처리할 수 있는 방법으로 Path Parameter 와 Query Parameter 이 있다.

1.Path Parameter

localhost:3000/product/2
localhost:3000/product/45
에서 2,45처럼 경로 끝에 들어가는 id 값을 저장하는 매개 변수를 path parameter라고 한다.

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

:는 path parameter가 올 것을 의미하고 id는 변수명으로 임이 지정 가능

path='/product/:id' 에 따라, URL 이 /product/1 로 변하고 ProductDetail 컴포넌트에서는 백엔드에 id 가 1 인 아이템에 대한 정보를 요청하여 해당 detail page로 넘어가게 됩니다.

그렇다면 detail component에서는 이것을 어떻게 가져올까요?

history, match, location 객체

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

(이 때, history, match, location 객체를 제공받으려면 withRouter 함수의 인자로 컴포넌트를 받거나,Route에 직접 연결이 되어야 합니다.)

		render() {
		 console.log(this.props.match.params.id) // 1
		return (

이런 식으로 match 객체를 이용하여 가져올 수 있습니다. Path Parameter 로 명시해둔 값은 match 객체에 담겨 id 값으로 확인 할 수 있다.

monster 과제를 통한 예시
'Route.js'

<Route exact path="/monsters/detail/:id" component={MonsterDetail} />

id 값을 저장하는 매개 변수 id 설정

'Card.js'

class Card extends Component {
  goToDetail = () => {
    this.props.history.push(`/monsters/detail/${this.props.id}`);
  };
  render() {
    return (
      <div className="card-container" onClick={this.goToDetail}>
        <img
          src={`https://robohash.org/${this.props.id}?set=set2&size=180x180`}
          alt=""
        />
        <h2>{this.props.name}</h2>
        <p>{this.props.email}</p>
      </div>
    );
  }
}

goToDetail함수로 id를 전달 해준다.

'MonsterDetail.js'

componentDidMount() {
    fetch(
      `https://jsonplaceholder.typicode.com/users/${this.props.match.params.id}`
    )
      .then((res) => res.json())
      .then((res) => this.setState({ monsters: res }));
  }
  componentDidUpdate(prevProps, prevState) {
    if (prevProps.match.params.id !== this.props.match.params.id) {
      fetch(
        `https://jsonplaceholder.typicode.com/users/${this.props.match.params.id}`
      )
        .then((res) => res.json())
        .then((res) => this.setState({ monsters: res }));
    }
  }

this.props.match.params.id를 통해 id값을 받아 온 것을 알 수 있다.

두번째 monster 클릭시

두번째 monster의 detail page로 이동!