React
라우터
React App 만들기에는 페이지 라우팅이 포함되어 있지 않다.
리액트 라우터는 가장 일반적인 솔루션이다.
반응 라우터 추가
애플리케이션에 React Router를 추가하려면 애플리케이션 루트 디렉터리의 터미널에서 다음을 실행하자.
npm i -D react-router-dom
⭐ 이 튜토리얼에서는 React Router v6을 사용한다. v5에서 업그레이드하는 경우 @latest 플래그를 사용해야 한다.
npm i -D react-router-dom@latest
폴더 구조
여러 페이지 경로가 있는 애플리케이션을 만들려면 먼저 파일 구조부터 시작해보자.
src 폴더 내에 여러 파일이 포함된 pages 폴더를 만든다.
src\pages\:
- Layout.js
- Home.js
- Blogs.js
- Contact.js
- NoPage.js
각 파일에는 매우 기본적인 React 구성 요소가 포함된다.
기본 사용법
이제 index.js 파일에서 라우터를 사용해보자.
예제
URL 기반 페이지로 라우팅하려면 React Router를 사용한다.
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./pages/Layout";
import Home from "./pages/Home";
import Blogs from "./pages/Blogs";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="blogs" element={<Blogs />} />
<Route path="contact" element={<Contact />} />
<Route path="*" element={<NoPage />} />
</Route>
</Routes>
</BrowserRouter>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
예시 설명
먼저 <BrowserRouter>로 콘텐츠를 포장한다.
그런 다음 우리는 <Routes>를 정의한다. 하나의 응용프로그램은 여러 개의 <Routes>를 가질 수 있다.
우리의 기본적인 예는 오직 하나만을 사용한다.
<Route>는 중첩될 수 있다. 첫 번째 <Route>는 /의 경로를 가지며 Layout 구성요소를 렌더링한다.
중첩된 <Route>는 부모 경로를 상속하고 추가한다.
그래서 블로그 경로는 부모 경로와 결합되어 /blogs가 된다.
Home component 경로에는 경로가 없지만 인덱스 특성이 있다.
그러면 이 경로를 상위 경로의 기본 경로( /)로 지정한다.
경로를 *로 설정하면 정의되지 않은 URL에 대한 캐치올(catch-all) 역할을 한다.
이는 404개의 오류 페이지에 적합하다.
페이지 / 구성요소
Layout 구성 요소에는 <Outlet> 및 <Link> 요소가 있다.
<Outlet>은 선택한 현재 경로를 렌더링한다.
<Link>는 URL을 설정하고 열람 이력을 추적하는 데 사용된다.
내부 경로에 링크할 때마다 <a href=””> 대신 <Link>를 사용할 것이다.
“레이아웃 경로”는 네비게이션 메뉴와 같이 모든 페이지에 공통 내용을 삽입하는 공유 구성요소다.
예제 – Layout.js
import { Outlet, Link } from "react-router-dom";
const Layout = () => {
return (
<>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/blogs">Blogs</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Outlet />
</>
)
};
export default Layout;
예제 – Home.js
const Home = () => {
return <h1>Home</h1>;
};
export default Home;
예제 – Blogs.js
const Blogs = () => {
return <h1>Blog Articles</h1>;
};
export default Blogs;
예제 – Contact.js
const Contact = () => {
return <h1>Contact Me</h1>;
};
export default Contact;
예제 – NoPage.js
const NoPage = () => {
return <h1>404</h1>;
};
export default NoPage;