리액트 - React Query : ajax 간편하게 자동 요청

React Query 실시간 sns, 코인 거래소와 같은 기능 구현시 유용함

장점

1. ajax 성공/실패에 따른 결과를 렌더링하기 쉽다.
2. 실패한 경우 지정한 시간 후에 재시도 요청을 자동으로 해준다.
3. prefetch 다음 페이지를 미리 요청하여 캐시에 담아두어 곧바로 렌더링 할 수 있도록 한다.

---

$ 설치

1. 라이브러리 설치
$ npm install react-query

 

2. index.js에서 QueryClient를 생성하고
const queryClient = new QueryClient(); 

 

3. <QueryClientProvider client={queryClient}></QueryClientProvider> 로 감싸기

<QueryClientProvider client={queryClient}>

    <Provider store={store}>

        <BrowserRouter basename={process.env.PUBLIC_URL}>

            <App />

        </BrowserRouter>

    </Provider>

</QueryClientProvider>

---

react-query로 데이터 요청하기

    const requestResult = useQuery(

        "작명",

        () =>

            axios.get("url").then((resolve) => {

                return resolve.data;

            }),

        { staleTime: 2000 }

    );

 

---

장점1: 직접 작성하려면 state부터 만들어주어야 하지만 그 과정을 생략해준다.

    성공/실패/로딩중 type: boolean

 

    requestResult.data; // 데이터 출력

    requestResult.isLoading; // 로딩중일 경우 true

    requestResult.error; // 에러가 있을 경우 true

---

장점2: 자동으로 재요청(refetch)

    간격 설정 방법

    프로퍼티에 { staleTime: 2000 }

---

장점3: 실패시 retry를 자동으로 한다. refetch, retry 종료 기능도 물론 있다.

---

장점4: state를 공유하지 않고 다른 컴포넌트에서 똑같이 요청하더라도 2회를 수행하는 것이 아니라 1회만 수행한다.

---

장점5: ajax결과 캐싱.

이전에 요청하여 성공한 결과를 먼저 보여줘서 바로 로딩이 되는 느낌을 준다.
그리고 나서 이후 다시 GET요청한 데이터를 다 불러왔을 때 출력해준다.