7.6 Parameters

React Router는 다이나믹(동적) url을 지원해주기도한다.

다이나믹 - url에 변수를 넣을 수 있다는 의미

다음과 같이 id를 입력해서 detail페이지로 넘어갈 수 있게!

이는 유저를 /movie/변수 의 경로로 보내기 위해 이렇게 설정한다.

":"를 쓰는것이 아주 중요하다!   "/:id"를 꼭 써라!

자 그럼 prop으로 id를 받을 수 있도록 해보겠다!

Home.js

Movie.js

컴포넌트를 렌더링한다는것은 실질적으로는 함수를 불러오는 것인데 그래서 다음과 같이 object를 전부 넘겨주는것이다.

props는 object일 뿐이고, 우리는 그것을 열어서 item을 꺼내쓰는것이다.

그래서 url을 더 좋게 만들 수 있다.

localhost로 이동하여 각 영화를 클릭하게 되면, url에 클릭한 영화의 id가 나오게 된다.

 

자 그럼 여기에 나오는 id값이 무엇인지 알아보자.

 

useParams라는 함수를 불러오기만 하면된다.

Detail.js

그러니 바로 console로 id 값을 출력해버린다.

근데 내가 아래와 같이 id 대신 chillitomato라고 쓰게 된다면

이것이 우리가 받게 될 변수의 이름이 되는 것이다.

useParams를 사용하면 React Router는 바로 이 변수의 값을 넘겨준다!

 

그래서 App.js에서 id라고 했던 것을 기억한다면

다음의 중괄호에 id라고 해주면되는 것이다.

그럼 다음과 같이 출력한다.

 

자 그럼 받은 id로 API에 요청을 보내보자.

그래서 Detail페이지를 예쁘게 구현하면된다.