SPA는 하나의 페이지를 가지고 있지만 사실 한 종류의 화면만 사용하지 않는다.
예를 들어 Twittler 와 같은 SPA 를 만들 때, 메인 트윗 모음 페이지, 알림 페이지, 마이 트윗 페이지 등의 화면이 필요할 수 있다.
이 화면에 따라 "주소"도 달라질 것인데, 이렇게 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다."라는 의미로 라우팅(Routing) 이라고 한다.
React Router의 주요 컴포넌트는 크게 3가지로 나눌 수 있다.
라우터 역할을 하는 BrowserRouter, 경로를 매칭해주는 Switch 와 Route, 그리고 경로를 변경하는 역할을 하는 Link 가 있고, 이 컴포넌트들을 사용하기 위해서는 React Router 라이브러리에서 따로 불러와야 한다.
이 컴포넌트들을 사용하기 위해서는 React Router 라이브러리에서 불러와야한다.
명령어 사용 방법
import { BrowserRouter, Switch, Route, Link } from "react-router-dom";
npx create-react-app "프로젝트 이름"
cd "프로젝트 이름"
npm start
npm install react-router-dom@"버전"
위와 같이 설치가 완료되면 package.json에서 확인이 가능하다.
<Switch>
컴포넌트는 여러 <Route>
를 감싸서 그중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는 역할을 합니다. <Switch>
를 사용하지 않으면 매칭되는 모든 요소를 렌더링한다.<Route>
컴포넌트는 path 속성을 지정하여 해당 path에 어떤 컴포넌트를 보여줄지 정합니다. 아래에서 배울 Link 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동된다.경로를 연결해 주는 역할을 하는 컴포넌트입니다. 페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 HTML5 History API 를 이용해 페이지의 주소만 변경해 준다.
ReactDOM으로 렌더를 시키게 되면 <Link>
컴포넌트는 <a>
태그로 바뀌는 모습을 볼 수 있다.
왜 <a>
태그를 사용하지 않고 <Link>
를 사용하냐면 <a>
태그는 페이지를 전환하는 과정에서 페이지를 불러오기 때문에 다시 처음부터 렌더링을 시킵니다. 즉, 새로고침 현상이 일어나게 된다.
하지만 <Link>
컴포넌트는 페이지 전환을 방지하는 기능이 내장되어 있기 때문에 SPA를 구현이 가능하다.
<BrowserRouter>
로 <Route>
컴포넌트를 이용하기 위한 환경을 세팅function App () {
return (
{/* Route 를 사용하기 위한 설정을 진행합니다 */}
<BrowserRouter>
<div>
<nav>
<ul>
<li>
Home
</li>
<li>
MyPage
</li>
<li>
Dashboard
</li>
</ul>
</nav>
</div>
</BrowserRouter>
)
}
export default App;
<Switch>
와 <Route>
로 주소 경로와 아까 만든 3개의 컴포넌트를 연결해 준다.<Route>
의 path 속성을 이용하여 경로를 작성하고, <Route>
태그 안에 연결하고자 하는 컴포넌트를 넣어준다.function App () {
return (
<BrowserRouter>
<div>
<nav>
<ul>
<li>
Home
</li>
<li>
MyPage
</li>
<li>
Dashboard
</li>
</ul>
</nav>
{/* 주소 경로와 우리가 아까 만든 3개의 컴포넌트를 연결해 줍니다. */}
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/mypage"> {/* 경로를 설정하고 */}
<MyPage /> {/* 컴포넌트를 연결합니다. */}
</Route>
<Route path="/dashboard">
<Dashboard />
</Route>
</Switch>
</div>
</BrowserRouter>
)
}
export default App;
위 코드를 보면 Home 컴포넌트 Route 에만 존재하는 exact라는 것을 볼수 있는데
React router의 특성상 exact
속성이 없으면 해당 경로(예시의 "/")로 시작하는 중복된 <Route>
컴포넌트를 모두 보여준다.
exact
는 주어진 경로와 정확히 일치해야만 설정한 <Route>
컴포넌트를 보여주는 역할을한다.
<Link>
의 to
속성을 활용하여 Route 컴포넌트에 설정해 준 path 주소를 연결해 준다.
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>
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/mypage">
<MyPage />
</Route>
<Route path="/dashboard">
<Dashboard />
</Route>
</Switch>
</div>
</BrowserRouter>
);
}
function Home() {
return <h1>Home</h1>;
}
function MyPage() {
return <h1>MyPage</h1>;
}
function Dashboard() {
return <h1>Dashboard</h1>;
}
export default App;