useParams를 이용하여 파라미터값 받아오기 React-Hooks

우리가 상세정보같은 페이지를 보기위해 url에 상품정보의 Id같은걸 파라미터로 넘겨 그 값을 이용해 상세정보를 띄어준다. 

useParams훅을 이용하여 파라미터값을 받아보는걸 해보겠다. 

 

이렇게 Routes를 설정해주고 path에 '/test/:id'를 넣어주었다. url에다가 /test/10 을 요청하면 id에는 10이라는 값이 들어갈 것 이다.

그럼 Test컴포넌트에서 그값을 받아보자.

useParams함수를 import해주고 {id}는 path에서 설정했던 이름을 똑같이 적어주어야한다.

그러고 url에

이렇게 입력해주고 Test컴포넌트에서 id값을 그대로 띄어보았다. 

이렇게 url파라미터로 id값을 넘겨주면 해당하는 id값의 상세정보같은 걸 띄울 수 있다. 여기서부터는 모든게 응용이다. 

나는 방법을 알면 응용하는게 너무 재밌고 쉽게느껴진다.