[React] useOutletContext로 props 전달

useOutletContext는 <Outlet /> 컴포넌트에 내장된 Hook으로 자식 컴포넌트에게 props를 전달할때 사용한다

라우터 설정

import { createBrowserRouter } from 'react-router-dom';

export default createBrowserRouter([
  {
    path: '',
    element: [<MainLayout />],
    errorElement: <ErrorPage />,
    children: [
      {
        path: '/home',
        element: <Home />,
      },
      {
        path: '/work',
        element: <WorkLayout />,
        children: [
          { path: '', element: <WorkList /> },
          { path: ':workId', element: <WorkDetail /> },
        ],
      },
    ],
  },
]);

레이아웃이 다른 페이지들이 있다

WorkLayout에서 하위 컴포넌트에 props를 보내보자

props.tsx

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

function WorkLayout() {
    const [workList, setWorkList] = useState<workListItem[]>([]);
    return (
        <>
        	<Outlet context={{ workList }} />
        </>
    );
}

export default WorkLayout;

WorkList

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

function WorkList() {
    const [workList, setWorkList] = useOutletContext<workListItem[]>([]);
    return (
        <div>
            {workList?.map((item, index) => (
                <p key={index}>
                	{item}
                </p>
            ))}
        </div>
    );
}
export default WorkList;