동적 라우팅이란?
라우트의 경로에 특정 값을 넣어서 해당 페이지로 이동할 수 있게 하는 것
React는 그 자체로는 라우팅 기능을 갖고 있지 않아서 React-router와 같은 라이브러리를 사용해서 라우팅을 구현한다. 그리고 React Router에서는 두 가지 방법을 통해 유동 라우팅 기능을 구현할 수 있는데, 하나는 Query parameters (Query string) 또 다른 하나는 URL parameters이다.
각 각에 대한 자세한 설명은 아래에서 예제를 통해 함께 보도록 하자 🙋
Router로 설정한 컴포넌트의 3가지 props
📌 라우트로 설정한 컴포넌트는 3가지의 props를 전달 받게 된다.
- history
- 이 객체의 push, replace를 통해 다른 경로로 이동하거나 앞 뒤 페이지로 전환 할 수 있다.
- location
- 이 객체는 현재 경로에 대한 정보를 지니고 있고, URL 쿼리 (/company_list?category=3)에 대한 정보도 가지고 있다.
- match
- 이 객체는 어떤 라우트에 매칭이 되었는지에 대한 정보가 있고 params (/company_detail/:id) 정보를 가지고 있다.
👏 URL parameters
우리는 앞서 라우트로 설정한 컴포넌트가 갖는 3가지 props를 정리했다.
그 중 match를 이용하면 URL parameter를 사용할 수 있다.
match
이 객체에는 어떤 라우트에 매칭이 되었는지에 대한 정보가 있고 params(/company_detail/:id) 정보를 가지고 있다.
👉 params 데이터를 사용하기 위해서는 Routes.js에서 컴포넌트의 설정을 조금 수정해 주어야 한다.
👉 params 정보는 this.props.match.params를 통해 가지고 올 수 있다.
<Routes.js>
실제 프로젝트에서 사용한 코드이다.
우리는 picks와 booking이라는 두 개의 상품리스트페이지에서 상품을 선택함에 따라 상품상세페이지인 BookingDetail 페이지로 넘어가도록 해야 했기 때문에 BookingDetail 컴포넌트의 path 끝에 :변수명 을 설정해 주었다.
<Route exact path="bookingDetail/:id" component={BookingDetail} />에서 :id는 내가 설정해 준 변수 명이므로 id는 다른 변수이름으로 사용되어도 상관없다. 그리고 이렇게 설정함에 따라 BookingDetail 컴포넌트에서 this.props.match.params.id를 통해 해당 값을 가져올 수 있다.
<PickArticle.js>
pick Page의 컴포넌트인 PickArticle.js의 코드이다. PickArticle의 이미지를 클릭할 때 BookingDetail 페이지로 넘어가야 하기 때문에 img 태그에 onClick 이벤트로 주었다. 여기서 사용된${id}는 부모 컴포넌트로 부터 전달받은 props로 각 호텔에 대한 id값을 의미한다. 이 데이터가 상세페이지로 넘어가는데 필요한 데이터 인 것이다.
(pickArticle 컴포넌트는 Routes에 직접적으로 포함되어 있지 않기 때문에 router에 포함된 부모 컴포넌트 Pick으로 부터 props.history 를 전달 받았다)
<BookingDetail.js>
fetch 함수 부분에 API 호출 시 주소 뒤에 this.props.match.params.id가 덧붙어 있다.
즉,
- Pick (pickArticle) Page에서는 상품의 이미지를 클릭할 시 해당 상품의 ID를 포함한 url 주소로 이동한다.
- bookingDetail Page에서는 url 주소에 담긴 id를 this.props.match.params.id를 통해 접근할 수 있다.
- 접근해서 얻은 ID를 통해 API를 호출하여 해당 데이터를 얻고 화면에 나타낸다.
