분류 전체보기525 [React] recoil적용하기 npm install recoil //index.tsx import { RecoilRoot } from 'recoil'; 이거추가한다. 그럼 이렇게 된다. //index.tsx import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import { QueryClient, QueryClientProvider } from 'react-query'; import { RecoilRoot } from 'recoil'; const queryClient = new QueryClient(); const root = ReactDOM.createRoot( document.getElementById('root') .. 2023. 8. 27. [React] Dark모드, Light모드 적용하기 index.tsx 에 있던 이것을 app.tsx로 옮긴다. theme를 darkTheme와 lightTheme로 나눠서 만들어준다. //theme.ts import { DefaultTheme } from "styled-components"; export const darkTheme:DefaultTheme = { bgColor: "#1e272e", textColor: "black", accentColor: "#f53b57", } export const lightTheme:DefaultTheme = { bgColor: "whitesmoke", textColor: "black", accentColor: "#f53b57", } 버튼을 만들어서 적용한다. //app.tsx import React, { useSta.. 2023. 8. 27. [React] React query 적용 후 코드 index.tsx import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import { ThemeProvider } from 'styled-components'; import { theme } from './theme'; import { QueryClient, QueryClientProvider } from 'react-query'; const queryClient = new QueryClient(); const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render( ); api.ts c.. 2023. 8. 26. [React] React query 적용하기 2 const {} = useQuery(coinId, () => fetchCoinInfo(coinId)) const {} = useQuery(coinId, () => fetchCoinTickers(coinId)) 근데 이렇게 하니까 coinId가 고유한 값이 아니여서 오류가 발생한다 . key는 react query 캐시 시스템에서 저장되고 작동하기 위해서 고유한 값이어야한다! const { isLoading: infoLoading, data:infoData } = useQuery(["info", coinId], () => fetchCoinInfo(coinId)); const { isLoading: tickersLoading, data:tickersData } = useQuery(["tickers", coi.. 2023. 8. 26. 이전 1 ··· 20 21 22 23 24 25 26 ··· 132 다음