리액트 라우터 - 코드 리뷰

오늘은 같은 팀원이 작성한 리액트 라우터 설정을 코드 분석한다. 라우터는 정말 신기하다... 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>
  react-router-dom에는 <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을 실행하면 제대로 실행된다.