[ReactJS] React Route 가 제공하는 dynamic url, useParams

다이나믹하다는 것은 변수를 url에 넣어줄 수 있음을 의미한다.

이렇게 /:id 를 적어주면 

이렇게 Detail.js 가 랜더링 된다.

Props 는 그저 Object 일 뿐이다. 우리는 그저 item을 꺼내 쓸 뿐이다.

 

이제 id 값을 Home 컴포넌트에서 Movie 컴포넌트로 Props 에 넘겨주어 이를 Movie 컴포넌트에서 활용해 링크를 특정 id 로 연결시켜주고자 한다.

어떻게 해야 할까?

JSX 안에서 JS 를 쓰기 위해 {},중괄호를 열어주고 백틱안에서 변수를 넣어주기 위해서는 ${} 달러,중괄호가 필요하니 저렇게 해준 것으로 이해했다.

특정 영화 제목을 클릭할때마다 고유의 id 값을 가지는 url로 이동됨을 확인할 수 있었다.

 

 

무슨 id 일지 알면 좋겠다. 왜냐하면 그렇게 되면 id 값을 통해 api에 변수를 집어넣은 request 를 할 수 있기 때문이다.

이건 쉽다 왜냐하면

React  Router에서 제공하는 함수 중 하나가 url에 있는 값을 반환해주는 함수가 있기 때문이다. 특히 변경되는 값에 대해서 말이다.

 

useParams

 

id 를 받아왔다!

 

Route 경로 설정에 id 라는 이름을 주었다. 그렇기에

 

 

이렇게 id 라고 하면 그냥 그 컴포넌트 안에서 지역변수인 id 인데, 이름은 상관이 없다 이렇게 되면.

이렇게 중괄호를 열고 받아와 주면 url 상의 id 라는 이름의 값을 바로 받아와서 콘솔에 보여준다.

이렇게

차이

이제 남은 것은 우리가 받은 id를 가지고 api 에 request를 보내는 것이다.

위는 Object 에서 바로 property를 꺼낼때 쓰는 JS 의 방식이다.

 

 

 

state, setState, useEffect 그리고 그 다음에는 html을 잘 꾸며주는 게 전부다. 

props 를 배웠고(HTML에 컴포넌트를 사용하기 위해 부를때, 전달해주는 값들) 그리고 그런 값들의 자료형에 대한 propTypes 에 대해 배웠다.

 

useParams 우리에게 url 에 대한 상세정보를 알려주는 함수 

 

Link 로 할 줄 아니깐 이제 navigation bar 같은 것도 만들 수 있다.

 

 

 

https://nomadcoders.co/react-for-beginners/lectures/3292

All Courses – 노마드 코더 Nomad Coders