[React+Typescript] Layout Component(with. react-router-dom v6)

• 자세한 설명보다는 구현 방법의 주심을 두었습니다.

이번 포스트는 Layout Component입니다.
이번 Layout Component 또한 지난 번 Private Route와 거의 같은 원리로 작동한다고 생각이 되며, Router를 사용하는 방법의 응용?! 이라고 개인적으로 생각 합니다.

제가 Layout Component를 사용해야 했던 이유!

• Header와 Footer의 영역에 경우 많은 화면에서 공통 적으로 사용되기 때문에 공통 적으로 사용되는 모든 페이지에서 Header와 Footer를 넣어주기 번거로웠다.
• Layout Component를 만들고 거기에 Header와 Footer를 고정 삽입해주며, Content영역에 내가 보여주고 싶은 페이지를 넣어주고 싶었다.
  

그러면 간단한 예제를 보겠습니다.

layouts/index.tsx

import Header from './header'
import Footer from './footer'
import { Outlet } from 'react-router'
import { LayoutDefaultProps } from '@types'

/**
 * interface LayoutDefaultProps {
 * children ?: React.ReactElement;
 *}
 */

export default function DefaultLayout({children}:LayoutDefaultProps) {
  return (
    <div>
      {/* 해당 layout에서 공통으로 사용되는 Header를 선언해준다. */}
      <Header/>
        {/* Content 영역 */}
        <main>
          {/* children이 있을경우는 children을 없을 경우에는 Outlet을 나타내준다 */}
          {children || <Outlet/>}
        </main>
      {/* 해당 layout에서 공통으로 사용되는 Footer를 선언해준다. */}
      <Footer/>
    </div>
  )
}

layouts/header/index.tsx

/**
 * 기본 Header
 */
export default function DefaultHeader() {
  return (
    <header>
      <div>기본 Header 영역</div>
    </header>
  )
}

layouts/footer/index.tsx

해당 Footer에서는 기본적인 표시만 있습니다.

export default function DefaultFooter() {
  return (
    <footer>
      기본 Footer 영역
    </footer>
  );
}

pages/index.tsx

export default function MainPage() {
  return (
    <>
      <h1>Main Page</h1>
    </>
  );
}

routes/index.tsx

여기서 KeyPoint는 어떨때 Outlet으로 삽입되고 어떨때 children으로 삽입되는지인듯하다.

import {BrowserRouter, Routes, Route} from 'react-router-dom';
import MainPage from '../pages';

import DefaultLayout from 'layouts';

export default function Router() {
  return (
    <BrowserRouter>
      <Routes>
        {/* case1. MainPage Component가 DefaultLayout Cmoponent의 <Outlet/>로 삽입된다.(children값은 undefined) */}
        <Route element={<DefaultLayout/>}>
          <Route index element={<MainPage/>}/>
        </Route>
        {/* case2. MainPage Component가 DefaultLayout Componet의 children으로 삽입된다.*/}
        <Route path="/main" element={<DefaultLayout><MainPage/></DefaultLayout>}/>
      </Routes>
    </BrowserRouter>
  )
}

결과 화면

간단하게 예제를 만들어 보았다.

역시나 제가 구현 방식은 Private Route 구현 방식과 거의 같다고 해도 무방할것 같다.

GitHub : https://github.com/anonymous-planets/anonymous-planet-react