오늘은 같은 팀원이 작성한 리액트 라우터 설정을 코드 분석한다. 라우터는 정말 신기하다... SPA를 구현할 때 라우터를 사용하지 않는다면 어떻게 될까?
프로그램에서 라우팅(Routing)은 데이터를 최적의 길로 이끄는 작업을 말한다. 리액트 라우터의 기능도 이와 비슷하다. 화면이 변화하는 지점(기존 MPA에서는 html 파일이 변환되는 시점)에 각 해당하는 파일 링크를 걸어 경로를 새로 만들어준다. 위 경우에서는 메인 목차를 누르면 목차마다 다른 콘텐츠가 나타나며 url도 다르게 표시된다.
// src/index.jsx
import React from "react";
import { BrowserRouter } from 'react-router-dom';
import ReactDOM from "react-dom";
import App from "./App.jsx";
ReactDOM.render(<BrowserRouter>
<App />
</BrowserRouter>, document.getElementById("app"));
<BrowserRouter>
<BrowserRouter>
과 <HashRouter>
두 종류가 있다. <BrowserRouter>
는 HTML5의 history API를 이용하여 UI를 업데이트하며, <HashRouter>
는 URL의 해시를 활용한 라우터이다. 보통 request와 response가 이뤄지는 동적인 페이지를 작성하므로 <BrowserRouter>
를 일반적으로 사용한다.// src/App.jsx
import React from 'react';
import { Route, Switch, Link } from 'react-router-dom';
import { Main, Login, Mypage } from './pages';
import { StudyApply, StudyCreate, StudyDetail } from './pages/study';
import { ProjectApply, ProjectCreate, ProjectDetail } from './pages/project';
import WrapContent from './content.jsx';
import './style.scss';
const App = () => {
return (
<>
<header>
{/* 예시 */}
<Link to='/' className='nav-link'>메인</Link>
<Link to='/mypage' className='nav-link'>마이페이지</Link>
<Link to='/login' className='nav-link'>로그인</Link>
<Link to='/studyApply' className='nav-link'>스터디 신청</Link>
<Link to='/studyCreate' className='nav-link'>스터디 생성</Link>
<Link to='/studyDetail' className='nav-link'>스터디 조회</Link>
<Link to='/projectApply' className='nav-link'>프로젝트 신청</Link>
<Link to='/projectCreate' className='nav-link'>프로젝트 생성</Link>
<Link to='/projectDetail' className='nav-link'>프로젝트 조회</Link>
</header>
<div id="content">
<WrapContent>
<Switch>
<Route path="/login" component={Login} />
<Route path="/mypage" component={Mypage} />
<Route path="/studyApply" component={StudyApply} />
<Route path="/studyCreate" component={StudyCreate} />
<Route path="/studyDetail" component={StudyDetail} />
<Route path="/projectApply" component={ProjectApply} />
<Route path="/projectCreate" component={ProjectCreate} />
<Route path="/projectDetail" component={ProjectDetail} />
<Route exact path="/" component={Main} />
</Switch>
</WrapContent>
</div>
<footer>Footer</footer>
</>
);
};
export default App;
<Link to="경로">
: URL을 지정해주는 역할을 한다.<Switch>
: Route 태그들이 꼬이지 않게 조절해주는 역할을 한다.<Route path="경로" component={컴포넌트}>
: 해당 경로일 때 보여줄 컴포넌트를 지정한다.앞 포스팅에서 살펴봤던 라우터의 기본적인 구성과 비슷하다. 다만, 여러 파일로 나눠져 있어서 구조를 파악하기가 조금 어렵다. src 폴더 밑에는 pages 폴더가 있고 그 밑에는 study, project 등이 존재한다. 각각에는 index.js 파일이 존재한다. (해당 파일에는 외부로 export하는 코드가 적혀있다.) 이들은 yarn build를 통해 합쳐지고(->이 과정을 세부적으로 알지 못한다.) dist 밑에 있는 index.html을 실행하면 제대로 실행된다.