React : 실시간 데이터가 중요할땐 react-query (설치/사용), RTK Query

** ReactDOM.createRoot는 React 18부터 도입된 새로운 렌더링 API이다. 그러나 @tanstack/react-query 패키지는 아직 React 18에 대한 완전한 지원을 제공하지 않을 수 있어서, @tanstack/react-query와 ReactDOM.createRoot를 함께 사용할 때 문제가 발생할 수 있다..고 하는데 그래서 계속 react-query를 설치하면 useEffect가 null이 되는 오류가 일어나고 있다. 쓸 때 다시한번 볼 것.

---

react-query

ajax를 쓰다 보면 다양한 기능들(몇초마다 자동으로 데이터를 가져오기/다음 페이지 미리 가져오기/요청실패시 몇초 간격으로 재시도/ajax 성공이나 실패시 각각 다른 html 보여주기)을 써야 할 때가 있다.
보통 sns나 코인거래소같은 실시간 데이터가 중요한 사이트들에서 쓴다. (아니면 그다지 안 쓰나봄)

특징

• 페이지에 들어온지 일정시간이 경과하거나, 다른창으로 갔다가 돌아오는 등 여러 경우에 알아서 ajax 요청을 다시 한다. (재요청을 끄거나 간격을 조절할 수 있다.)
• 인터넷이 끊기거나 서버에 문제가 있는 경우 네다섯번 재시도 해준다.
• ajax요청이 2개나 있으면 1개만 날려주고, 캐싱기능이 있어 이미 같은 요청을 했다면 그걸 가져와 쓴다.
• 다른 컴포넌트에서 props 전송을 안해도 된다.

---

설치 전 확인사항

라이브러리 이름이 react-query에서 @tanstack/react-query로 바뀌었으므로, 터미널 설치나 import 코드, 사용시 작성방법이 바뀌었다.

---

설치하는 법

터미널 설치

npm install @tanstack/react-query

index.js에서 받아오기

import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query'  //이거
const queryClient = new QueryClient()   //이거

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

1. index.js 상단에 import하고 const queryClient = new QueryClient()를 넣었다.
2. <App />을 QueryClientProvider로 감싸주었다.
3. QueryClientProvider에 client={queryClient}를 이식해주었다.

---

사용

import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query' 

function App(){
  let result = useQuery('작명', ()=>
    axios.get('https://codingapple1.github.io/userdata.json')
    .then((a)=>{ return a.data })
  )
}

1. 쓰려는 js 상단에 useQuery를 import한다.
2. useQuery()로 ajax 요청을 감싸주었다.

---

function App(){
  let result = useQuery('작명', ()=>
    axios.get('https://codingapple1.github.io/userdata.json')
    .then((a)=>{ return a.data })
  )

  return (
    <div>
      { result.isLoading && '로딩중' }
      { result.error && '에러남' }
      { result.data && result.data.name }
    </div>
  )

 

result라는 변수에 ajax 현재 상태가 알아서 저장된다.

• ajax요청이 로딩중일 땐 result.isLoading 이 true가 된다.
• ajax요청이 실패시엔 result.error 가 true가 된다. 
• ajax요청이 성공시엔 result.data 안에 데이터가 들어온다.

---

RTK Query 라이브러리

Redux Toolkit에 기본적으로 포함되어있는 라이브러리인데, react-query와 비슷한 기능을 제공한다..만 다른 용도로 더 많이 쓴다.

• ajax 요청 후 Redux state 변경을 하고 싶다면?
  원래는 Redux state변경함수 안에선 ajax 요청을 하면 안돼서 컴포넌트 안에서 해야 하는데, 그걸 Slice 안에서 관리 가능하게 도와준다.

---

출처 : 코딩애플 https://codingapple.com/