[React] outlet을 이용한 쉬운 레이아웃 교체

🔰 리액트 라우터 v6 버전에서 중첩 라우팅을 이용하면 부모 레이아웃은 그대로 두고 자식 레이아웃만 쉽게 교체할 수 있다.

 

✅  중첩 라우팅

v6에서 중첩 라우팅이 컴포넌트의 children과 같은 개념으로 중첩이 가능해졌고, 더 직관적으로 변했다.

만약, member 와 member/:memberId 페이지가 있다고 한다면, 이전에는 각각 한줄씩 차지하였는데,

v6에서는 member 라우트 하위에 :memberId 가 포함된 Route를 추가하면 중첩 라우팅이 된다.

하위에 있으면 자동으로 / 로 구분되기 떄문에 추가적인 / 를 path에 추가할 필요가 없어졌다.

 

//v5
<Switch>
  <Route path="/member" />
  <Route path="/member/:memberId" />
</Switch>

//v6
<Routes>
  <Route path="/member">
    <Route path=":memberId" /> // /member/:memberId
  </Route>
</Routes>

 

✅  레이아웃

중첩 라우팅을 위처럼 구성하고 나면 Outlet을 통해서 상위 컴포넌트를 레이아웃화 할 수 있게 되었다.

실제로 예제를 통해 확인해보자.

 

 

[index.js]

"/"라는 path를 가지면 App1 컴포넌트가 실행되고 App1의 자식 컴포넌트는 First, Second, Third가 있다.

마찬가지로 "/app2" 라는 path를 가지면 App2 컴포넌트가 실행되고 App2의 자식 컴포넌트는 First, Second, Third가 있다.

import React from "react";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import App1 from "./App1";
import App2 from "./App2";
import First from "./First";
import NotFound from "./NotFound";
import Second from "./Second";
import Third from "./Third";

const router = createBrowserRouter([
  {
    path: "/",
    element: <App1 />,
    errorElement: <NotFound />,
    children: [
      { index: true, element: <First /> },
      { path: "second", element: <Second /> },
      { path: "third", element: <Third /> },
    ],
  },
  {
    path: "/app2",
    element: <App2 />,
    errorElement: <NotFound />,
    children: [
      { index: true, element: <First /> },
      { path: "second", element: <Second /> },
      { path: "third", element: <Third /> },
    ],
  },
]);

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

 

 

[App1.js]

App1에서 Outlet을 통해 자식 컴포넌트를 레이아웃화 하고 있다.

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

function App1() {
  return (
    <div>
      <h1>This is App1 Header</h1>
      <Outlet />
      <h2>This is App1 Footer</h2>
    </div>
  );
}

export default App1;

 

[App2.js]

App2 또한 Outlet을 통해 자식 컴포넌트를 레이아웃화 하고 있다.

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

function App2() {
  return (
    <div>
      <h1>This is App2 Header</h1>
      <Outlet />
      <h2>This is App2 Footer</h2>
    </div>
  );
}

export default App2;

 

[First, Second, Third.js]

function First() {
  return <div className="First">Hello world First</div>;
}

export default First;

function Second() {
  return <div className="Second">Hello world Second</div>;
}

export default Second;

function Third() {
  return <div className="Third">Hello world Third</div>;
}

export default Third;

 

 

✅  결과화면

중첩 라우팅을 위처럼 구성하고 나면 Outlet을 통해서 상위 컴포넌트를 레이아웃화 할 수 있게 되었다.

실제로 예제를 통해 확인해보자.

 

아래는 App1과 App2의 컴포넌트가 중첩 라우팅을 이루고 있으며 서로 Outlet 을 통해 자식 컴포넌트를 표현하고있다.

http://localhost:3000/

 

http://localhost:3000/second

http://localhost:3000/third

 

---

 

http://localhost:3000/app2

 

http://localhost:3000/app2/second

http://localhost:3000/app2/third