Skip to main content

realworld를 이용하여 react app 만들기 - Step2: Route

· 5 min read

이번에는 realword API 문서에서 Frontend Specs > Routing Guidelines에 따라서 기본적인 라우팅 정의를 하여 dummy page를 만들어 보려고 한다.

해당 문서를 보면 아래와 같은 라우팅을 생성하도록 가이드 하고 있다.

  • Home page (URL: /#/ )
    • List of tags
    • List of articles pulled from either Feed, Global, or by Tag
    • Pagination for list of articles
  • Sign in/Sign up pages (URL: /#/login, /#/register )
    • Uses JWT (store the token in localStorage)
    • Authentication can be easily switched to session/cookie based
  • Settings page (URL: /#/settings )
  • Editor page to create/edit articles (URL: /#/editor, /#/editor/article-slug-here )
  • Article page (URL: /#/article/article-slug-here )
    • Delete article button (only shown to article's author)
    • Render markdown from server client side
    • Comments section at bottom of page
    • Delete comment button (only shown to comment's author)
  • Profile page (URL: /#/profile/:username, /#/profile/:username/favorites )
    • Show basic user info
    • List of articles populated from author's created articles or author's favorited articles

Install React-router​

react-router를 설치한다.

npm install react-router-dom

나는 react-router 6를 사용해보기 위해 react-router-dom@next 로 설치를 진행하였다.

Create the Dummy Page Component​

각 라우팅에 대응되는 화면 단위에 해당하는 컴포너트를 아래와 같은 예시와 같이 생성해주었다.

// src/pages/Home/index.tsx
import React from 'react';

export default function Home() {
  return <>HOME</>;
}

Define the route constants​

각 화면의 라우팅 정의를 constant.tx 파일을 생성하여 정의해주었다. 이렇게 정의하면 각 주소에 대한 값을 링크 정의 등에 필요한 경우 항상 동일한 값을 사용하게 할 수 있어 라우팅 주소 변경 또는 삭제 시에 관련하여 사용하고 있는 곳에서 놓치지 않고 반영해줄 수 있는 장점이 있는 것 같다.

// src/constants/index.tx
export const ROUTES = {
  HOME: '/',
  LOGIN: '/login',
  REGISTER: '/register',
  SETTING: '/settings',
  EDIT: '/editor',
  ARTICLE: '/article',
  PROFILE: '/profile',
};

Create the Routes Component​

각 화면에 대한 라우팅을 매칭해주기 위해 Routes.tsx 파일을 생성하여 아래와 같이 정의하였다. 메인 라우팅 경로에 대해서만 해당 파일에 정의를 해주었다.

github-actions을 이용하여 CI/CD 구성 후에 gh-pages 배포를 위해 HashRouter 로 정의하였다. (일전에 BrowserRouter로 해보았는데, SPA인 경우 경로를 찾도록 하려면 추가적인 조치가 필요했던 기억이 있어서 HashRouter로...)

// src/pages/index.tsx
import React from 'react';
import { HashRouter as Router, Routes, Route } from 'react-router-dom';

import { ROUTES } from '../constants';

import Home from './Home';
import Login from './Login';
import Settings from './Settings';
import Editor from './Editor';
import Article from './Article';
import Profile from './Profile';

export default function PageRoutes() {
  return (
    <Router>
      <Routes>
        <Route path={ROUTES.PROFILE} element={<Profile />} />
        <Route path={ROUTES.ARTICLE} element={<Article />} />
        <Route path={ROUTES.EDITOR} element={<Editor />} />
        <Route path={ROUTES.SETTING} element={<Settings />} />
        {/* 기존에는 `path`에 array로 정의가 가능했는데 React-router 6 에선 타입 에러가 발생한다. ㅠㅠ */}
        <Route path={ROUTES.LOGIN} element={<Login />} />
        <Route path={ROUTES.REGISTER} element={<Login />} />
        <Route path={ROUTES.HOME} element={<Home />} />
      </Routes>
    </Router>
  );
}

정의한 Routes 컴포넌트를 App 컴포넌트에 주입해준다.

// src/App.tsx
import React from 'react';

import PageRoutes from './pages';

export default function App() {
  return <PageRoutes />;
}

이제 정의한 라우팅 주소를 올바르게 찾아가는 지 확인해보기 위해서 서버를 기동해서 각 정의한 라우팅 주소에 대하여 올바르게 호출이 되는 지 확인해본다.