이번에 해볼건 route다
저번 게시물에서 components와 route 폴더를 만들고 분리를 해놨지
라우터는 path속성으로 자신이 원하는 URL 주소를 만들고 그 해당 URL에 들어갈 컴포넌트들을 지정할 수 있다. 또한, 브라우저 이동 없이 컴포넌트만 싹 갈아 치워서 리프레시 없이 빠르게 페이지 전환이 마치 모바일앱처럼 이루어지게끔 해준다.( a요소 같은 역할을 하지만, 리프레시 없이 페이지 전환이 되는 것처럼 보이는 것이라 보면 된다)
home 라우트(페이지)는 모든 영화를 보여주고
Movie 라우트는 영화 하나만 보여줌
이렇게 라우트 별로 생각해야한다.
home 라우트는 기본적으로 App 컴포넌트 전체를 가지고 있게 만든다.
App에 있는 것을 모두 Home라우트로 옮겼으니
App.js는 라우터를 렌더한다.
작업에 앞서 먼저 import 시켜준다.
그리고 react-router-dom을 인스톨해주자.
최신버전은 6.3인데 실습에는 5.3을 썼다.
터미널에
npm i react-router-dom@5.3.0을 입력해주자
이러고나서 계속 컴파일 오류가 뜨길래 2시간동안 머리털 뽑으면서 node_modules 삭제하고 npm install로 다시 설치하고 공중제비를 돌았는데 결국에 "../components/Movie"의 .하나가 문제 였던걸 알고 대낮부터 알콜이 땡기더라.
다음 App.js 상단에
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";를 추가한다.
각각의 요소에 대한 설명을 하고자 한다.
-
BrowserRouter : URL과 UI를 동기화해주는 라우터이며, 웹 어플리케이션이 History API를 사용하여 페이지를 새로고침 없이 주소 변경이 가능하게 하고, 관련된 정보를 props로 쉽게 조회하거나 이용할 수 있게 해준다.
-
Switch - Route로 생성된 자식컴포넌트중 매칭되는 첫번째 Route를 렌더링해준다. 보통 메인 Route의 url경로를 "/"로 지정하고 다른 Route에는 "/detail", "/login" 이런식으로 지정하게 되는데, 만약 Switch를 사용하지 않으면 그냥 메인페이지에 가기 위하여 "/" 경로를 접속했늗네 "/"가 포함된 "/detail", "/login" 컴포넌트들이 다 렌더링 되는 경우를 보게 된다.
-
Route - 컴포넌트에 path 속성을 이용하여 원하는 url를 지정한다. 그 url에 접속하면 해당 컴포넌트만 렌더링이 된다. 즉, 사용자의 경로에 따라 다른 컴포넌트를 보여줄 수 있다.
-
Link - 'a'요소와 비슷한 개념이라고 보면 된다. 지정한 url로 이동이 되게끔 해준다. 페이지를 새로 불러오기 때문에, 기존 컴포넌트에서 들고 있던 상태값들이 날라가게 된다.
코드를 첨부한다.
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "./routes/Home";
import Detail from "./routes/Detail";
function App() {
return (
<Router>
<Switch>
<Route path="/movie">
<Detail />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</Router>
);
}
export default App;
쉽게 생각하자
처음에 들어가는 Router를 먼저 렌더링해주고
그안에 들어가는 Switch는 한번에 하나의 Route만 렌더링하기 위해 존재한다.
Route는 우리가 유저에게 보여주고 싶은것들이다.
<Route path="/">
<Home />에서 path="/"은 홈을 뜻한다.
<Route path="/movie">
<Detail /> 에서 path=/movie는
http://localhost:3000/movie를 입력했을때 detail 컴퍼넌트로 연결해주겠다는 뜻이다.
알맞은곳에 컴포넌트만 꽂아 넣으면 되는 거다 엄청쉽지?
다음은 라우트에서 다른 라우트로 이동하는 방식이다.
html의 경우임 <a> 태그를 사용해서 링크를 해버리면될건데 이럴 경우에 문제가 발생한다.
페이지 전체가 다시 실행된다는 것이지
이것을 막기위한 아주 좋은 컴퍼넌트가 있다. 바로 위에 나왔던 Link다.
우리는 이 Link를 Movie.js에서 사용해볼것이다.
Move.js의 위에
import { Link } from "react-router-dom";로 Link를 import해준다.
다음
<h2>{title}</h2><h2>
<Link to="/movie">{title}</Link>
</h2>타이틀에 해당하는 곳에 링크를 붙여 위와 같이 만든다.
이게 끝이다.
