Outlet context로 props 전달하기

📋 Outlet Context

중첩 라우팅 구현시 사용하는 Outlet에서 렌더링될 하위 컴포넌트에 props를 전달할 수 있다.

아래의 라우터 구조를 갖고 설명해보자.

• Router.tsx

<BrowserRouter>
    <Routes>
    <Route path="/" element={<Home /> } />
      <Route path="/:coinId/*" element={<Coin /> } >
        {/* 중첩 라우팅  */}
  		<Route path="price" element={<Price /> } />
	    <Route path="chart" element={<Chart /> } />
      </Route>
  </Routes>
</BrowserRouter>

• Coin.tsx

<Outlet context={{coinId}}/>

위 코드를 보면 Price, Chart 컴포넌트는 중첩 라우터임을 알 수 있다.

부모 컴포넌트 내부에 Outlet을 통해 자식 컴포넌트의 위치를 지정할 수 있는 것이다.

이 때 context를 사용했는데, 이는 자식 컴포넌트에게 props를 전달하는 개념이다.

Link의 state와 같은 개념이라는 생각이 든다.

그렇다면 부모 컴포넌트의 Outlet에서 전달한 context의 props에 접근하려면 어떻게 해야할까?

useOutletContext hook을 사용하면 된다.

사용법은 아래와 같다.

• Chart.tsx

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

interface ChartPropsItfc {
    coinId : string;
}

const {coinId} = useOutletContext() as ChartPropsItfc;

타입스크립트 환경에서 사용하고 있다면 전달받은 props의 타입을 무조건 지정해주도록 하자.

참고

useOutletContext 공식문서