1. Link 컴포넌트로 props 를 전달하는 방법
// coins.tsx
<Link
to={{
pathname: `/${coin.id}`,
state: { name: coin.name },
}}
>
// coin.tsx
const { coinId } = useParams<RouteParams>();
const { state } = useLocation<RouteState>();Link 컴포넌트로 route 를 연결했을 때 match, location, history 세가지의 객체를 전달하게 된다.
History : 브라우저 history. stack 에 현재까지 이동한 url 경로가 담겨있다.
push, replace 함수를 통해 다른 경로 혹은 앞 뒤 페이지로 이동할 수 있다.
Location : 현재 페이지의 정보. location.search로 현재 url의 쿼리스트링을 가져올 수 있다.
위의 예시에는 state 객체를 전달받은 모습.
Match : 어떤 Route에 매칭이 되었는지에 대한 정보를 담고있다.
Router v6 에서는
<Link to={`/${coin.id}`} state={{name: coin.name}} 과 같은 방법으로 전달을 해야한다는 듯.
2. Store object as global valiable
개발자 도구에서 console 로 찍은 object에 오른쪽 클릭을 하면
Store object as global valiable 이라는 옵션을 선택할 수 있는데,
자동으로 temp1 이라는 변수에 담아준다.
Object.keys(temp1).join() 메소드를 이용해서
Object.keys(temp1).join()
'id,name,symbol,rank,is_new,is_active,type,logo,tags,team,
description,message,open_source,started_at,development_status,
hardware_wallet,proof_type,org_structure,hash_algorithm,links,
links_extended,whitepaper,first_data_at,last_data_at'해당 object 의 키 값을 조금 더 쉽게 가져올 수 있다.
commend + D 키로 쉼표들을 찾아 모두 지워주면 된다.
그 후 Object.values(temp1).map(v=>typeof v).join() 메소드를 이용해
Object.values(temp1).map(v=>typeof v).join()
'string,string,string,number,boolean,boolean,string,string,
object,object,string,string,boolean,string,string,boolean,string,
string,string,object,object,object,string,string'해당 value 값들의 type 값을 가져와 줄 수 있다.
value의 object 는 객체로 이루어진 배열인데 동일한 과정을 통해 따로 interface를 만들어주어야 한다.
붙혀넣으면 interface 완성 !
추가로 interface object 를 생성할 때
interface IInfodata {...}이런식으로 대문자 I 를 붙혀주는게 관습적인 작명법이라고 한다.
3. Nested Router
라우터 속 라우터.
웹 사이트에서 탭을 사용할 때 주로 이용.
스크린 안에 많은 섹션이 나누어져있을 때도 유용하다.
12-1. V6 버전에서 달라진 점들
4. useRouteMatch
useRouteMatch hook 을 사용하면 해당 url에 접속했을 때
{path: '/:coinId/price', url: '/usdt-tether/price', isExact: true, params: {…}}같은 객체를 반환받을 수 있다. 해당 url이 아닌 경우 null 값을 반환한다.
그 특성을 이용해서,
const priceMatch = useRouteMatch("/:coinId/price");
const chartMatch = useRouteMatch("/:coinId/chart");
...
<Tabs>
<Tab isActive={chartMatch !== null}>
<Link to={`/${coinId}/chart`}>Chart</Link>
</Tab>
<Tab isActive={priceMatch !== null}>
<Link to={`/${coinId}/price`}>Price</Link>
</Tab>
</Tabs>Tab Styled Components에 isActive 라는 props를 전달하고
해당 props 가 true 라면 색이 변하게 로직을 구성할 수 있다.
tsx 를 사용하고 있다면
const Tab = styled.span<{ isActive: boolean }>`위와같이 props의 타입을 명시해주어야 한다.
- react query 기본 설치
// index.tsx
import { QueryClientProvider, QueryClient } from "react-query";
const queryClient = new QueryClient();
root.render(
<React.StrictMode>
<QueryClientProvider client={queryClient}>
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
</QueryClientProvider>
</React.StrictMode>
);react 18 버전에서 타입스크립트로 react-query를 불러오지 못하는 오류가 있다.
npm i @tanstack/react-query 를 입력해 모듈을 설치하면 가능하다.
TSX, 리액트 18버전에서 react-query 사용시 발생할 수 있는 에러
6. react-query를 사용하는 과정
- fetcher function 만들기
// ./apis/api.ts
export const fetchCoins = async () => {
return fetch("https://api.coinpaprika.com/v1/coins").then((res) =>
res.json()
);
};- 사용할 컴포넌트에서 useQuery
// const [coins, setCoins] = useState<CoinInterface[]>([]);
// const [loading, setLoading] = useState(true);
// useEffect(() => {
// (async () => {
// const response = await fetch("https://api.coinpaprika.com/v1/coins");
// const json = await response.json();
// setCoins(json.slice(0, 50));
// setLoading(false);
// })();
// }, []);
const { isLoading, data } = useQuery<ICoin[]>(["allcoins"], fetchCoins);헉.. 데박 간단해졌다 !
useQuery는 2개의 인자를 받는다.
const res = useQuery("queryKey", queryFuntion)queryKey 는 useQuery 마다 부여되는 고유의 key 값을 의미한다.
해당 key는 React Query 자체에서 query 캐싱을 관리할 수 있도록 도와준다.
세상에나 자동으로 캐싱도 해준다니 !
queryFuntion 은 promise 처리가 이루어지는 함수이다.
ajax 요청을 두번째 인자로 넣으면 된다고 함.
useQuery 를 변수에 담아 콘솔에 출력하면
이렇게 자체 제공되는 기능을 사용할 수 있는데
그동안 직접 구현해야 됐던
isLoading 이라던지, error 같은 옵션들을 ‘자체 제공’ 하여 반환해준다 !
react query를 사용하고 암이 나았다고 하더니 진짜였나봐.. 🥰
그동안 redux-toolkit-thunk 로 구현했어야 됐던 부분들이
이렇게 간단하게 내부적으로 처리해주니까 조금 당황스럽긴 하다.
7. ReactQueryDevtools
// App.ts
import { ReactQueryDevtools } from "react-query/devtools";
<ReactQueryDevtools initialIsOpen={true} />react-query-devtools 를 render 해주면
이런 귀여운 UI의 개발자도구를 화면에 출려갛게 된다.
Refetch 등의 옵션을 사용할 수 있고
어떤 data가 캐싱되어 있는지 한눈에 볼 수 있다.
강의 중단
강의 보는거 너무너무 즐겁고 좋았는데..
실전 프로젝트 팀원분들께서 실전프로젝트까지 다 하면서 강의 보고 하면 시간이 너무 지체될 것 같다고 하셨다.
그래서 리액트 쿼리만 차용하고 타입스크립트나 리코일은 나중에 생각해보자고 논의가 됐다.
😢
혼자서라도 틈틈히 보려고 한다.
외롭다.
