[React] useParams() 사용하여 파라미터 가져오기

리액트에서 라우터 사용 시 파라미터 정보를 가져와 활용하고 싶다면 useParams라는 훅을 사용하면 된다. 라우터를 사용하고 있다는 가정 하에 useParams 사용 방법에 대해 알아보도록 하겠다.

참고로 파라미터가 아닌 현재 페이지의 Pathname을 가져오려면 useLocation()을 사용해야 한다.

...URL/user/1
user는 pathname, 1은 parameter

useParams를 사용하기 위해서는 라우터 설치가 필수다. 자세한 세팅 방법은 router 세팅하기 페이지에서 참고하면 된다.

npm install react-router-dom

useParams() 사용 방법

1) useParams를 import 한다.

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

const test = () => {
  return (
    <div className="test">
      <p></p>
    </div>
  )
}

export default test;

2) useParams 정보를 하나의 변수에 저장한다.

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

const test = () => {
  let { params } = useParams();

  return (
    <div className="test">
      <p></p>
    </div>
  )
}

export default test;

3) 파라미터 값을 사용할 수 있다.

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

const test = () => {
  let { params } = useParams();

  return (
    <div className="test">
      <p>현재 페이지의 파라미터는 { params } 입니다.</p>
    </div>
  )
}

export default test;

ex) ~url~/test/1은 파라미터가 1이므로, 현재 페이지는 파라미터가 1입니다.라고 출력된다.