[React / Router] Outlet으로 props 전달하기 (feat. useOutletContext)

useOutletContext로 받아서 처리하는 방식을 설명한다.

URL을 통해 전달하는 방식이면, useParam을 써서 처리하는 방식도 있겠지만, props를 다른 것을 전달할 때도 있으니까,

child에게 props 전달할 때는 아래 방식이 더 명확한 것 같다.

1. parent

...
  <Outlet context={{ coinID }} />  <-- {{ }} 형식으로 전달해야 함.
...

2. child

import React from "react";
import { useQuery } from "react-query";
import { useOutletContext, useParams } from "react-router-dom";
import { getCoinHistory } from "APIs/get/getCoin";

interface ChartProps {
  coinID: string;
}

const Chart = () => {
  const { coinID } = useOutletContext<ChartProps>();  // 이 부분만 확인하면 된다.

  const { isLoading, data } = useQuery(["ohlcv", coinID], () =>
    getCoinHistory(coinID)
  );

  return isLoading ? <h1>loading</h1> : <h1>Chart</h1>;
};

export default Chart;

JS환경에서는 제네릭을 없애면 된다.