1. <Outlet>이란?
react-router-dom에서Outlet은 라우터의 중첩 경로에서 중첩된 라우트를 렌더링하기 위해 사용되는 컴포넌트입니다.- 라우트 설정에서 해당하는 경로를 찾아 매칭된 중첩된 라우트 컴포넌트를 렌더링합니다.
- 예시
function Dashboard() {
return (
<div>
<h1>Dashboard</h1>
{/* This element will render either <DashboardMessages> when the URL is
"/messages", <DashboardTasks> at "/tasks", or null if it is "/"
*/}
<Outlet />
</div>
);
}
function App() {
return (
<Routes>
<Route path="/" element={<Dashboard />}>
<Route
path="messages"
element={<DashboardMessages />}
/>
<Route path="tasks" element={<DashboardTasks />} />
</Route>
</Routes>
);
}- 위 코드에서
App컴포넌트에서는Route컴포넌트를 사용하여 "/" 경로에 대한 라우트 설정을 정의하고 있습니다. 이때Dashboard컴포넌트 내부에서 Outlet 컴포넌트를 사용하여 중첩된 하위 라우트를 렌더링합니다. - 중첩된 라우트
/경로에 접근하면Dashboard컴포넌트가 렌더링되고,/messages경로에 접근하면DashboardMessages컴포넌트가 렌더링되며,/tasks경로에 접근하면DashboardTasks컴포넌트가 렌더링됩니다. 이를 통해 여러 개의 컴포넌트를 하나의 라우트 설정으로 관리할 수 있습니다.
<Outlet>Dashboard컴포넌트는 중첩된 라우트를 렌더링하는 용도로,Outlet컴포넌트를 사용하여 중첩된 하위 라우트 컴포넌트도 렌더링할 수 있게 해줍니다.Outlet컴포넌트 위치에/messages경로와/tasks경로에 대한 라우트 컴포넌트가 렌더링됩니다.
2. <Outlet>이 렌더링되는 방식
- 아래는 route 객체와 path의 매칭작업과 관련된 소스코드입니다.
export function _renderMatches(
matches: RouteMatch[] | null,
parentMatches: RouteMatch[] = []
): React.ReactElement | null {
if (matches == null) return null;
return matches.reduceRight((outlet, match, index) => {
return (
<RouteContext.Provider
children={
match.route.element !== undefined ? match.route.element : outlet
}
value={{
outlet,
matches: parentMatches.concat(matches.slice(0, index + 1)),
}}
/>
);
}, null as React.ReactElement | null);
}
- 함수의
RouteContext.Provider는 value 프로퍼티로outlet과parentMatches를 제공합니다.outlet은 현재 렌더링된 match 객체 이전의 모든 matches 배열의 컴포넌트를 담고 있습니다.parentMatches는 이전 라우트 매칭과 현재 라우트 매칭을 합친 배열을 가지고 있습니다. outlet프로퍼티는 라우터가 렌더링하는 컴포넌트가 들어갈 위치를 나타냅니다. 이 위치는 일반적으로 Route 컴포넌트에서 설정한 path 프로퍼티에 대응하는 요소입니다.outlet프로퍼티에 렌더링된 컴포넌트는RouterContext.Provider를 렌더링한 상위 컴포넌트의 자식 요소로 추가됩니다.parentMatches는 이전에 매칭된 라우트와 현재 매칭된 라우트를 모두 포함하는 RouteMatch 객체의 배열으로, 라우팅 중에 사용될 수 있는 정보를 제공합니다parentMatches는RouterContext.Provider의 value 프로퍼티에 전달되며, matches 배열의 현재 매칭된RouteMatch객체와 합쳐져 하위 컴포넌트에 전달됩니다. 이렇게 함으로써 하위 컴포넌트에서는 현재 라우트와 상위 라우트에 대한 정보를 모두 알 수 있게 됩니다.
3. <Outlet>의 장점
- 코드의 재사용성: 중첩된 라우트를 사용하면 하나의 라우트 설정에서 여러 컴포넌트를 렌더링할 수 있습니다. 이는 코드의 재사용성을 향상시키며, 코드량을 줄일 수 있습니다.
- 유지보수성: 중첩된 라우트를 사용하면 코드의 유지보수성이 향상됩니다. 여러 개의 컴포넌트를 하나의 라우트 설정으로 관리할 수 있으며, 이는 코드의 가독성을 향상시키고 버그를 예방하는 데 도움이 됩니다.
- 페이지 로딩 속도 개선: "Outlet" 컴포넌트는 중첩된 라우트 컴포넌트를 렌더링하므로, 여러 페이지에서 공통으로 사용되는 컴포넌트를 한 번만 로딩할 수 있습니다. 이는 페이지 로딩 속도를 개선하는 데 도움이 됩니다.
- 유연한 라우팅: 중첩된 라우트를 사용하면 여러 레벨의 경로를 정의할 수 있으므로, 더 복잡한 라우팅이 가능해집니다. 이는 앱의 유연성을 향상시키는 데 도움이 됩니다.
- 앱의 일관성: 중첩된 라우트를 사용하면 앱의 일관성을 유지할 수 있습니다. 여러 페이지에서 공통으로 사용되는 레이아웃이나 컴포넌트를 쉽게 관리할 수 있으며, 이는 앱의 일관성을 향상시키는 데 도움이 됩니다.
Referenct
job's done