📌 react-query

react-query : 편한 방식으로 데이터를 fetch 할 수 있는 패키지

Setup

react-router-dom & react-query install
react-router-dom : 어플리케이션이 URL을 가져서 각기 다른 화면을 갖게 해줌
추가로 @types/react-router-dom 설치

react-router-dom

앞선 react 강의에서 다뤘던 부분
강의에서는 5.x.x대 버전을 사용하지만 난 6.x.x 버전 사용 중
6.x.x 버전 부터는 Switch 대신 Routes로 사용
- 한번에 하나의 Route를 렌더링 할 수 있도록 함

📌 Styles

Reset Style

1. styled-reset

https://www.npmjs.com/package/styled-reset
실질적으로 전체 문서에 적용하기에는 커스텀한 기본값을 추가하기에 어려움이 있음

2. createGlobalStyle

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  body {
    color: red;
  }
`;

function App() {
  return (
    <>
      <GlobalStyle />
      <Router />
    </>
  );
}

styled 컴포넌트로 만든 스타일은 지정된/사용되는 요소에만 국한됨
createGlobalStyle은 렌더링 될 때 전역 스코프에 스타일을 올려줘서 global한 style을 가지게 됨
document의 head에 style 주입

Fragment

일종의 유령 컴포넌트로 기존에 React에서 1개의 element만 return 되어야 해서 사용하지도 않는 쓸데없는 빈 div를 마구잡이로 썼다면
Fragment로 대체 가능

Font

https://fonts.google.com/specimen/Source+Sans+Pro
강의에서는 위 url에서 필요한 font를 @import해서 사용

Theme

이제 내 앱에서 필요한 theme color 주입

📌 Coins Home

API에서 데이러를 가져와도 똑같이 Typescript에게 뭐가 오는지 알려줘야 함
다른 페이지(ex. Coin Detail)에서 다시 돌아왔을 때도 Loading되는 이슈는 추후 react-query에서 수정 예정

API fetch

// 1. normal
const getCoins = async () => {
    const json = await (
      await fetch("https://api.coinpaprika.com/v1/coins")
    ).json();
};

useEffect(() => getCoins(), []);

// 2. IIFE로 굳이 getCoins 함수를 또 만들 필요 없이 즉시 실행
useEffect(() => {
    (async () => {
      const json = await (
        await fetch("https://api.coinpaprika.com/v1/coins")
      ).json();
    })();
}, []);

📌 Coin Detail - Route States

현재까지 개발된 상황

1. Coins Home 페이지에서 Loading 문구가 최초로 노출됨
2. 그 사이에 API request가 종료되면 코인 리스트를 가져올 수 있게 되고 Loading 문구는 사라지고 코인 리스트 UI 노출
3. 특정 코인을 클릭하면 Coin Detail 페이지로 이동 (ex. /btc)
4. 페이지 이동 후, 코인 name 제목이 여전히 특정 코인 데이터를 가져오는 동안 Loading 문구 노출됨

Coin Detail 페이지에서 코인 name 제목은 나도 아는 데이터임에도 불구하고 API가 줄 때까지 사용자는 로딩 문구를 봐야 함 -> 좋은 UX가 아님

비하인드 더 씬 데이터

우리는 그동안 한 화면에서 다른 화면으로 데이터를 전송할 때 URL Parameter를 보내는 방식을 사용해 왔음
하지만 위와 같은 이슈가 있어서 state를 사용해보자

// Coins.tsx
// react-router-dom v6점대 이상부터 아래처럼 사용
<Link to={`/${coin.id}`} state={{ name: coin.name }}>

// Coin.tsx
// Link에서 state로 넘겼던 coin.name을 Coin에서 useLoaction을 사용해서 get 
// react-router-dom v6점대 이상부터 <> generic 미지원, 아래처럼 사용 가능 
interface RouteStates {
  state: {
    name: string;
  };
}

function Coin() {
  const {
      state: { name }
    } = useLocation() as RouteStates;

  return (
    <Container>
      <Header>
        <Title>{name}</Title> // 더이상 useParmas로 가져온 coinId가 아닌 coin의 name을 직접 뿌려줄 수 있음 
      </Header>
    </Container>
  );
}

state는 Coins Home 페이지를 열 때 & Coin Detail 페이지로 넘어갈 때 생성됨
state는 Coins Home 페이지에서 특정 코인을 클릭해서 이동할 때, Home에서 Detail 페이지로 보내짐

Uncaught TypeError: Cannot read properties of null (reading 'name')

크롬 시크릿창에서 Coin Detail 페이지로 바로 접속하면 위와 같은 오류 발생
state가 생성되려면 Coins Home부터 열어야 그 state를 클릭시 Detail 페이지로 전송 가능

해결 방안

function Coin() {
  const location = useLocation() as RouteStates; // {... state: null}
  const name = location?.state?.name; // undefined 반환 

  return (
    <Container>
      <Header>
        <Title>{name  "Loading..."}</Title>
      </Header>
      {loading ? <Loader>Loading...</Loader> : null}
    </Container>
  );
}

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining
Javascript의 Optional Chaining 연산자(?.)를 사용해서 name에 접근하기 전에 state의 상태에 따라 다르게 반환됨
state가 있다면 name 그대로 반환, null or undefined라면 자동으로 단락되어 undefined가 반환됨

📌 Coin Detail - Data Types

보통 Interface는 네이밍을 맨 앞에 I를 붙임
API 데이터의 Interface 정의 시 미세먼지 팁

// 1. 아래 key 복사
temp1 = { API 데이터 };
Object.keys(temp1).join(); // 'id, name, symbol...'

// 2. VSCode에 붙여넣고 Command + D로 콤마 선택해서 삭제 후 엔터
// 전체 영역 선택 후, Command + Shift + i로 각 모든 커서를 받아서 공통 문자 :와 ; 입력

// 3. 아래 values의 type 복사 
Object.values(temp1).map(item => typeof item).join(); // 'string, string, boolean...'

// 4. 2번처럼 콤마 선택해서 삭제 후 엔터

// 5. 2번까지 마친 key를 전체 선택 후, Comand + Shift + i로 각 모든 커서가 나오면 4번 key 붙여넣기 

// 6. But array같은 경우 object로만 type 변환이 되어서 내부 속성들의 타입도 명시해줘야 함
interface ITag {
  coin_counter: number;
  id: string;
  ...
}

interface IInfoData {
  id: string;
  name: string;
  tag: ITag[];
  ...
}

📌 Coin Detail - Nested Routes

Coin.tsx에서 사용하는 API를 컴포넌트 실행 최초 1번만 받아오도록 하기 위한 useEffect의 2번째 param을 coinId로 넣어야 한다는 경고가 뜸
hooks의 성능 향상을 위해서 경고 문구
사실 coinId를 넣으면 coinId가 변경될 때마다 useEffect 내의 함수가 실행되기 때문에 우리 의도와는 달라짐
But !! 여기서 coinId는 URL로부터 오는 값이기 때문에 절대 변경될 일이 없어서 빈 배열을 넣을 때와 동일하게 컴포넌트 최초 1번만 실행됨

Nested Route

route in route
탭 or 화면 내에 많은 섹션 사용시 많이 사용됨
탭들을 state에 넣는 대신 url로 관리해서 url로 다이렉트로 접근 가능하도록 할 때
- /btc-bitcoin/chart : 차트 탭이 보이도록
Link를 사용해서 URL을 바꿈으로써 트리거가 되어 re-render 가능

// 1. Router.tsx
// v6점대부터 exact는 더이상 사용하지 않고 여려 라우팅을 매칭하고 싶은 경우 URL뒤에 /* 붙임 
<Route path="/:coinId/*" element={<Coin />}></Route>

// 2. Coin.tsx
// v6점대부터 상대 경로 지원 
<Routes>
  <Route path="/price" element={<Price />}></Route>
  <Route path="/chart" element={<Chart />}></Route>
</Routes>

react-router-dom v6점대부터 위처럼 사용
v6점대부터 달라진 점들
- https://ui.dev/react-router-nested-routes/
- https://reactrouter.com/docs/en/v6/getting-started/overview

useMatch hook

const Tab = styled.span<{ isActice: boolean }>`
  ...
  color: ${props =>
    props.isActice ? props.theme.accentColor : props.theme.textColor};
