Header

html 태그 중에 header라는 태그가 있다. 이 태그는 웹사이트의 이름이나 nav 등이 있는 사이트의 상단에 위치한 UI를 위해 사용한다.

이 header의 경우 다른 페이지로 이동하더라도 그대로 있는 경우가 많다. 그런데 router를 활용할 때 모든 element에 같은 Header를 각각의 element에 따로 넣어두게 되면 코드의 중복이 많이 발생한다.

이런 경우를 방지하기 위해서 React Router에서 제공하는 기능이 Outlet이다.

Outlet

지난 포스팅에서 만들었던 라우터를 예시로 보자. path에 element가 따로 있고 children은 index가 true인 element가 따로 있다. routing을 할 path는 동일한데 보여줄 component는 다른 상황인데 왜 이렇게 만들어야 할까?

const router = createBrowserRouter([
    {
        path: "/student",
        element: <Root />,
        children: [
            { index: true, element: <Home /> },
            { path: "class/:classId", element: <Class /> },
            { path: "grade", element: <Grade /> },
        ],
    },
]);

Root component의 코드를 보자. 이번 포스팅의 주제인 Outlet을 여기에 써주면 된다. 다른 children component에도 랜더링될 Header(커스텀 component이다.)를 Outlet과 함께 써주면 된다.

이렇게 해두면 children component들이 랜더링 될 때에도 (index가 true인 Home을 포함해서) Header는 모든 children component 들이 랜더링 될때 그 상단에 랜더링 되고 그 아래에 children의 element에 정의된 component들이 랜더링 된다.

(참고로 Header 뿐만 아니라 Footer나 SideBar에도 적용할 수 있다.)

function Root() {
    return (
        <>
            <Header />
            <Outlet />
        </>
    );
}

굳이 Outlet을 사용해야할까?

굳이 Outlet과 children을 사용하지 않고 아래 코드와 같이 router를 만들면 안될까?

UI적으로는 아무런 문제가 없다. 하지만 아래와 같은 경우에 Header에서 Routing 기능을 사용할 수 없게 된다.

따라서 Header에서 Link 혹은 useNavigate 같은 기능을 사용하고자 하는 경우에는 Outlet을 활용해야 한다.

function App() {
    return (
        <>
            <Header />
            <RouterProvider router={router}>
                <Root />
            </RouterProvider>
        </>
    );
}