React의 url parameter 사용.

react-router-dom 라이브러리에서 useParams라는 함수를 import한다.

 

라우팅을 하고싶은 페이지(컴포넌트)에 저렇게 path를 달아주는데,

 

:변수 이렇게 세미콜론으로 무언가를 url에서 parameter로 받겠다는 선언을 해준다.

 

그러면 url에서 /detail/ 뒤에 텍스트를 넣어도 Detail 컴포넌트가 잘 출력된다.

 

path 설정이 잘 되었다는 뜻이다.

 

 

그리고 url parameter를 사용하는 컴포넌트에서 

 

이렇게 url parameter로 넘긴 변수를 import한 useParams 함수로 받을 수 있다.

 

저 함수를 실행하면 해당 컴포넌트로 전송된 url parameter가 객체 형태로 남는데,

 

그 객체를 destructuring 문법으로 받은것이다.

 

대강 이렇게도 받을 수 있다는 뜻이다.

 

 

그리고 저렇게 컴포넌트 내에서 url parameter를 변수로 사용할 수 있게 한 후,

 

자유롭게 사용해주면된다.