React (12) - router 사용방법 #2

Router는 변수를 활용한 URL을 지원한다.  --->   http://localhost:3000/movies/123123

 

홈 화면(Home.js)에서 영화제목을 클릭하면 아이디값을 전달해서 http://localhost:3000/movies/123123(id)으로 이동한다.

Detail.js에서는 id값을 userParams 활용하여 불러와 API를 요청해주면 된다.

 

App.js <Route path="/movie/:id"> </Route>

Moive.js function Movie({ id, coverImg, title, summary, genres }) {     return          <h2> <Link to={`/movie/${id}`}>{title}</Link> </h2>         }

 

Movie컴포넌트의 부모 Home컴포넌트에서 id값을 전달해주도록 설정해야 한다.

 

Home.js {movies.map((movie) =>                            <Movie                                 key={movie.id}                                 id={movie.id}                                 coverImg={movie.medium_cover_image}                                 title={movie.title}                                 summary={movie.summary}                                 genres={movie.genres}                             />                         )}

 

URL의 변경되는 값을 반환해주는 함수 ---> import {userParams} from "react-router-dom";

받은 id로 API fetch 해주면된다.

 

Detail.js const {id} = userParams(); console.log (id)                ----->  {id:`121212`}