Intro
- React Router 사용
- Router끼리 이동
1. React Router 사용하기
우리는 라우터 라이브러리를 사용하기위해 설치가 필요하다.
npm install react-router-dom
물론 이 전에 CRA(creat-react-app)을 해주었다는 가정을 한 상태이다.
아무튼 우리는 원래 App 컴포넌트에 만들었던 모든 로직을 별개의 장소(Home)로 옮기고, App.js에는 react-route-dom의 컴포넌트(Router, Routes, Route)를 가져다 쓸 것이다. 그리고 이 컴포넌트들은 url을 바라보고 있으며, url이 바뀌면 어떤 것을 보여줄 것인지 결정한다.
컴포넌트를 사용하기 위해서는 먼저 import를 해줘야한다.
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
1.1 Router
Router에는 두 종류가 있는데, Hash Router와 Browser Router이다. 두 브라우저는 url에 차이점이 있는데, 같은 url일지라도 hash router에는 #이 붙는다.
Browser Router 의 url : http://localhost:3000/movie
Hash Router 의 url : http://localhost:3000/#/movie
BrowserRouter가 일반적인 방식이며, HashRouter는 잘 쓰이지 않는다.
1.2 Routes(버전6 이상부터는 Switch 대신 사용됨)
Routes 가 하는 일은 Route를 찾는 것인데, Route는 url을 의미한다.
route를 찾으면 컴포넌트를 렌더링한다.
Routes 컴포넌트를 사용하는 이유는 한 번에 하나의 Route만 렌더링 하기 위해서인데, Router에서 원한다면 두 개의 Route를 한 번에 렌더링할 수도 있다.
1.3 Route
Routes 안에 Route를 만드는데, 유저가 홈화면으로 갈 때 사용할 Route를 만들기 위해서 경로를 "/"로 준다. 누군가 웹사이트의 경로가 "/"에 있다면 Home Component를 보여주도록 하는 것이다.
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./routes/Home";
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />}></Route>
</Routes>
</Router>
);
}
export default App;
2. Route 에서 다른 Route로 이동하는 방법
간단하게 a태그를 이용해 href로 페이지의 주소를 준다면, 이동이 가능하다. 이런 식으로 말이다.
<a href="path">링크이동<a>
하지만 a태그를 사용해 페이지 이동을 한다면 페이지 전체가 재실행된다는 단점이 있다. 그래서 Route에는 페이지 이동에 사용되는 컴포넌트가 있다.
2.1 url 주기 (Link)
Link는 브라우저 새로고침 없이도 유저를 다른 페이지로 이동시켜주는 컴포넌트이다.
사용법은 간단하다. 원래 a태그로 사용하려던 곳에 Link 컴포넌트를 써주면 되는 것이다.
마찬가지로 사용을 위해 먼저 import 시켜준다.
import { Link } from "react-router-dom";
<Link to="path">링크이동</Link>
2.2 동적 url 사용하기 (useParams)
동적 url을 사용하기 위해서 Link에 parameter을 사용했다고 하자. id마다 다른 컴포넌트가 뜨게 될 것이다.
<Link to={`/${변수이름}`}>{title}</Link>
<Route path="/:변수이름" element={<Detail />} />
:id는 React Router에게 여기오는 id 값이 뭔지 알고 싶다고 하는 것인데 React Router에는 이럴 때 사용하는 함수를 제공한다.
useParams
useParams는 url의 상세정보를 전달해주는 함수로 url에 있는 값(특히 변화하는 값)을 반환해준다. 우리는 이 함수를 사용하기만 하면 : 뒤에 있는 변수의 값을 알 수 있다. 사용법은 import를 하고 함수를 호출해주기만 하면 된다.
import { useParams } from "react-router-dom";
const {id} = useParams();
+참고 : 공식 문서
'WEB > React' 카테고리의 다른 글
[React] 리액트 시작하기, create-react-app (0) | 2022.02.08 |
---|---|
[React] github pages에 배포하기 (Publishing) (0) | 2022.02.03 |
[React] API 사용하기 (0) | 2022.02.02 |
[React] 배열 State (0) | 2022.02.02 |
[React] Effects (useEffect, clean-up) (0) | 2022.01.29 |