[React] useParams 활용

useParams

react-router-dom의 hook인 useParams를 사용하면 
컴포넌트에 전달받은 URL Parameter를 받아올 수 있다.

 

import { useParams } from 'react-router';

상단에 import 한 후 

 

let { id } = useParams();

component 내부에서 위와 같이 선언해주면 /:id값에 넣은 내용을 받아올 수 있다.

 

 

array 안에서 params로 받은 id값과 일치하는 자료를 찾아
그 자료안에서의 데이터를 활용하고 싶다면 어떻게 해야할까?

 

url의 params에 맞는 데이터 사용하기

let user = [
    {
      id : 0,
      name : "Jay",
      age : 28,
      job : "Student",
    },
    {
      id : 1,
      name : "Jun",
      age : 25,
      job : "Student",
    },
    {
      id : 2,
      name : "Harry",
      age : 31,
      job : "Student",
    }
  ]

예를들어 상위 컴포넌트에 이러한 user 데이터를 받고있다고 가정해보자.

하위 컴포넌트에 Route와 함께 user 데이터를 전송해 준 후

user/1 으로 주소 입력 시 해당 id에 맞는 정보를 보여주고 싶다면?

 

import { useParams } from 'react-router';

function Profile(props){
    let { id } = useParams();
    const data = props.user.find(item=> item.id == id);
    return(
      <div>
        <h1>{data.name}</h1>
        <p>{date.age}</p>
        <p>{date.job}</p>
      </div> 
    )
}

상위 컴포넌트에서 전달 받은 props.user를 find()하여

params의 id값과 맞는 데이터를 찾은 후 사용하면 된다.

 

실제 개발 시에는 0인 상품 데이터를 Ajax로 요청해서 사용하자