[React] today i learned 7/7: 중첩 라우터 사용

최근에 타입스크립트와 리액트를 활용한 슬랙 클론코딩 프로젝트 강의를 듣고 있다.

얼마전까지 로그인 및 회원가입 페이지를 만들어 보면서 axios를 통한 서버와의 API통신에 대해 이해하게 되었고, GitHub에서도 자주 보이는 Gravatar라는 귀여운 레트로 이모티콘도 사용해봤다.

 

7/7, 그러니까 어제는 본격적으로 워크스페이스를 만들기 시작했다. 리액트 라우터를 활용한 링크는 여러번 해봤으나 중첩 라우터는 해보지 않았다. 생각해본 적도 없지만, 막상 보니까 신기했다.

지금까지의 진행 상황

기본적으로 App 레이아웃의 index.tsx에서는, CRA에서의 일반적인 App.jsx처럼 리액트 라우터를 통해 여러 컴포넌트로 연결되는 형태의 구조를 갖고 있다. 아래는 리액트 라우터를 사용한 아주 기본적인 형태의 구조이다.

import React from 'react';
import { Switch, Route } from 'react-router-dom';

const App = () => {
  return (
    <Switch>
      <Route path="/login" component={Login} />
      <Route path="/signup" component={Signup] />
    </Switch>
  );
};

export default App;

그런데, 슬랙을 사용해봤던 사람들이라면 알겠지만 기본적으로 워크스페이스에 들어가면, 채널과 DM이 따로 있고 각 부분을 클릭했을 때 다른 페이지가 라우팅된다. 이런 방식을 가능하게 하는 것이 바로 중첩 라우팅이다.

import React, { FC } from 'react';
import loadable from '@loadable/component';
import { Switch, Route, Redirect } from 'react-router-dom';

const Login = loadable(() => import('@pages/Login'));
const Signup = loadable(() => import('@pages/Signup'));
const Workspace = loadable(() => import('@layouts/Workspace'));

const App: FC = () => {
  return (
    <Switch>
      <Redirect exact path="/" to="/login" />
      <Route path="/login" component={Login} />
      <Route path="/signup" component={Signup} />
      <Route path='/workspace' component={Workspace} />
    </Switch>
  );
};

export default App;

메인 index.tsx에서는 이렇게, Workspace path로 라우팅하는 Workspace 컴포넌트를 불러왔다. 그리고 이제 Workspace에서는..

import React, { FC } from 'react';
import loadable from '@loadable/component';
import { Redirect, Switch, Route } from 'react-router';
import {
  Header,
  RightMenu,
  ProfileImg,
  WorkspaceWrapper,
  Workspaces,
  Channels,
  Chats,
  WorkspaceName,
  MenuScroll,
  ProfileModal,
  LogOutButton,
} from '@layouts/Workspace/styles';

const Channel = loadable(() => import('@pages/Channel'));
const DirectMessage = loadable(() => import('@pages/DirectMessage'));

const Workspace: FC = ({ children }) => {
  return (
    <div>
      <WorkspaceWrapper>
        <Workspaces>test</Workspaces>
        <Channels>
          <WorkspaceName>Sleact</WorkspaceName>
          <MenuScroll>menu scroll</MenuScroll>
        </Channels>
        <Chats>
          <Switch>
            <Route path="/workspace/channel" component={Channel} />
            <Route path="/workspace/dm" component={DirectMessage} />
          </Switch>
        </Chats>
      </WorkspaceWrapper>
    </div>
  );
};

export default Workspace;

이게 Workspace 컴포넌트의 모든 부분은 아니다. 이 포스팅에서 중요하지 않은 부분들은 생략했고, 내가 말하고 싶은 부분만 넣었다. Switch 부분을 보면은, Workspace 컴포넌트 내부에서 또 다른 컴포넌트로 라우팅할 수 있게끔 되어있다. 이게 무엇을 뜻하냐면..

기본적으로 Login과 Signup은 App 컴포넌트에 종속되어있고, App 컴포넌트에서 라우팅 처리한 Workspace 컴포넌트에서 이 Channel과 DM을 라우팅하고 있는 것이다. 결국 App 컴포넌트에 종속되어있는 것은 동일하지만, 이 Channe과 DM의 경우에는 Workspace 내부에서 이뤄져야 하기 때문에 중첩된 라우터 처리를 해 줘서 <Route path="/workspace/OOO" component={OOO} /> 의 형태로 해줘야 한다. 즉 메인 라우터(App 컴포넌트)에서는 중첩할 Workspace만 등록을 해두고, Workspace 안에서 또 따로 처리를 해줘야 된다는 것이다.

 

이렇게 라우터 중첩 처리를 배웠는데, 이 부분도 실제로 서비스를 구현할 때 많이 쓰이겠구나.. 라는 생각이 들었다!