`;

function Coin() {
  const priceMatch = useMatch("/:coinId/price"); // 내가 이 url 안에 있냐
  const chartMatch = useMatch("/:coinId/chart");

  return (
  {/* chartMatch가 null이 아님 -> /:coinId/chart url에 들어와있다면 isActice는 true */}
    <Tabs>
      <Tab isActice={chartMatch !== null}>
        <Link to={`/${coinId}/chart`}>Chart</Link>
      </Tab>
      <Tab isActice={priceMatch !== null}>
        <Link to={`/${coinId}/price`}>Price</Link>
      </Tab>
     </Tabs>

     <Routes>
       <Route path="/price" element={<Price />}></Route>
       <Route path="/chart" element={<Chart />}></Route>
     </Routes>
  );
}

내가 특정한 URL에 있는지 여부를 알려줌
v6점대에서는 useMatch, 이하 버전에서는 useRouteMath란 네이밍
내가 선택한 URL에 들어가 있다면 아래와 같은 object를, 아니라면 null 반환

📌 React Query

// index.tsx
// 초기 세팅
import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <ThemeProvider theme={theme}>
        <App />
      </ThemeProvider>
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

https://react-query.tanstack.com/overview
이제야 적용하는 react-query
QueryClientProvider 안에 있는 모든걸 하위 컴포넌트에서 접근 가능함 (ThemeProvider와 같은 맥락)

Why use react-query

// api.ts
// json data의 Promise 반환하는 함수 export
// 일반적으로 API fetch 관련된 함수는 컴포넌트에서 분리함
export function fetchCoins() {
  // fetch 후 response의 json return
  return fetch("https://api.coinpaprika.com/v1/coins").then(response =>
    response.json()
  );
}

// Coins.tsx
const { isLoading, data } = useQuery<ICoin[]>("allCoins", fetchCoins);

useQuery hook은 fetcher 함수를 호출하고 fetcher 함수가 loading 중이라면 react-query는 isLoading으로 로딩 여부를 알려줄것
fetcher 함수가 끝나면 fetcher 함수에서 반환된 json을 data에 넣음
앞서 했던 isLoading state + useEffect로 API 호출 방법을 이 한줄이 대체 가능한 편리한 기능 ~~~
앞서 했던 방법으로는 클릭해서 detail 페이지 이동 후, 되돌아오면 다시 로딩된 후 전체 목록을 받아왔다
이젠 로딩이 보이지 않음 왜? -> react query가 data를 캐시해서 유지하고 있기 때문 !

Devtools

// App.tsx
import { ReactQueryDevtools } from "react-query/devtools";

function App() {
  return (
    <>
      <GlobalStyle />
      <Router />
      <ReactQueryDevtools initialIsOpen={true} />
    </>
  );
}

react query에서 Devtools 제공
앱이 가진 모든 query 확인 가능, 캐시를 시각화해서 확인 할 수 있다.
만든 allCoins 쿼리 확인 가능, 원하는 동작 트리거 가능 -> reqct-query가 query를 array로 보고 있음 ["allCoins"]
- refetch : 데이터를 다시 fetch
- reset : 쿼리 reset

Coin에 react-query 적용

// Coin.tsx
const { coinId } = useParams();
const location = useLocation() as RouteStates;
const name = location?.state?.name;
const priceMatch = useMatch("/:coinId/price"); // 내가 이 url 안에 있냐
const chartMatch = useMatch("/:coinId/chart");

// param1 : 고유한 값 coinId를 query key로 사용
// param2 : Coins에서는 인자가 필요없었으나 여기선 coinId를 알아야 하니까 (호출이 아닌 함수 자체로 넘겨줘야함 !)
// 그래서 fetchCoinInfo 함수를 호출해서 ciondId를 넣어주는 함수를 생성해서 전달

// react query는 query를 array로 봄
// 넘겨주는 key를 배열로 만들어서 같은 coinId를 사용하지 않도록 생성
const { isLoading: infoLoading, data: infoData } = useQuery<IInfoData>(
  ["info", coinId],
  () => fetchCoinInfo(coinId!)
);
const { isLoading: tickersLoading, data: tickersData } = useQuery<IPriceData>(
  ["tickers", coinId],
  () => fetchCoinTickers(coinId!)
);

// 2개 로딩이 끝나지 않으면 Loading 노출 
const loading = infoLoading || tickersLoading;

return (
  <Container>
    <Header>
      {/* state로부터 온 name이 있으면 -> name or 없으면 -> loading */}
      {/* 근데 loading이 true면 Loading 메세지를 or false면 API로부터 온 name  */}
      <Title>{name ? name : loading ? "Loading..." : infoData?.name}</Title>
    </Header>
    {loading ? (
      <Loader>Loading...</Loader>
    ) : ( ...
);

Coins에 적용한 방식과 동일
이제 Bitcoin 클릭 후 다시 되돌아와서 다시 Bitcoin 클릭하면 Loading 보이지 않음 왜???? react-query가 data를 캐싱하고 있기 때문

📌 Price Chart

Apexchart.js

js 차트 라이브러리
자세한 옵션 사용법은 Docs 참고
https://apexcharts.com/docs/react-charts

react-helmet

컴포넌트로서 사용하며 컴포넌트에서 무엇을 render하던 문서의 head로 보여줌
react-helmet 사용시에 Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. 오류 발생
react-helmet-async로 HelmetProvider로 Helmet을 감싸서 사용
title 뿐만 아니라 favicon, css 등 추가 가능

import { Helmet, HelmetProvider } from "react-helmet-async";

<HelmetProvider>
  <Helmet>
    <title>{name ? name : loading ? "Loading..." : infoData?.name}</title>
  </Helmet>
</HelmetProvider>

beecomci / today_i_learned

[React JS 마스터클래스] Chapter #4 CRYPTO TRACKER #28

📌 react-query

Setup

react-router-dom

📌 Styles

Reset Style

1. styled-reset

2. createGlobalStyle

Fragment

Font

Theme

📌 Coins Home

API fetch

📌 Coin Detail - Route States

현재까지 개발된 상황

비하인드 더 씬 데이터

Uncaught TypeError: Cannot read properties of null (reading 'name')

해결 방안

📌 Coin Detail - Data Types

📌 Coin Detail - Nested Routes

Nested Route

useMatch hook

📌 React Query

Why use react-query

Devtools

Coin에 react-query 적용

📌 Price Chart

Apexchart.js

react-helmet