[React] useOutletContext

<Outlet> 요소에 props 전달하기

<Outlet>

react-router-dom을 사용하면 부모 경로 요소에서 자식 경로 요소를 렌더링하기 위해서 <Outlet>을 사용한다. 공식 문서의 예제로 설명하자면, / 이후의 하위 경로에 따라서 <Outlet> 위치에 <DashboardMessages> 또는 <DashboardTasks>가 렌더링 된다.

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>
  );
}

useOutletContext

이 때, 부모/자식 간 공유하려는 상태 또는 데이터가 있다면, <Outlet>에 내장되어 있는 context props를 통해서 간단하게 전달할 수 있다.

부모 요소에서는 context로 전달하고, 자식 요소에서는 useOutletContext() 훅으로 전달 받으면 된다.

function Parent() {
  const [count, setCount] = React.useState(0);
  return <Outlet context={[count, setCount]} />;
  
  // 객체 형태로 전달도 가능
  // return <Outlet context={{count}} />;
}

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

function Child() {
  const [count, setCount] = useOutletContext();
  // const {count} = useOutletContext();
  
  const increment = () => setCount((c) => c + 1);
  return <button onClick={increment}>{count}</button>;
}