React Router로 중첩 라우팅 하기

🚩 목표

💡 시작하기

• 프로필과 tab bar는 같고 tab에 따라 그려지는 컴포넌트가 다른 구조.

• 프로필과 tab bar를 WorkshopHeader로 정의하고 tab을 누를 때 다시 렌더되지 않도록 만들 예정.
• 특히 각각의 tab은 api 통신을 하기 때문에 해당 tab을 누를 때 통신 하는 것이 UX를 향상시킬 수 있음.

🔸 구현

import styled from '@emotion/styled';
import { Switch, Route } from 'react-router-dom';
import WorkshopHeader from './WorkshopHeader';
import { SettingPage, ReviewListPage, FeedListPage, ProductsListPage, EditPage } from '.';
import { WORKSHOP, PRODUCTSLIST, REVIEWLIST, SETTING, EDIT } from '.';
const WorkshopPage = () => {
  const canShowHeader = () => {
    const path = window.location.pathname;
    return path === `${WORKSHOP}` || path === `${PRODUCTSLIST}` || path === `${REVIEWLIST}`;
  };
  const isFeed = () => {
    const path = window.location.pathname;
    return path === `${WORKSHOP}`;
  };
  return (
    <WorkshopContainer>
      {canShowHeader() && <WorkshopHeader />}
      {isFeed() && <FeedListPage />}
      <Switch>
        <Route path={PRODUCTSLIST}>
          <ProductsListPage />
        </Route>
        <Route path={REVIEWLIST}>
          <ReviewListPage />
        </Route>
        <Route path={SETTING}>
          <SettingPage />
        </Route>
        <Route path={EDIT}>
          <EditPage />
        </Route>
      </Switch>
    </WorkshopContainer>
  );
};
export default WorkshopPage;

const WorkshopContainer = styled.div`
  margin-top: 36px;
`;

중첩 라우팅

• 중첩 라우팅(Nested Routing)이란 라우팅 맵핑을 최상위 컴포넌트 뿐만 아니라 여러 개의 컴포넌트에 걸쳐서 단계별로 정의하는 라우팅 기법.

• 루트에 있는 router 파일에서 경로를 지정하는 것이 아닌 Switch 함수를 사용하여 path와 일치할 때 어떤 컴포넌트를 보여줄지 지정함.
• Switch - 자식 컴포넌트 Route또는 Redirect중 매치되는 첫 번째 요소를 렌더링함. Switch를 사용하면 BrowserRouter만 사용할 때와 다르게 하나의 매칭되는 요소만 렌더링한다는 점을 보장함.
• React-router 특성 상 path에 exact처리를 해주지 않으면 중복되는 링크의 컴포넌트를 모두 보여줌. 하지만 <Switch>로 감싸진 요소들은 링크와 매칭되는 첫번째 라우트만 보여주고 나머지는 보여주지 않기 때문에 이를 방지함.

그 외 신경쓴 점

• 경로는 변수로 index에서 import 할 수 있도록 함. 다른 컴포넌트에서도 쓰이기 때문.

🔹 결과

• WorkshopHeader가 Tab을 변경하여도 다시 렌더링 되지 않음.

• 루트에 있는 router 파일에선 workshop만 볼 수 있음.

🤔 미해결

• Tab bar로 이동할 수 있는 페이지 외 환경설정 등 WorkshopHeader가 보이면 안되는 곳에 대한 처리가 어려움.

• 그렇기 때문에 canShowHeader, isFeed등으로 WorkshopHeader가 필요한 부분에 링크를 일일히 적어주어야 함.

• 재렌더링이 되지 않는다는 점은 장점이나 내부 로직이 짜임새있진 않음.

🥲 놓쳤던 점

• react는 가상 dom을 다시 그릴 때 일치하는 컴포넌트는 다시 그린다.

• 따라서 재사용이 필요한 곳에 무조건 해당 컴포넌트를 다시 부르는 방식도 괜찮다.

• 또한 리액트 쿼리 등 재랜더링을 방지하는 훅도 있기 때문에 신경을 덜 써도 된다.