reactquery.. 12분짜리 강의를 보는데 한시간 반 걸렸다.
미친거같다 ㅜㅜ 하루종일 졸았음..
쨋든 겨우겨우 다 보았으니.. 까먹으면 안되니까 복습겸 정리를 해보려 한다!
근데! 들어가기 전에 업데이트 사항이 있음
나도 강의 다 보고 알아서 코드에서 변경해줌
근데 그냥 react-query로 해도 되던데
뭔차이지?
쨋든~
라이브러리 이름이 react-query에서 @tanstack/react-query로 변경됨
- 설치
npm install @tanstack/react-query- import
import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query'- userQuery쓸 때
'작명' X
['작명'] O
useQuery(['작명'],
React-query
ajax요청하다보면 가끔 이런 기능들이 필요함
- n초마다 자동으로 데이터를 다시 가져오기
- 요청실패 시 n초 간격으로 재시도
- 다음 페이지 미리가져오기
- ajax 성공/실패 시 각각 다른 html 노출
이렇게 실시간 데이터를 보여줘야 하는 상황에서 쓰면 유용함
✨ 설치 & 셋팅
설치
터미널에npm install react-query
npm install @tanstack/react-query
QueryClient, QueryClientProvider 셋팅
// import { QueryClient, QueryClientProvider } from "react-query" import { QueryClient, QueryClientProvider } from @tanstack/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번. index.js파일에서 QueryClient와 QueryClientProvider를 improt하고, 2번. QueryClient()로 인스턴트 생성해 queryClient에 할당. 3번. Provider로 App 컴포넌트를 감싸준 뒤 client로 queryClient를 넘겨주면 App컴포넌트와 자식컴포넌트는 queryClient를 사용할 수 있음!
🤔 react-query로 ajax요청하는 법
그냥 ajax요청을 해도 되지만
react-query를 사용해서 ajax요청을 날리면 더 편리함!
// import { useQuery } from "react-query";
import { useQuery } from @tanstack/react-query
import { coinsFetcher } from "../api";
function App(){
let result = useQuery('작명', ()=> //중괄호, return 생략
axios.get('https://~~~')
.then((a)=>{ return a.data })
)
}상단에 useQuery import 후
useQuery()로 ajax요청을 감싸면 됨.
💡 useQuery()
인자로 queryKey와 fetcher를 받아 여러 status와 결과물인 data를 반환
그 중 isLoading은 boolean값으로 fetch중엔 true
fetch가 완료되면 false
🤔 react-query 장점
1. ajax요청 성공/실패/로딩중 상태를 쉽게 파악 가능
function App(){
let result = useQuery(['작명'], ()=>
axios.get('https://~~~')
.then((a)=>{ return a.data })
)
return (
<div>
{ result.isLoading && '로딩중' }
{ result.error && '에러남' }
{ result.data && result.data.name }
</div>
)
}ajax요청을 보낸걸 result라는 변수에 담았음
result라는 변수에 ajax 현재 상태가 알아서 저장 됨.
- ajax 로딩중일땐
result.isLoading이 true가 됨 - ajax 실패시엔
result.error이 true가 됨 - ajax 성공시엔
result.data이 true가 됨
그래서 요청 실패 시엔 ~보여주고 성공시엔 ~~보여주고가 쉬움
이걸 직접 개발하려면 state부터 만들어야 하는데 그런 수고가 덜함
2. 틈만나면 ajax 재요청(refetch)
페이지 체류 후 일정시간이 경과하거나
다른 창으로 갔다가 다시 페이지로 돌아오거나
다시 메인페이지로 가거나
이런 경우 ajax요청을 다시 해줌
📎 재요청간격 조절 가능
let result = useQuery(['작명'], ()=>{ return axios.get('https://~~~').then((a)=>{ return a.data }), { staleTime : 2000 } )+) 자동 refetch를 아예 끌 수도 있음.
3. 실패시 자동 retry
ajax요청이 실패되었을 경우 4~5번정도 재시도를 알아서 해줌
4. state 공유 필요 X
부모 component에서 유저이름을 가져오는 ajax요청을 날리고있는데,
자식 component로 유저이름 결과가 필요하면
state를 props전송 필요 없이 자식 component에서 같은 ajax요청 코드를 또 적으면 됨. 이럼 성능상 이슈는 없을까 걱정되는데..
react query는 캐싱기능이 있어 ajax요청 결과를 5분동안 기억함.
그래서 같은 ajax요청이 있을 경우 기억해두었던 ajax요청결과를 먼저 보여준다.
그리고 그 다음에 get/post 요청을 함.
📎 react-query가 주장하는 장점
server-state(DB데이터)를 프론트에서 실시간 동기화해주는걸 도와준다고 하는데,
ajax요청을 몇 초마다 계속 날려서 가져오는 방식이라 비효율적일 수 있음.실시간으로 서버에서 데이터를 자주 보내려면 웹소켓이나 Server-sent events같은 가벼운 방식들도 있어서
react-query는 ajax관련 기능 개발 편하게 할 수 있는데에 더 의의가 있음!
etc.
RTK Query 라이브러리도 있음
Redux Toolkit 설치하면 RTK Query도 기본적으로 사용가능한데 비슷한 기능들을 제공함.
다만 셋팅하는 코드가 좀 더러움사실 RTK Query는 다른 용도로도 많이 쓰인다.
ajax 요청 후 Redux state 변경을 하고 싶을때
원래 Redux state변경함수 안에선 ajax요청하면 안돼서 컴포넌트 안에서 해야 하는데
ajax 요청하는 코드가 다양하고 많으면 컴포넌트 안의 코드가 길어지고 관리도 귀찮아짐.이런걸 Slice 안에서 관리가능하게 도와줌.
그리고 ajax 요청하는 코드가 100만개 있으면 그걸 편리하게 관리할 수 있게 도와줌.
근데 코드가 약간 더러울 뿐
