React 47장 - React-Query (4)
포스트
취소

React 47장 - React-Query (4)

React

React Query

Eslint-plugin

  • React 훅을 검사하는 플러그인이다 (useState, useEffect, useContext, useCallback 등).
  • 훅들을 올바르게 사용하고 있는지 검사한다.
npm install eslint-plugin-react-hooks --save-dev
  • React Query 또한 플러그인을 사용하여 규칙을 검사할 수 있고 오류와 버그를 방지하며 코드의 일관성을 유지한다.
  • useQuery 훅에서 요청에 대한 캐시를 지정하지 않거나 적절한 데이터 유형을 사용하지 않을 때 메시지를 출력한다.

TypeScript

  • 맨 위에 //@ts-nocheck 를 작성하면 타입 검사를 무시한다.
  • 특정 코드의 타입 검사를 무시하고 싶다면 // @ts-ignore을 작성하면 된다.

Axios Instance

  • axios 또한 instance를 만들어서 사용할 수 있다.
1
2
3
4
5
6
7
8
9
export const baseUrl = "http://localhost:3030";

const config: AxiosRequestConfig = { baseURL: baseUrl };
export const axiosInstance = axios.create(config);

async function getTreatments(): Promise<Treatment[]> {
  const { data } = await axiosInstance.get("/treatments");
  return data;
}

Chakra Ui

공식문서 Chakra

  • Chakra UI 라이브러리는 재사용 가능한 일종의 도구 키트이다.
  • 여러 가지 기능을 사용할 수 있으며 로딩을 나타내는 Spinner, Box, Divider, ControlBox...등 다양한 컴포넌트를 불러와서 사용할 수 있다.
  • 설치
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
npx create-react-app my-app --template @chakra-ui/typescript
  • 설치 후 chakra-ui의 ChakraProvider 컴포넌트로 최상위 컴포넌트를 감싸 하위 컴포넌트에서 사용할 수 있다.
1
2
3
4
5
6
7
8
9
10
import {ChakraProvider} from "@chakra-ui/react"
import {theme} from "example/theme';

function App (){
  return (
    <ChakraProvider theme={theme}>
      <ExampleComponents/>
    </ChakraProvider>
  )
}

1. Query의 data

  • Queryhook을 다른 컴포넌트에서 불러와 사용하여 map을 활용했을 때, 반환하는 동안의 데이터를 추적할 수 없어 에러가 발생한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// 쿼리 키를 사용할 hooks
export const queryKeys = {
  example: "example1",
  example2: "example2",
  example3: "example3",
};

// useCustomToast
export function useCustomToast() {
  return useToast({
    isClosable: true,
    variant: "subtle",
    position: "bottom",
  });
}

// exampleQuery
import { queryKeys } from "ex.../...";
import { useCustomToast } from "ex.../...";

async function getTreatments() {
  const { data } = await axiosInstance.get("/treatments");
  return data;
}

export function exampleQuery() {
  const example = useCustomToast();

  const fallback = [];
  // data를 추적하는 동안 map으로 사용될 컴포넌트에서 에러를 발생시키기 때문에
  // 임시 데이터를 넣어준다.
  const { data = fallback } = useQuery(queryKeys.example, getTreatments, {
    onError: (error) => {
      const title =
        error instanceof Error
          ? error.message
          : "error connecting to the server";
      toast({ title, status: "error" });
      // 에러 처리
    },
  });
}

2. 전역 오류 지정

  • 전역 오류를 설정하였기 떄문에 위의 exampleQuery함수의 error 부분을 전부 지워도 오류가 발생에 대한 처리가 가능하다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function queryErrorHandler(error: unknown): void {
  const title =
    error instanceof Error ? error.message : 'error connecting to server';

  toast.closeAll();
  // Toast가 점차 쌓이기 때문에 중복 방지
  toast({ title, status: 'error', variant: 'subtle', isClosable: true });
}

export const queryClient = new QueryClient(
    defaultOptions: {
        queries:{
            onError : queryErrorHandler
        }
    }
);

이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.