React - react-query

AJAX 요청하다보면 다음의 기능들이 가끔 필요해집니다.

• 몇초마다 자동으로 데이터 다시 가져오게 하려면?
• 요청실패시 몇초 간격으로 재시도?
• 다음 페이지 미리가져오기?
• AJAX 성공/실패시 각각 다른 HTML 보여주려면?

직접 개발해도 되겠지만 React-query라는 라이브러리 설치해서 써도 됩니다. 

sns, 코인거래소 같은 실시간 데이터를 보여줘야하는 사이트들이 쓰면 유용하고 나머지 사이트들은 딱히 쓸데는 없습니다.

 

설치 & 셋팅

npm install react-query

 

그리고 index.js파일열어서 1번 2번 3번하면됩니다. 

import { QueryClient, QueryClientProvider } from "react-query"  //1번
const queryClient = new QueryClient()   //2번

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

 

 

 

react-query로 ajax 요청하는법

예전의 ajax에서는 다음과 같이 요청했습니다.

 axios.get('https://codingapple1.github.io/userdata.json').then((a)=>{
    console.log(a.data); })

react-query는 useQuery라는걸 상단에서 import 해온 뒤에 useQuery()로 ajax 요청을 감싸면 됩니다. 

 let result = useQuery(['작명'],()=>{
    return axios.get('https://codingapple1.github.io/userdata.json').then((a)=>{
      return a.data;
      
  })})
  console.log(result.data , result.isLoading, result.error);

 

 

장점1. 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안에 데이터가 들어옵니다.

아니면 3항연산자를 써서 다음과 같이 작성할 수 있습니다. 

result.isLoading ? '로딩중': result.data.name

state를 만들어야 할 필요가 없습니다. 

 

 

 

장점2. 틈만나면 알아서 ajax 재요청

페이지 체류하고나서 일정시간이 경과하거나

다른창으로 갔다가 다시페이지로 돌아오거나 다시 메인페이지로 돌아가거나

이런 여러 경우에 알아서 ajax 요청을 다시 해줍니다. 

 

 

 

 

장점3. 실패시 재시도 알아서 해줌

잠깐 인터넷이 끊겼거나 서버가 죽었거나 그러면 ajax 요청이 실패합니다.

실패했을 때는 재시도를 해줍니다.(4번, 5번 정도)

 

 

 

장점4. ajax로 가져온 결과는 state 공유 필요없음

지금 APP컴포넌트에서 유저이름 가져오는 AJAX 요청을 하고 있습니다. 

근데 그 유저이름 결과가 다른 컴포넌트에서도 필요하면?

• 유저이름을 props로 전송하면 됩니다. 

근데 실은 props 전송 필요없습니다. 

다른 컴포넌트에다가 유저이름 ajax 요청하는 코드 똑같이 또 적으면 됩니다.

react-query는 ajax 요청이 2개나 있으면 1개만 날려주고

캐싱기능이 있기 때문에 이미 같은 ajax 요청을 한 적이 있으면 그걸 우선 가져와서 씁니다. 

 

 

 

참고

react-query가 주장하는 장점은 

• server-state (DB데이터)를 프론트엔드에서 실시간 동기화해주는걸 도와준다고 합니다.(몇초마다 가져오는 방식이라 좀 비효율적일 수도 있다)

실시간으로 서버에서 데이터를 자주 보내려면 웹소켓이나 Server-sent events 같은 가벼운 방식들도 있습니다. 

그래서 react-query는 ajax 관련 기능개발 편하게 할  수 있는데에 의의가 더 있습니다.

 

 

 

RTK Query 라이브버리 

• ajax 요청후 Redux state 변경을 하고 싶다면 
• ajax요청하는 코드가 100만개 있으면 그걸 편리하게 관리