TIL.41 동적 라우팅

출저

• React Router 공식문서
• 위코드 수업자료

Dynamic Routing (동적 라우팅)

• 동적 라우팅은 라우트의 경로에 특정 값을 넣어서 해당 페이지로 이동할 수 있게 하는 것이다.
• 라우트의 경로에 특정 값을 넣는 방법은 두가지가 있는데 params 를 사용하는 것 , query 를 사용하는 것 이다. 현재는 params를 이용한 동적 라우팅에 대해서만 알아보겠다.
• 보통 상세페이지로 연결되는 부분에 쓰임이 크다.

3가지 props

라우트로 설정한 컴포넌트는, 3가지의 props 를 전달받게 된다.

• history 객체를 통해 push, replace 를 통해 다른 경로로 이동하거나 앞 뒤 페이지로 전환 할 수 있다.
• location 객체는 현재 경로에 대한 정보를 지니고 있고 URL 쿼리 (/about?id=bar 형식) 정보도 가지고 있다.
• match 객체에는 어떤 라우트에 매칭이 되었는지에 대한 정보가 있고 params (/about/:id 형식) 정보를 가지고 있다.

match를 이용하여 params를 알아보자

Routes.js

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Monsters from "./Assignments/Monsters/Monsters";
import Pagination from "./Lectures/Pagination/Coffee";
import UrlParameters from "./Lectures/UrlParameters/Monsters";
import MonsterDetail from "./Lectures/UrlParameters/MonsterDetail";
import MenuTab from "./Lectures/MenuTab/MenuTab";
import Lifecycle from "./Lectures/LifeCycle";

export default class Routes extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={Monsters} />
          <Route exact path="/monsters" component={UrlParameters} />
          <Route exact path="/monsters/detail/" component={MonsterDetail} />
          <Route exact path="/monsters/detail/:id" component={MonsterDetail} />
          <Route exact path="/Pagination" component={Pagination} />
          <Route exact path="/lifecycle" component={Lifecycle} />
        </Switch>
      </Router>
    );
  }
}

• 위 Routes.js 에 component에 알맞은 path를 지정해주고 특히, /monsters/detail/:id 라는 params를 지정해 주었다.
  
  

MonstersDetail.js

import React, { Component } from "react";
import Card from "./Components/Card/Card";
import "./MonsterDetail.scss";

class MonsterDetail extends Component {
  state = {
    data: {},
  };

  componentDidMount() {
    fetch(
      `https://jsonplaceholder.typicode.com/users/${this.props.match.params.id}`
    )
      .then((res) => res.json())
      .then((res) => this.setState({ data: res }));
  }

  componentDidUpdate(prevProps) {
    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({ data: res }));
    }
  }

  render() {
    const { data } = this.state;
    return (
      <div className="url-parameters">
        <div className="btn-wrapper">
          <button>Back to Monsters List</button>
        </div>
        <Card id={data.id} name={data.name} email={data.email} />
        <div className="btn-wrapper">
          <button
            onClick={() =>
              this.props.history.push(
                `/monsters/detail/${this.props.match.params.id - 1}`
              )
            }
          >
            Previous
          </button>
          <button
            onClick={() =>
              this.props.history.push(
                `/monsters/detail/${+this.props.match.params.id + 1}`
              )
            }
          >
            Next
          </button>
        </div>
      </div>
    );
  }
}

export default MonsterDetail;

1. componentDidMount() 는 기본적으로 처음에 데이터를 가져오는 기능을 한다. 한번 실행되고 다시 실행되지 않기 때문에 계속 새롭게 업데이트 된 url정보를 얻기 위해서는 componentDidUpdate() 가 필요하다.
2. componentDidUpdate() 이 친구는 조건이 없다면 무한정 실행이 된다. 인자로는 prevProps, prevState 가 올수 있고, 위는 필요한 이전 props 값을 갖고 if문을 사용하여 이전 id값이 현재id 값과 다르면 데이터를 업데이트 하도록했다.
3. 버튼에 입력된 onClick 은 id 값에 따른 detail 페이지로 이동하게 했다. 이때 this.props.match.params.id 자체는 string 이기 때문에 앞에 +를 붙여줬다.