React Router, Route, Link
- React는 SPA(Single Page Application)로 하나의 페이지에서 URL 이동 시에 사용
- React Router는 React에서 라우팅을 관리하는 데 사용되는 도구로서, 다른 페이지나 뷰로의 이동을 쉽게 만들어주는 라이브러리
📑 Router
Route, Link 컴포넌트가 함께 유기적으로 동작하도록 묶어주는데 사용
BrowserRouter, HashRouter 두 가지 유형의 Router가 있음
BrowserRouter
- HTML의 history API를 사용하여 URL을 변경하고, 뒤로 가기, 앞으로 가기 등과 같은
동적인 페이지에서 사용하기 좋음 - 클라이언트 측 라우팅에서 주로 사용되며, 서버 요청 없이 클라이언트에서 페이지 이동을 처리,
서버 설정에 따라서는BrowserRouter를 사용하려면 추가 설정이 필요
HashRouter
- URL의 해시
#부분을 활용해 페이지를 렌더링 함, 브라우저에서 호환성이 좋으며,
서버 설정이 필요 없음 - 해시를 사용하는 라우팅 방식은 주로 정적 웹사이트에 적합하며, URL의 해시 부분이 변경되어도 서버에는 어떠한 요청도 전송되지 않는다.
📑 Route
- 현재 주소창의 경로와 매치될 경우 보여줄 컴포넌트를 지정하는데 사용
path: 매치시킬 경로를 지정
element: 매치되었을 때 보여줄 컴포넌트를 할당
📑 Link
-
HTML의 a태그와 유사한 기능으로 새 페이지로 이동하거나 다른 뷰를 렌더링할 수 있음
-
a태그를 사용하지 않는 이유는 링크를 누르면 재렌더링이 되는 것이 아닌 페이지가 새로고침 되기 때문이다.
to: 이동할 경로를 지정
state: props처럼 값을 넘겨줄 때 사용
onClick: 링크가 클릭될 때, 실행될 함수를 지정할 수 있음 -
state로 넘겨진 값을 받을 경우useLocation을 사용해서 받아야 함
// Home.jsx
<Link to='/profile' state={{ userName: '홍길동' }}>Profile</Link>
// Profile.jsx
const location = useLocation();
const userName = location.state.userName;사용법
설치 방법
npm install react-router-dom코드 입력
import React, { useState } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Home from "page/Home";
import About from "page/About";
import Profile from "page/Profile";
function App() {
const [user, setUser] = useState({ userName: '홍길동', userAge: 20 });
return (
<Router>
<div>
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about/">About</Link></li>
<li><Link to="/profile/" state={{ user: user }}>Profile</Link></li>
</ul>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about/" element={<About />} />
<Route path="/Profile/" element={<Profile />} />
</Routes>
</div>
</Router>
);
}
export default App;Route element props / Link state props
Route element props
- 특정 라우트에 연결된 컴포넌트에 값을 전달하는 것
- 특정 페이지에서 API키나 특정 함수와 같은 고정된 값을 전달해야 할 때 사용
Link state props
- 새로운 페이지로 이동하면서 추가적인 데이터를 함께 전달할 때 사용
- 값을 받는 페이지에서 useLocation 훅을 사용해 접근
- 주로 상세 페이지로 이동하면서 해당 아이템에 대한 추가 정보를 전달하는 등 사용
- 동적인 페이지 전환을 돕는 역할
Link state : 이동하면서 정보를 보내는 데 사용
Route element : 특정 라우트에 연결된 컴포넌트에 미리 값을 전달하는 데 사용
