React _ 동적 Routing

Routing은 다른 URL에 따라 다른 화면을 보여주는 것이다.
저번 인스타그램 클론 프로젝트에서 react-router-DOM이라는 라이브러리를 사용하여 라우팅을 구현했었다.
로그인에서 메인으로 넘어가는 부분만 라우팅 해주면 됐었고, 페이지 주소가 바뀔 상황은 없었기 때문에 다음 코드처럼 직접 경로를 명시해주었다.
따라서 localhost:3000/login으로 가면 로그인 페이지가, localhost:3000/main으로 가면 메인 페이지가 나오게 된다.

동적 Routing의 필요성

그런데 이번에 1차 프로젝트로 이마트 피코크 사이트를 만들면서, 고민이 생겼다.
예를 들어 상품 디테일을 보여주는 페이지가 있다고 하자.
UI는 똑같은데, 상품에 따라 다른 정보를 불러와야 되고,
URL이 product-detail/1 product-detail/2 이렇게 상품 ID에 따라서 변경 되는 형식이었다.
위에서 사용했던 방식을 그대로 사용하면

<Route exact path="/product-detail/1" component={ProductDetail1} />
<Route exact path="/product-detail/2" component={ProductDetail2} />
<Route exact path="/product-detail/3" component={ProductDetail3} />

이렇게 상품 개수마다 일일히 써줘야 되는 불편함이 생긴다.
따라서 우리는 동적 라우팅 이라는 방식을 사용해야 된다!

Path Parameter

product-detail/1 product-detail/2의 1, 2처럼 라우팅 경로 끝에 들어가는 각각 다른 id값들을 지정하는 매개 변수를 path parameter라고 한다.

<Route exact path="/product-detail/:id" component={ProductDetail} />

:는 path parameter가 올 자리라는 것을 명시하고, : 뒤에 있는 id는 해당 parameter의 이름이다. 따라서 꼭 id가 아니어도 productId, listId 등 다른 이름으로 지정해도 된다.

그럼 이제 path parameter를 바꿔서 이동을 해보자.
URL에 따라서 잘 이동하는 것을 확인할 수 있다!
주소는 동적으로 작동하는데, 우리는 주소 뿐만 아니라 컴포넌트의 데이터도 그에 맞게 불러와주어야 된다. id가 1번인 productDetail의 주소에서는 서버에서 fetch 해오는 URL의 주소도 /1번이 되어야 된다. 컴포넌트에서 URL에 따라 그에 맞는 데이터를 쓰려면 현재 컴포넌트의 :id값이 무엇인지 알 수 있어야 된다.

Routes.js에서 제공받는 props

Routes.js에서 Route 컴포넌트로 연결되어 있는 하위 컴포넌트(ex.productDetail)는 Route 컴포넌트로 부터 this.props.history, this.props.match, this.props.location 3개의 객체를 넘겨받는다.

• match: path parameter에 대한 정보
• location: 현재 url 경로에 대한 정보
• history: 페이지 이동을 위한 메서드 (ex. push)

따라서 :변수명의 값을 컴포넌트에서 받는 방법은 this.props.match.params.변수명 이다. URL /product-detail/1 에서 1번 상품에 대한 데이터를 fetch 해오고 싶다면,

const productId = this.props.match.params.id;

componentDidMount(){
  fetch(`10.58.2.208/product/detail/${productId}`, {
    method: 'GET'
  })
    .then(res => res.json())
    .then(res => console.log(res))
}

이런 방식으로 활용할 수 있다!

처음에 접했을 때 path parameter와 컴포넌트가 어떤 값으로 연동이 되는지 몰라서 이해하는데 시간이 조금 걸렸던 것 같다.