react-qeury란,
React-Query는 React 애플리케이션에서 데이터를 관리하기 위한 새로운 라이브러리다.
애플리케이션에서 데이터를 가져오고 fetching, caching에 있어 간단하고 강력한 솔루션을 제공하고 React Application에서 서버상태를 불러오고 캐싱하며, 지속적으로 동기화 및 업데이트 하는 작업을 도와주는 라이브러리다.
또한 복잡하고 장황한 코드가 필요한 다른 데이터 불러오기 방식과는 다르게 React Component 내부에서 간단하고 직관적으로 API를 사용할수있다.
더 나아가 React Query에서 제공하는 캐싱, Window Focus Refetcing 등 다양한 기능을 활용하여 API요청과 관련된 번잡한 작업 없이 핵심로직에 집중할수있다.
(카카오페이 리액트쿼리 링크텍스트 )
이 react-query가 필요로 할때가 언제일까 ?
ajax요청하다보면 종종 필요로한 기능들중에
- 몇초마다 자동으로 데이터를 다시 가져오려할때
- 실패시 몇초 간격으로 재시도가 필요로 할때
- 페이지를 미리가져오려할때
- ajax 성공/실패 시 각각 다른 html을 보여주고자 할때
이럴때 react-query라는 라이브러리를 설치해서 사용하면 좋다는것인데 SNS, 코인거래소같은 실시간 데이터를 보여줘야하는 경우에 굉장히 유용한 기능이다. (이외에는 딱히 필요가 없다)
React-Query 설치 및 세팅
- 터미널에서 npm install react-query
- index.js 파일 열어서 아래와같이 1번~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>
);
- index.js
react-query로 ajax요청하는 방법이다.
그냥 ajax를 요청할수있으나 react-query를 통해 ajax를 요청시 편리한 기능이 제공 된다.
먼저 useQuery를 상단에서 import를 해주고 useQuery()로 ajax요청을 감싸면 된다.
import { useQuery } from "react-query"
let result = useQuery('작명', ()=>
axios.get('https://codingapple1.github.io/userdata.json').then((a)=>{
return a.data
})
)
<Navbar bg="dark" data-bs-theme="dark">
<Nav className="me-auto">
<Nav.Link className="ms-auto">
{ result.isLoading && '로딩중입니다.'}
{ result.error && '에러남.'}
{ result.data && result.data.name }
</Nav.Link>
</Nav>
</Navbar>
react-query의 장점
1. ajax 요청 성공/실패/로딩중 상태를 쉽게파악이 가능하다.
result 변수에 ajax 현재 상태가 알아서 저장이 되는데
- result.isLoading : ajax요청이 로딩중 true
- result.error : ajax요청이 실패시 true
- result.data : ajax요청이 성공시 데이터가 들어온다.
function App(){
let result = useQuery('작명', ()=>
axios.get('https://codingapple1.github.io/userdata.json')
.then((a)=>{ return a.data })
)
return (
<div>
{ result.isLoading && 'loading...' }
{ result.error && 'error!' }
{ result.data && result.data.name }
</div>
)
}
ajax 성공시엔 <A /> 보여주세요. 실패시엔 <B /> 보여주세요
이렇게 직접 state를 만들었어야했지만 이럴필요가 전혀없다는 장점이다.
2. 틈만 나면 자동으로 재요청함으로 신선한 데이터를 받아들인다. (refetch)
또한 리패치되는 간격이 설정이 가능한데 staleTime : 2000
2초 이내에는 다시 접속해도 refetch가 되지 않는식의 타이머기능 또한 가능하다.
let result = useQuery('작명', ()=>
axios.get('https://codingapple1.github.io/userdata.json').then((a)=>{
console.log('요청됨')
return a.data
}),
{staleTime : 2000 }
)
3. 실패시 retry 알아서 시도
여러차례 재시도를 하는것을 볼수가 있다.
4. state를 공유하지 않아도 된다.
현재 App 컴포넌트에서 유저이름을 가져오는 ajax요청을 하고있는데 이때 유저이름의 결과가 그 하위 컴포넌트중에 또 필요로 하다면 ?
→ 일반적으로 우리는 유저이름을 props 전송하면 된다 생각하겠지만 그럴필요가 없다.
Detail 컴포넌트에서 유저 이름 ajax요청하는 코드를 똑같이 또 적으면 된다.
react-query에서는 이때 똑같은 ajax 요청이 2개나 있으면 1개만 날려주며
캐싱기능까지도 있기때문에 이전에같은 요청을 한 ajax가 있을 경우 그걸 우선 가져와서 쓴다는것이다.
