SPA를 만들 때 여러가지 화면이 필요하고 각각 상황에 맞는 화면을 보여줘야할 때, 각각의 화면마다 주소를 정하고 주소에 따라 다른 화면을 보여주는 과정을 라우팅이라고 한다.
React SPA에서는 라우팅을 위해 React Router라는 라이브러리를 가장 많이 사용한다.
npx create-react-app@latest 폴더이름
npm install react-router-dom@^6.3.0
(6.3.0버전)import React from 'react'
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
** 라이브러리도 객체와 같다고 생각하면 편함 {BrowserRouter: ... , Routes: ... , Link: ....}
<BrowserRouter>
컴포넌트는 자바스크럽트와 History API를 사용해 새로고침하지 않고도 주소를 변경할 수 있게 해준다.
** History API: history 객체를 통해 브라우저의 세션 기록에 접근할 수 있는 방법을 제공
<BrowserRouter>
가 상위에 작성되어 있어야 React Router의 컴포넌트들을 사용할 수 있다.
<Routes>
컴포넌트는 여러 <Route>
컴포넌트를 감싸서 그중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는 역할을 한다.
<Routes>
를 사용하지 않으면 매칭되는 모든 요소를 렌더링한다.
<Route>
컴포넌트는 path 속성에 주소를 지정하고 element 속성으로 연결할 컴포넌트를 지정해준다.
* 지정되지 않은 주소로 접근할 시에는 `path=””`으로 설정되어 있는 컴포넌트를 보여준다.
<Link>
의 to 속성을 활용하여 <Route>
컴포넌트에 설정해 준 path 주소를 연결해 준다.
<a>
요소가 아닌<Link>
를 사용하는 이유
<a>
요소를 사용하면 새로고침을 통해 페이지를 불러오지만<Link>
컴포넌트는 페이지 전환을 방지하는 기능이 내장되어 있다.
// 사용 환경 세팅
import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link> //Link로 주소연결
</li>
<li>
<Link to="/mypage">MyPage</Link>
</li>
<li>
<Link to="/dashboard">Dashboard</Link>
</li>
</ul>
</nav>
<Routes> //Routes와 Route로 주소와 연결 컴포넌트 지정
<Route path='/' element={<Home />} />
<Route path="/mypage" element={<MyPage />} />
<Route path="/dashboard" element={<Dashboard />} />
</Routes>
</div>
</BrowserRouter>
)
}
// Home 컴포넌트
function Home() {
return <h1>Home</h1>;
}
// MyPage 컴포넌트
function MyPage() {
return <h1>MyPage</h1>;
}
// Dashboard 컴포넌트
function Dashboard() {
return <h1>Dashboard</h1>;
}
export default App;