so woon!

학습일 : 2023. 04. 12 useQuery의 세번째 argument로 refetch interval을 줄 수가 있다. function Chart({ coinId }: ChartProps) { const { isLoading, data } = useQuery( ["ohlcv", coinId], () => fetchCoinHistory(coinId), { refetchInterval: 10000, // 10000ms = 10초마다 refetch } ); const { isLoading: tickersLoading, data: tickersData } = useQuery( ["tickers", coinId], () => fetchCoinTickers(coinId!), { refetchInterval: ..

학습일 : 2023. 04. 11이번에는 리액트 쿼리를 사용하여 차트탭에 차트 정보를 넣어보도록 할 것이다. * Chart.tsx는 Coin.tsx 안에서 render하고 있기 때문에 이미 Coin.tsx에서는 CoinId를 알고 있기 때문에 파라미터를 사용해 다시 가져올 필요가 없음 * 먼저 fetch를 위해 fetchCoinHistory 라는 함수를 정의 endDate는 현재를 나타낸다 현재를 초로 바꾼 것을 내림처리한걸 endDate에 담는다 현재에서 일주일 전을 초로 나타낸걸 startDate에 담는다.// chart api 불러오기 export function fetchCoinHistory(coinId: string) { // endDate : 현재 // Math.floor(1.9) : 1 Ma..

학습일 : 2023. 04. 10 이번에는 Coin.tsx 를 리액트 쿼리를 이용하여 코드를 업그레이드 해보자 Coin.tsx 에는 이미 작성해놓은 엄청 많은 State가 존재하고, 많은 fetch가 일어나고 있다. ReactQueryDevtools를 import import { ReactQueryDevtools } from "react-query/devtools" 그리고 Router 아래에서 render한다. initialIsOpen은 true로 둔다. function App() { return ( ); } export default App; 사이트를 열어보면 아래에 Devtools가 열려져 있는 걸 볼 수 있다. (리액트 쿼리로부터 옴.) allCoins를 클릭해보면 갖고 있는 query와 캐시에 뭘..

학습일 : 2023. 04. 10 앞서 우리는 index.tsx 에서 이런 구조를 보았다. (themeProvider 안에 있는 모든 것이 theme으로 접근 할 수 있다고 학습 했었다.) const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement ); root.render( ); 그것과 마찬가지로 react query도 같은 맥락으로 queryClientProvider 안에 있는 모든 것은 queryClient에 접근할 수 있다고 보면 된다!! 리액트 쿼리를 쓴다면 useEffect, useState와 loading useState 들을 지워도 된다. await, json(). setInfo() 도 없어도 된다. 터미..