React (17) 썸네일형 리스트형 [React] 가상화폐시세 사이트 7 - refetch & react-helmet 목차 react-query에서 fetch 주기적으로 하기 useQuery에서 refetchInterval를 설정해준다 react-query Auto Refetching Example React Query Auto Refetching Example | TanStack Query Docs An example showing how to implement Auto Refetching in React Query tanstack.com const { isLoading: infoLoading, data: infoData } = useQuery( ["info", coinId], () => fetchCoinInfo(coinId), { refetchInterval: 5000 } ); react-helmet 각 페이지의 h.. [React] 가상화폐시세 사이트 6 - apexcharts 오픈소스 라이브러리인 apexcharts로 차트를 간단하게 구현할 수 있다! 참고 - 코인이름 값 가져오기 /{코인이름}에서 /{코인이름}/chart 주소로 이동할 때 {코인이름} 값 받아오는 방법 1. useParams - 주소에 있는 값 가져오기 // Chart.tsx import { useParams } from "react-router-dom"; function Chart() { const params = useParams(); console.log(params); return Chart; } export default Chart; 2. props로 받아서 사용하기 // Chart.tsx interface ChartProps { coinId: string; } function Chart({ coi.. [React] 가상화폐시세 사이트 5 - react-query react-query react-query는 useEffect, fetch문을 쉽게 대체할 수 있도록 해준다! 이점 useState, useEffect, fetch문으로 된 데이터의 fetch 과정을 단순화해준다 데이터를 cache에 저장하여 페이지를 되돌아올 경우 fetch를 안하고 저장된 데이터를 보여준다 react-query Docs Overview | TanStack Query Docs TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchron.. [React] 가상화폐시세 사이트 4 - Nested Router & useRouteMatch ✅react-router-dom@5.3 기준으로 작성되었음 Nested Router return 문 안의 router로 특정 주소가 입력될 경우에 rendering될 수 있도록 할 수 있다! function Coin() { return ( {loading ? ( Loading... ) : ( )} ); } useRouteMatch 특정한 url 안에 있는지 알려줌 페이지 내에서 nested router로 탭을 구성할 때 유용! const priceMatch = useRouteMatch("/:coinId/price"); console.log(priceMatch); // 해당 url에 들어갈 경우 object 반환, 아닐 경우 null 반환 최종 코드 import { useLocation, useParams.. [React] 가상화폐시세 사이트 3 - fetch data & useLocation TypeScript를 사용할 때는 데이터를 가지고 올 때, 어떤 형태의 (interface) 데이터인지 알려줘야 한다! coin의 interface 지정 interface CoinInterface { id: string; name: string; symbol: string; rank: number; is_new: boolean; is_active: boolean; type: string; } useState에서 coin의 interface 지정 function Coins() { const [coins, setCoins] = useState([]) return ... } const [coins, setCoins] = useState([]); const [loading, setLoading] = useSta.. [React] 가상화폐시세 사이트 2 - Theme 적용 styled-components의 DefaultTheme를 사용하여 테마를 사용할 수 있다 미리 정해둔 색과 수치 사용으로 통일성 제공 theme를 변경하여 라이트 / 다크 모드 전환 등을 쉽게 변경 가능 1. styled.d.ts 파일 생성 // styled.d.ts import "styled-components"; declare module "styled-components" { export interface DefaultTheme { bgColor: string; textColor: string; accentColor: string; } } 2. theme.ts 파일 생성 // theme.ts import { DefaultTheme } from "styled-components/dist/types".. [React] 가상화폐시세 사이트 1 - CSS reset CSS reset 방법 css 직접 적용하기 styled-reset 적용하기 createGlobalStyle로 전체 문서에 스타일 적용하기 ✅로 리턴할 때, 가상의 묶음을 형성하여 쓸데없이 를 생성하지 않을 수 있음 import { createGlobalStyle } from "styled-components"; import Router from "./Router"; const GlobalStyle = createGlobalStyle` body { color:red; } `; function App() { return ( ); } export default App; reset css를 적용한 코드 // App.tsx import { createGlobalStyle } from "styled-compone.. [React] TypeScript TypeScript JavaScript With Syntax For Types. TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors and providing fixes before you even run your code. www.typescriptlang.org JS를 기반으로 한 프로그래밍 언어 Strongly-typed 언어: 프로그래밍 언어가 작동하기 전에 데이터의 type을 먼저 확인 JS는 type을 신경쓰지 않는다 const plus = (a, b) => a + b; plus(2, 2); // 4 plus(2, .. 이전 1 2 3 다음