[REACT] useParams 쏠쏠하게 사용해보기

리액트는 엄청나게 다양한 hook들이 있습니다.

이 글을 쓰고 있는 지금도 제가 모르는 훅들이 정말 많구요, 이번 프로젝트를 하면서 유용하게 사용했던 useParams에 대해서 포스팅해보고자 합니다.

 

준비

사용하기 위해서는 react-router-dom 을 설치해야합니다.

npm install react-router-dom

자바스크립트 개발자라면 개나소나 다 알고있는 npm을 사용하셔도 되고, yarn을 쓰셔도 됩니다.

 

 

사용

저같은경우는 이런식으로 route에다가 : 기호를 달아놓고 이후에 값을 지정해줬습니다

 

가령 /post/:postNum은, /post에서 파라미터로 postNum을 붙인다는거죠

/mypage/:userId도 마찬가지입니다, /mypage에서 파라미터로 userId를 받아오게 되는거죠

 

이런식으로 달아 준 다음

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

export default function test() {
  const params = useParams();
  
  return (
    <div className="test">
      <p></p>
    </div>
  )
}

useParams를 import하고 useParams의 결과를 저장해준 다음에 사용하면 됩니다

 

그래서 왜쓰는데요

새로고침하면 정보가 날아가버리는 react의 특성상, 어디다가 정보를 간직해놔야하지 않겠어요?

파라미터를 사용하여 값을 받아온다면, 새로고침시 useEffect를 통해 params 값을 넣어서 -> api 요청을 다시 한 다음 리렌더링같은 과정이 가능해질겁니다.

 

이런식으로 사용하면 다른 컴포넌트에서 값을 전달해주는 기능까지 같이 할 수 있게됩니다.