어떤 화폐의 chart를 가져올 것인가가 문제인데
1.useparams()를 이용해 가져올 수 있지만
상위의 컴포넌트인 coin에서 useparams를 가져와서 사용하고 있기 때문에
두번 적지말고 props로 넘겨주기
https://github.com/UHyun-K/react-master/commit/ca3ba659333e6e53e000c082846b669c9eb0c422
chart fetch api, react-query · UHyun-K/react-master@ca3ba65
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
github.com
data타입 정해주기
const { isLoading, data } = useQuery<IHistorical[]>(["ohlcv", coinId], () => //data 타입 정한거임 , 그게 14개 있으니까 배열로! []
가져온 api 시각화하기
apexcharts.js
https://apexcharts.com/docs/react-charts/
npm 설치
npm install --save react-apexcharts apexcharts
import ApexChart from "react-apexcharts";
function Chart({ coinId }: ChartProps) {
const { isLoading, data } = useQuery<IHistorical[]>(["ohlcv", coinId], () =>
fetchCoinHistroy(coinId)
);
return (
<div>
{isLoading ? (
"Loading chart.."
) : (
<ApexChart
type="line"
series={[
{
name: "Hello",
data: [1, 2, 3, 4, 5, 6],
},
{
name: "sales",
data: data?.map((price) => price.close), // map은 재구성해서 배열로 만들어준다.
},
]}
options={{
theme: {
mode: "dark",
},
chart: {
height: 500,
width: 500,
},
}}
/>
)}
</div>
);
}
Overload 1 of 2, '(props: Props | Readonly): ReactApexChart', gave the following error.
Type '{ name: string; data: any[] | undefined; }' is not assignable to type 'number'.
Overload 2 of 2, '(props: Props, context: any): ReactApexChart', gave the following error.
Type '{ name: string; data: any[] | undefined; }' is not assignable to type 'number'.에러
series data [] 가 받아야 하는 건 number 인데 저희는 data?.map() 으로 읽어올때랑 아닐때를 구분해서 받아야 하는데 읽어오면 number 이지만 못읽어오면 undefind 가 되서 문제가 되는거예요.
그래서 저 형식이 number 로 강제해주면 해결되는 문제입니다.
as 를 이용하여 저 데이터는 number 배열이다! 라고강제 하는겁니다..
data?.map((price) => price.close) as number[]
React-ApexCharts 컴포넌트 Props
type
차트 유형 (String) (기본값 ‘line’)
series
차트에 표시하려는 데이터 (Array) (기본값 undefined)
width, height
차트의 너비 (String || Number) ( 기본값 ‘100%’)
차트의 높이 (String || Number) (기본값 auto)
options
차트의 구성 옵션 (Object) ( 기본값 {})
공식문서에 다양한 옵션들이 있는데 어렵다고 느껴진다면 demo에 있는 그래프와,속성을 참고!
useQuery hook의 3번 째 인자
1번 째 : 고유한 식별자
2번 째 : 실행 할 함수
3번 재 : 선택적인 object
const { isLoading, data } = useQuery<IHistorical[]>(
["ohlcv", coinId],
() => fetchCoinHistroy(coinId),
{
refetchInterval: 5000, 5초마다 fetch함
}
);
react-helmet
npm i react-helmet
컴포넌트 여기서 무엇을 render하든 head로 간다.
return (
<Container>
<Helmet>
<title>
{state?.name
? state.name
: loading
? "Loading..."
: infoData?.name}
</title>
</Helmet> 이 안의 내용은 문서의 head로 들어가게 된다. title, favicon등 다양하게 적용 가능
오류 해결
const mappedOhlcvData = data?.map((data: IohlcvData) => ({
x: data.time_open,
y: [data.open.toFixed(2), data.high.toFixed(2), data.low.toFixed(2), data.close.toFixed(2)],
}));
이후 ApexCharts에서 series에 데이터를 넣어줄때 series={[{ data: mappedOhlcvData }] as unknown as number[]} 이렇게 넣어주니 오류없이 실행은 가능했습니다.
BrowserRouter deploy 할 때
BrowserRouter로 하는 방법-
우리가 프로젝트중인 폴더를 기준으로
Router.tsx 파일에서
BrowserRouter> 이 부분을
BrowserRouter basename={process.env.PUBLIC_URL}>
이렇게 수정해주시면 됩니다. (앞에 < 넣으세요)
이것을 설정을 안 해주면
라우터가 가리키는 "/"의 경로는 “https://닉네임.github.io/” 주소뒤에 오는 "/"의 경로입니다.
하지만 여러분의 프로젝트 설정 경로는 “https://닉네임.github.io/리포지터리이름/”에 있기때문에
빈 화면만 뜨는 것 입니다.
예를 들어 우리의 깃허브 닉네임이 potato 이고 리포지터리 이름을 master-class라고했다면
우리는 https://potato.github.io/master-class/ 여기에 경로가 설정되도록 만들었습니다.
하지만 deploy를 하고 난뒤에 라우터가 가리키는 "/"의 경로는 https://potato.github.io/ 입니다.
이 잘못된 경로를 수정하기 위해 BrowserRouter basename={process.env.PUBLIC_URL}> 을
해주면 우리가 처음 의도했던 경로로 이동합니다.
여기서 PUBLIC_URL은 package.json의 homepage URL값으로 설정이 됩니다.
참고링크:https://create-react-app.dev/docs/advanced-configuration/
