[React] React-Query

React-Query

- ajax 성공시/실패시 HTML을 보여주려면?

- 몇 초마다 자동으로 AJAX 요청을 하려면?

- 실패시 몇 초 후에 재요청을 하려면?

- 다음 페이지 내용을 미리 가져오려면(=prefetch)?

 

...등등을 간단하게 도와줌

 

* React-Query를 사용하기에 유용한 곳

실시간 데이터를 계속 가져와야하는 사이트

 

0. React-Query 설치

• 터미널 창에서
    npm install react-query  

 

1. React-Query 세팅

- index.js

• QueryClient
• QueryClientProvider

import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient()

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // <React.StrictMode>
  <QueryClientProvider client={queryClient}>
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </QueryClientProvider>
  // </React.StrictMode>
);

 

 

2. React-Query 사용하기

📘 페이지 우측 상단에 사용자 이름 불러오기 ex) 반가워요 ㅇㅇ님!

...
import { useQuery } from 'react-query';

function App() {
   ...
  /* 반가워요 user */
    // axios.get('https://codingapple1.github.io/userdata.json').then((a) => {
    //   a.data
    // })
  
    // react-query 사용
    let result = useQuery('greet', () => 
      axios.get('https://codingapple1.github.io/userdata.json').then((a) => {
        console.log('요청!')
        return a.data
      }),
    /* refetch 간격 설정 */
    { staleTime : 2000 } // 2초 안에는 refetch 안됨
    )
    
    return (
    <div className="App">
	 ...
      <Navbar bg="light" variant="light">
        <Container>
          <Navbar.Brand href="#home">SinShop</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link onClick={() => { navigate('/') }}>Home</Nav.Link>
            <Nav.Link onClick={() => { navigate('/cart') }}>Cart</Nav.Link>
            <Nav.Link onClick={() => { navigate(1) }}>앞으로가기</Nav.Link>
            <Nav.Link onClick={() => { navigate(-1) }}>뒤로가기</Nav.Link>
          </Nav>
          <Nav className="ms-auto">
            {/* { result.isLoading ? '로딩중' : result.data.name } */}
            { result.isLoading && '로딩중' }
            { result.error && '에러남' }
            { result.data && result.data.name }
          </Nav>
        </Container>
      </Navbar>
      ...
    </div>
  );
}

 

 

React-Query 장점

1. 성공 / 실패 / 로딩중 쉽게 파악 가능

result.data // 요청 성공시 data 가져옴
result.isLoading // 요청중일 때 true
result.error // 요청 실패시 true

 

2. 자동으로 재요청해줌 ( = refetch )

  * refetch 간격 설정

{ staleTime : 2000 } // 2초 안에는 refetch 안됨!

 

 

3. 실패시 retry 알아서 해줌

 

 

4. state 공유 안해도 됨

• state 만들고 props로 전송하는 게 싫으면 컴포넌트 안에서 ajax 요청가능 - 똑같은 곳에 ajax요청을 두번이상하게되면 합쳐서 한번만 함 -> 비효율x

 

5. ajax 결과 캐싱 기능 ( = 5분동안 요청 결과 저장 )

ex)
12시 10분에 실행된 userdata.json GET 요청
12시 15분에 실행된 userdata.json GET 요청

React-Query가 12시 10분 결과를 먼저 보여줌 -> GET요청(12시 15분거) -> 12시 15분 결과 보여줌

=> 기존 성공 결과를 먼저 보여주니까 훨씬 빠른 느낌을 줌

 

 

* redux-toolkit 설치시 RTX Query도 자동설치되는데 React-Query와 유사(문법은 더 어려움)