[TIL][React]동적라우팅 실습(url parameter 방식)

동적 라우팅

동적라우팅이 필요한 이유

리액트는 SPA인 HTML 파일이 1개이므로 한 페이지 내에서 여러 페이지를 이동하여 렌더하기 위해 third-party 라이브러리인 react-router를 설치하여 구현해준다.

상품 전체 리스트에서 한개의 상세페이지를 들어가게 되면 url이 상품의 id값에 따라 url이 달라지는 것을 확인할 수있다. 상품 전체 리스트와 동일한 데이터를 갖고오지만 레이아웃이 달라지게 되므로 아래와 같이 Routes 를 작성하게 되면 어떤 상품이 선택된 것인지 알 수 없으므로 동적 라우팅을 구현해주어야한다.

class Routes extends React.Component {
    render() {
        return (
            <Router>
                <Switch>
                    <Route exact path="/" component={Main} />
                    <Route exact path="/shop" component={Shop} />
                    <Route exact path="/shop/detail" component={ItemDetail} />
                </Switch>
            </Router>
        );
    }
}

동적 라우팅 방법

1. Query Parameter
2. Url Parameter

라우트 객체

라우트로 설정된 컴포넌트는 라우트 관련 정보를 props를 통해 전달받게 된다. 라우트 props는 세 개의 객체를 제공하는데 이를 이용하여 동적 라우팅 구현이 가능하다

• history
• location
• match

URL Parameter를 이용한 동적 라우팅 구현

1. 컴포넌트에서 경로가 동적으로 온다는 것을 표기하기 위해 : 와 key를 설정해준다. this.props.match 에는 어떤 라우트에 매칭되는지 정보가 담기게 됨

   this.props.match.params 에는 key 값이 담기게 됨

   {/* 동적인 url을 위해 :를 사용하여 준다.(this.props.match.params에 동적으로
    key을 할당해준다는 의미임 -> 그에 대한 값으로 push로 넘겨줌) */}
    <Route exact path="/monsters/detail/:id" component={MonsterDetail} />

2. 디테일 페이지에서 동적으로 url 주소를 변경해준 후 데이터를 받아온다

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