리액트 마스터클래스 # 5 coin tracker (Router V5) 메모
라우터 구성
/홈화면
/:id->/btc-> Coin Detail
📂 Router.jsx
functoin Router() {
<BrowserRouter>
<Switch>
<Route path=“/:coinId”>
<Coin />
</Route>
<Route path=“/”>
<Home />
</Route>
//... 이하생략, 요런 구성.
}/:coinId 에 url 파라미터가 뭐로 들어왔는지는 useParmas로 캐치
react 에서 reset css하기
createGlobalStyle : 전역 스타일을 처리하는 특수 Styled Component를 생성하는 helper 함수
const globalStyle = createGlobalStyle`
body { reset css code… };
`데이터 api fetch, json 하고나서!
- api 데이터를 interface 만들어서 useState에 올 데이터 타입알려주기
- useEffect로 처음에 api 불러오게끔 하기.
api 받은 페이지에서 서브 페이지로 <Link> 이용해서 데이터 보내는 법
왜 보내는가?
coin 개별 페이지로 이동, api를 또 불러오는 동안 loading이 있음.
미리 coins 홈에서 가지고 있던 api 데이터 중 일부를 보내면 빠르게 render 가능
즉 이미 가지고 있는 데이터를 화면 이동시 보내주는 방법.
- Link 컴포넌트로 데이터 보내기
state={} props로!
<Link to={`/${coin.id}`} state={name: coin.name}>
coins.map(coin)중… #5.4 7분가져오려면?
- react router DOM이 보내주는 location object에 접근
- useLocation 사용시 객체로 데이터가 확인된다.
const { state } = useLocation()
{state.name}- 참고: state는 데이터 담고있는 화면을 열때와 넘겨줄 때 생성됨
- 참고: url로 바로 접속한다면 state 만들어지지 않음
ts사용시 api json 저장한 useState에게 타입 알려주기
- console.log로 api 객체 확인하고 우클릭해서 Store object~ 로 저장하기 -> temp1 에 저장된다.
- temp1 객체에서 키만 가져오기
- Object.keys(temp1)
- Object.keys(temp1).join() 하고 , 전부 지우고 엔터!
- temp1 객체에서 valus 타입 받아오기
- Object.values(temp1)
- Object.values(temp1).map((v) => typeof v)
- 인터페이스 만들어서 useState 입히기
api 데이터를 ts에게 알려줄 수 있게끔 만들어 주는 사이트도 있음
https://app.quicktype.io/?l=ts
Nested Routes 중첩 라우터 (같은 화면에 라우터가 여러개)
문법 팁
priceInfo.max_supply: 항상 max_supply 요구. priceInfo가 undefined라면 에러가 남 !priceInfo?.max_supply: priceInfo가 undefined거나 없다면 max_supply 요구하지 않음 ! 타입스크립트가 ?가 붙으면 undefined가 될 수도 있다는 것을 안다.
중첩 라우터는 탭을 만들 때, 스크린 안에 섹션이 나뉠 때 씀
/:coinId 라는 페이지에서 중첩 라우터 만드는 상황.
예시로 /btc-bitcoin 페이지인 것임.
먼저 useParmas로 bit-bitcoin 이라는 url의 파라미터 coinId를 가져온다.
(route에서 /:coinId 라고 했으니까)
1. 탭을 구성하는 하위 컴포넌트를 만든다.
2. Route 안에 해당 컴포넌트를 써주고 path를 정해준다. <Route path={`/:coinId/price`}>
3. 하위 컴포넌트로 이동시키는 <Link>를 만든다~~! <Link to={`/${coinId}/chart`}탭이 여러개 일 경우 어느 탭에 있는지 확인하기
v5 useRouteMatch() -> v6 useMatch()
useRouteMatch: 특정한 url에 있는지 확인!
const chartMatch = useRouteMatch(“/:coinId/chart“)
url이 일치하면 Object에서 isExact: true 아니라면 null
사용예시
1 - Tab 컴포넌트에 프롭스를 줘서 선택된 탭 색깔을 바꿀수있따. isActive 라는 프롭스에 T or F 를 받으면 삼항연산자로 악센트 색상을 주거나 그냥 기본 색상을 준다.
const Tab = styled.span<{isActive: boolean}>`
color: ${(props) => props.isActive ?
props.theme.accentColor : props.theme.textColor}
`2 - 구현부에 가서 chartMatch가 null인지 아닌지 비교하기
<Tab isActive={chartMatch !== null}>
<Link to={`/${coinId}/chart`}> CHART </Link>
</Tab>5.9 리액트 쿼리~!
React Query
React 애플리케이션에서 서버 state를 fetching, caching, synchronizing, updating할 수 있도록 도와주는 라이브러리
"global state"를 건드리지 않고 React 및 React Native 애플리케이션에서 데이터를 가져오고, 캐시하고, 업데이트합니다.
퀵 스타트
📂 index
import { QueryClinet, QueryClinetProvider } from “react-query”const queryClient = new QueryClient()<App />을QueryClinetProvider로 둘러싸기<QueryClinetProvider client={queryClient}>: client prop에 queryClient 넣어주기
리액트 쿼리를 써보자
- 📂 api.ts -> fetcher 함수 생성
- 📂 main.tsx -> import useQuery
useQuery() 인수 2개 필요.
1. queryKey : 고유 식별자. 데이터 요청을 식별하는 역할.
2. fetcher function
const { isLoading, data } = useQuery(“name”, “fetcher”)
fetcher 로딩중이면 lsLoading, 끝나면 data 이용 가능
리액트쿼리 데브툴
📂 App
- import {ReactQueryDevtools} from “react-query/devtools
<ReactQueryDevtools initialIsOpen={true} />- 쿼리 이름과 캐시에 갖고있는 데이터 등 확인할 수 있음
장점
1. fetcher 함수를 api 파일에 따로 저장해서 api 코드를 분리해서 관리 할 수 있다
2. fetcher 함수와 연결되어서 isLoading 함수가 불렸는지 알 수 있고 끝났다면 결과값을 data에 넣어준다
3. 캐쉬를 이용해서 화면을 옮겼다 돌아와도 api를 불러오는 로딩이 없다
4. 데브툴이 있어서 Data Exploer 쉽게 볼 수 있다
추가 정리
- key는 react query 캐시 시스템에 저장되고 작동되기에 고유한 값이어야 한다
- useQuery를 두개 이상 쓸 때 키가 겹치지 않게끔 !
const { isLoading: infoLoading, data: infoData } = useQuery([“info”, coinId], fetcher)
