[React - 12] useOutletContext

<Outlet /> 컴포넌트를 먼저 알아야 이해가 되는 내용입니다.

https://white120.tistory.com/83

[React - 11] Outlet

---

라우터에서도 state 값이나 일반 값을 전달할 수 있습니다.

원하는 경우 context provider를 만들 수 있지만 Outlet에 기본 제공되는 context 속성을 사용할 수 있습니다.

<Outlet context= {{loading: true}} /> 
//자식, 자손에게 {loading: true}를 전부 공유한다.

---

자손컴포넌트에서 위의<Outlet/>의 context prop을 가지려면 useOutletContext를 사용한다.

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

function Home() { //현재 Home 컴포넌트는 부모에서 공유 받았다고 가정한다.
  const { isLoading } = useOutletContext();
  return (
    {isLoading ? <div>로딩중..</div> : <div>대기중..</div>}
  );
}

// "로딩중.." 이 표시된다.