1. route
npm i react-router-dom@5.3.0으로 다운로드한다.
router을 사용하면 주소에 따라 보여지는 component를 다르게 해줄 수 있다.
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Detail from "./routes/Detail";
import Home from "./routes/Home";
function App() {
return (
<Router>
<Switch>
<Route path="/detail">
<Detail />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</Router>
);
}
Router와 Switch로 감싸 준 후 경로와 그에 해당하는 컴포넌트를 지정해주면 된다.
<Route path="/">
<Home />
</Route>
그리고 주소로 이동하게 해주는 버튼을 만들어주어야 하는데
HTML의 a=herf 를 사용해도 되기는 하지만 이렇게 하면 주소 이동시에 페이지 전체가 새로고침 되기 때문에 별로다.
이럴 때에는 Link라는 component를 사용하면 된다.
import { Link } from "react-router-dom"; 불러온 후
<h2>
<Link to="/movie">{title}</Link>
</h2> 해주면 된다.
새로고침 하지 않고 /movie 페이지를 열어주기 때문에 속도가 빠르다.
이제 각 영화 title이 /movie/:id로 이동하게 하고 그 id에 맞는 영화 정보를 주게 하고 싶다.
:id는 1,2,3,4 이런식으로 알아들을 수 있지만 id는 문자 그대로 id라고 인식하기 때문에 :id라고 해야한다.
그리고 id를 받아오기 위해 Movie 데이터를 넘겨주는 Home.js에서 id={movie.id}로 id props를 추가해준다.
그리고 Link에 id를 추가해준다. <Link to={`/movie/${id}`}>{title}</Link>
useParams라는 함수를 쓰면 url의 변수값을 가져올 수 있다. 이 함수로 선택한 영화의 id를 알아낼 수 있다.
알아낸 id로 해당 /movie/:id에 맞는 영화의 정보를 나타내주면 된다.
