React url 파라미터 가져오기(useParams)

프로젝트를 하던 중 url에 있는 파라미터를 가져와야 할 일이 생겼다.
이럴 땐 어떻게 해야할까?

Route url에 파라미터 추가

<Routes>	
	<Route exact path='/memoset/wordlist/:setId' element={<WordList name={userName} />} />
    <Route exact path='/memoset/wordlist/memorize/:setId' element={<Memorize/>} />
    <Route exact path='/memoset/wordlist/spelling/:setId' element={<Spelling/>} />
</Routes>

이렇게 url 뒤에 ":파라미터이름"을 추가해 줍니다.
그리고 Link로 페이지를 이동할 때 url뒤에 변수를 넣어주면 됩니다.

useParams로 파라미터 가져오기

const params = useParams();
const id = params.setId;

이렇게 파리미터 이름에 맞게 불러와주면 됩니다!!

오늘은 useParams에 대해 알아보았는데요. 생각보다 사용할 일이 많았습니다. url 파라미터 사용하실 때 써보시길 바랍니다!!