React - Router3

리액트 라우터의 기능 중  url 파라미터 기능과 useParams 훅 사용법에 대해서 공부해보겠습니다.

 

라우터 기능을 이용해서 path를 통해 여러 페이지를 만들 때 path="/detail" 이런 식으로 입력해줬습니다. 그런데 만약 보여줘야 할 페이지가 100개라면 path="detail/0" , path="detail/1" 이런 식으로 100개를 코드를 적는 것은 굉장히 비효율적입니다. 이를 보다 편리하게 가능하게 해주는 것이 url 파라미터 입니다.

 

사용법은 다음과 같습니다.

 

<Route path="/detail/:id">

 

라우터를 사용할 때 :id 를 붙여줍니다. id 자리에 어떤 것이 오더라도 그 id가 적힌 페이지로 이동하겠다는 의미입니다. 꼭 id 라고 적을 필요는 없고 자유롭게 작성하면 됩니다. 

 

import React from 'react';

function Detail(props){
  return (
    <div className="container">
      <div className="row">
        <div className="col-md-6">
          <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
        </div>
        <div className="col-md-6 mt-4">
          <h4 className="pt-5">{props.shoes[:id자리에 있던숫자].title}</h4>
          <p>{props.shoes[:id자리에 있던숫자].content}</p>
          <p>{props.shoes[:id자리에 있던숫자].price}원</p>
          <button className="btn btn-danger">주문하기</button> 
        </div>
      </div>
  </div>  
  )
};

export default Detail

 

예시를 위해 한 가지 코드를 가지고 왔습니다.  지금 보고 있는 것처럼 데이터바인딩을 할 때 id 숫자에 맞게 보여지는 페이지 UI를 다르게 하고 싶습니다. 어떻게 해야될까요? 

 

import React from 'react';
import { useHistory, useParams } from 'react-router-dom';

function Detail(props){

  let { id } = useParams();
  return (
    <div className="container">
      <div className="row">
        <div className="col-md-6">
          <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
        </div>
        <div className="col-md-6 mt-4">
          <h4 className="pt-5">{props.shoes[id].title}</h4>
          <p>{props.shoes[id].content}</p>
          <p>{props.shoes[id].price}원</p>
          <button className="btn btn-danger">주문하기</button> 
        </div>
      </div>
  </div>  
  )
};

export default Detail

 

react-router-dom 라이브러리에서 useParams 라는 훅을 일단 가지고 옵니다. 그리고 id 라는 변수에 useParams 훅을 저장해줍니다. 

 

코드를 보면 let { id } = useParams();  이렇게 작성을 했는데 이것은 구조분해 할당을 한 것입니다. useParams() 라는 함수는 현재 URL에 적힌 모든 파라미터를 {파라미터1,파라미터2} 이런 식으로 저장해주는 함수입니다.  따라서 파라미터1, 파라미터2 등 안의 자료를 저장하기 위해 변수를 {  } 안에 넣어서 구조분해 할당을 해준 것입니다. 

 

따라서 detail/0 이라 하면 id는 0이 되는 것이고 detail/1 이라 하면 id는 1이 되는 것입니다. url 의 :id 자리에 적는 것이 바로바로  useParams 함수를 통해 id 라는 변수에 저장이 되는 것입니다. 

 

그래서 url의 id에 맞게 id 변수가 자동으로 바뀌기 때문에 위 예제코드에서 shoes 라는 state에 저장된 자료를 가져올 수 있는 것입니다.