리액트 중첩 라우팅

리액트 중첩 라우팅에 대해 알아보자.

기존에 리액트 프로젝트를 사용할때는 중첩되지 않고 모든 라우트가 같은 수준으로 나열되어있고, 추가적으로 동적으로 컴포넌트를 랜더링 하기 위해서는 state여부에 따라 랜더링될 수 있도록 만들었다.

하지만 이는 단점이 있다. 해당 url에 진입 시 내가 원하는 컴포넌트가 랜더링된 채로 진입하기가 힘들다.(물론 url에 쿼리서트링으로 값을 넘겨받아서 해당 값을 통해 state를 변경하고 해당 값에 따라 컴포넌트를 랜더링 해주면 되긴 하지만 번거롭다.)

또한 state에 따라 동적으로 랜더링 해주는게 1개가 아니라 여러개가 되면 코드가 복잡해진다.

이런 경우 리액트 중첩 라우팅을 사용하면 보다 간단하고 직관적으로 만들 수 있다.

/**
 * src/routes/MainRoute.tsx
 */

import { Routes, Route } from 'react-router-dom';
import App from '@/App';
import HomeRoute from '@routes/HomeRoute';

const MainRoutes = () => (
  <Routes>
    <Route path="/" element={<App />} />
    <Route path="/home/*" element={<HomeRoute />} />
  </Routes>
);

export default MainRoutes;

/**
 * src/routes/HomeRoute.tsx
 */

import { Routes, Route } from 'react-router-dom';
import Home from '@pages/home/Home';
import SecondHome from '@pages/home/SecondHome';
import FirstHome from '@pages/home/FirstHome';
import HomeUser from '@pages/home/HomeUser';

const HomeRoute = () => (
  <Routes>
    <Route path="/" element={<Home />}>
      <Route index element={<FirstHome />} />
      <Route path="firsthome" element={<FirstHome />} />
      <Route path="secondhome" element={<SecondHome />} />
    </Route>
    <Route path="/homeuser" element={<HomeUser />} />
  </Routes>
);
export default HomeRoute;

route는 업무 메뉴별로 나누는게 좋다고 생각해서 MainRoute는 업무 메뉴별 route 정의를 해주고, HomeRoute 안에서 Home메뉴에 대한 route 정의를 해주었다.

/home 경로는 Home 컴포넌트를 랜더링 하고 그 안에 중첩된 Route를 /home의 하위 경로에 따라 랜더링 해준다.

/home, /home/firsthome 경로는 Home 컴포넌트와 FirstHome 컴포넌트를 랜더링 해준다.
/home/secondhome 경로는 Home 컴포넌트와 SecondHome 컴포넌트를 랜더링 해준다.

Home 컴포넌트 내에 중첩된 라우트에 정의된 컴포넌트가 랜더링 될 위치는 Outlet 컴포넌트로 위치를 정의 해준다.

/**
 * src/pages/home/Home.tsx
 */

import { Link, Outlet, useNavigate } from 'react-router-dom';

const Home = () => {
  console.log('Home component!!!');
  const navigate = useNavigate();

  const goToFirstHome = () => {
    navigate('/home/firsthome');
  };
  return (
    <>
      <h1>Home Component</h1>

      <Link to="/home/firsthome">
        <button>go to firsthome</button>
      </Link>
      <Link to="/home/secondhome">
        <button>go to secondhome</button>
      </Link>

      <button onClick={goToFirstHome}>Go to First Home</button>

      <Outlet />
    </>
  );
};

export default Home;

중첩된 라우팅 안에 있는 컴포넌트는 Outlet 컴포넌트 자리에 생성이 된다.

이와같은건 탭으로 동적으로 랜더링 하는 구조의 화면에서도 유용하다.