[React] Outlet 사용하여 특정 컴포넌트에서만 Header / Footer 설정

프로젝트를 진행하다 보니, 로그인과 회원가입 페이지에서는 굳이 Header과 Footer을 보여주지 않는 편이 깔끔해보이고 좋을 것 같다는 말씀을 해주셔서 찾아보니, React-router-dom에 "Outlet"이라는 것을 알게 되었다.

우선 MainLayout.js라는 이름으로 Outlet을 사용하여 아래처럼 코드를 작성해주었다.

import { Outlet } from "react-router-dom";
import { Header } from "./components/Header";
import { Footer } from "./components/Footer";

const MainLayout = () => {
  return (
    <>
      <Header />
      <Outlet />
      <Footer />
    </>
  );
};

export default MainLayout;

그리고 다시 Router.js로 돌아가서 <Route element={<MainLayout />}> 안으로 Header과 Footer을 보여주고 싶은 컴포넌트를 넣어주는 식의 중첩 라우팅을 사용하였다.

import { HashRouter, Route, Routes } from "react-router-dom";
import { routes } from "./routes";
import { Main } from "./pages/main/Main";
import { Join } from "./pages/account/Join";
import { Login } from "./pages/account/Login";
import { PageNotFound } from "./pages/404/PageNotFound";
import MainLayout from "./MainLayout";

function Router() {
  return (
    <HashRouter>
      <Routes>
        {/* Header, Footer를 보여주고싶은 컴포넌트 */}
        <Route element={<MainLayout />}>
          <Route path={routes.main} element={<Main />} />
          <Route path="/*" element={<PageNotFound />} />
        </Route>
        {/* Header, Footer를 보여주고 싶지 않은 컴포넌트 */}
        <Route path={routes.join} element={<Join />} />
        <Route path={routes.login} element={<Login />} />
      </Routes>
    </HashRouter>
  );
}

export default Router;