TC - 14번일지 (Layout Route)

지난시간에 라우트를 설정하고 각 라우트별로 원하는 컴포넌트를 렌더링 되게 진행해보았다. 그런데 이제 원하는 컴포넌트를 렌더링 했으나 다른 컴포넌트들과 레이아웃되어서 렌더링 되지도 않고, 원래 동작하던 기능들도 동작하지 않는 문제점이 생겼다.

그래서 그걸 해결하는 방법이 레이아웃 라우트라고 했었다.

20. Layout Route

기본적으로 Layout Route 형태는 내부에 다른 라우트를 품고 있다.

1. Layout Route 추가.

• Layout Route를 추가하려면 마찬가지로 createBrowserRouter배열안에 라우트를 추가로 정의해야 한다. 그리고 이 라우트는 경로에 상관없이 모든 라우트를 래핑한다.

2. children 속성

• 배열을 값으로 받는 이 라우트 객체 속성은 레이아웃 라우트를 사용하기 위해서 추가해야한다. 그리고 이 배열안에는 다른 라우트를 정의한 객체를 넣는다.
• 기존에 있던 라우트 2개를 이 배열 안으로 옮긴다.

✍ main.jsx

import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider, createBrowserRouter } from "react-router-dom";

import App from "./App";
import NewPost from "./components/NewPost";
import RootLayout from "./routes/RootLayout";
import "./index.css";

const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    chlidren: [
      {
        path: "/",
        element: <App />,
      },
      {
        path: "/create-post",
        element: <NewPost />,
      },
    ],
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

이 두 라우트는 이제 바깥에 있는 라우트에 중첩되어 있기 때문에 RootLayout 라우트가 제공하는 레이아웃을 공유하게 된다.

3. RootLayout

RootLayout안을 살펴보면 mainheader 컴포넌트 하나만 있다. 왜냐하면 앞으로 어떤 라우트들을 설정하던지 간에, 어떤 컴포넌트가 렌더링 되던지간에 제일 상단에 있는 메인 헤더는 가장 아랫단에 위치해야하기 떄문이다.

다시 말해서 레이아웃 라우트라는 건 다른 라우트들을 감싸는 라우트이기 때문에 MainHeader는 공유되고 다른 라우트가 가진 콘텐츠는 MainHeader 밑에 렌더링될것이다.

✍ RootLayout.jsx

import MainHeader from "../components/MainHeader";

function RootLayout() {
  return (
    <>
      <MainHeader />
    </>
  );
}

export default RootLayout;

4. 문제발생

저장후 실행해서 화면을 살펴보면 헤더는 나오지만 다른 기능들은 여전히 동작을 하지 않고 있다.
콘텐츠가 나오지 않는 이유는 MainHeader 컴포넌트를 공유하고 있긴 하지만 리액트 라우터에게 중첩된 라우트의 콘텐츠를 렌더링할 위치를 알려주지 않았기 때문이다. 다시말해서 children으로 감싼 라우터들을 표시할 위치를 알려줘야한다.

5. 해결방법 - Outlet

Outlet 컴포넌트 추가 (가장 아랫단에 쓰인 레이아웃 라우터에)

✍ RootLayout.jsx

import { Outlet } from "react-router-dom";

import MainHeader from "../components/MainHeader";

function RootLayout() {
  return (
    <>
      <MainHeader />
      <Outlet />
    </>
  );
}
export default RootLayout;

리액트가 제공하는 특별한 컴포넌트인데, 중첩된 라우트가 가진 실제 콘텐츠가 렌더링 되고 삽입되어야 할 위치에 사용한다. 그러니까 여기선
RootLayout에서 이 컴포넌트를 사용해 중첩 라우트의 콘텐츠를 렌더링할 위치를 표시한다.

• 그리고 저장해보면 헤더가 두개인데 App.js에서 사용되던 헤더 부분 지워준다.