예전에 실시간 웹 푸시 알람 기능을 구현하려고 파이어베이스를 사용하려다 그냥 ajax 통신으로 기능을 구현한적이 있었다.
그때는 생Js를 사용했는데 React에서는 react-query라는 것이 있다고 했다.
필요한 시점
- 몇초마다 자동으로 데이터를 다시 가져오게 할 때
- 요청실패시 몇초 간격으로 재시도할 때
- 다음 페이지 미리 가져올 때
- ajax 성공/실패시 각각 다른 html을 보여줄 때
설치
- 터미널 입력
npm install react-query - index.js 파일 열기
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>
);1,2,3번 순서대로 하면된다.
이렇게 하면 설치와 셋팅은 끝이 난다.
react-query로 ajax 요청하기
import { useQuery } from 'react-query';
function App(){
let result = useQuery('query', ()=>
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>
)
}이렇게 작성해주면 reulst라는 변수에 ajax 현재 상태가 알아서 다 저장이된다.
isLoading : ajax요청이 로딩중일 땐 true를 반환한다.
error : ajax요청이 실패시엔 true를 반환한다.
data : ajax요청 성공시엔 result.data 안에 데이터가 들어온다.
그래서 직접 개발하려면 state를 만들고 ajax 성공시에는 A컴포넌트 실패시엔 B컴포넌트를 보여주세요 해야했지만 그럴필요가 없다.
react-query 장점
위에 적힌것과 같이 ajax 요청 성공, 실패, 로딩중 상태를 알 수 있는 장점 뿐만이 아니라 다른 장점들도 있다.
- 알아서 ajax요청을 자동으로 해준다.
(재요청 간격 조절하는 방법이 있다.)
let result = useQuery('query', () =>{
return axios.get('https://codingapple1.github.io/userdata.json').then((a) =>{
console.log('요청됨');
return a.data
}),
{ staleTime : 2000 } // refetch 타이머 조정
})staleTime : 몇밀리세컨즈로 해놓으면 refetch 타이머를 조정해줄 수 있다.
-
실패시에도 재시도를 알아서 4~5번 정도 반복 해준다.
-
ajax로 가져온 결과는 state 공유가 필요가 없다.
-> 현재 App 컴포넌트에서 유저이름을 가져오는 ajax요청을 날리고 있다.
근데 그 유저이름 결과가 다른 컴포넌트에 필요하면 유저이름을 props전송을 시켜줄 수 있다.
근데 사실 이는 필요없는 과정이다.
다른 컴포넌트에다가 유저이름을 요청하는 ajax 코드를 똑같이 적어놓으면 react-query가 알아서 ajax요청 2개를 1개로 줄여서 요청을 보내고, 캐싱기능이 있기에 이미 같은 ajax요청을 한적이 있으면 그 데이터를 우선적으로 가져오게 된다.
참고
react-query가 주장하는 장점은
server-state (DB 데이터)를 프론트엔드에서 실시간 동기화해주는걸 도와준다고 합니다.
근데 ajax 요청을 몇초마다 계속 날려서 가져오는 방식이라 http1을 쓰는 서버나 브라우저라면 좀 비효율적일 수도 있습니다.
실시간으로 서버에서 데이터를 자주 보내려면 웹소켓이나 server-sent events 같은 가벼운 방식들도 있습니다.
그래서 react-query는 ajax 관련 기능개발 편하게 할 수 있는데에 의의가 더 있습니다.
근데 http2나 3을 지원하는 브라우저나 서버를 이용한다면 GET POST 요청 자주해도 서버 부담이 적을 수 있어서 상관없을듯요
