React Query
React Query란?
상태관리 라이브러리 중 하나. 리액트 앱 내에서 데이터 패칭, 캐싱, 동기화, 서버 데이터 업데이트 등을 쉽게 만들어준다.
사용하는 이유
구글링을 통해 react-query를 사용하는 이유에 대해서 찾아보니 간단하게 다음과 같은 이유가 있었다.
- 서버 쪽 데이터들을 좀 더 쉽게 관리하기 위해 ⇒ 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 쉽게 다룰 수 있도록 도와줌
- 클라이언트 상태와 서버 상태를 명확히 구분하기 위해.
그 중 서버 쪽 데이터를 좀 더 쉽게 관리하기 위해서 사용해보았다. 기존에 redux를 사용했을때는 데이터를 가져오기 위해 axios를 따로 불러오고 그걸 또 변수에 담고 했는데 react-query의 경우 axios 통신 보낼 api만 간단하게 설정해놓았을때 바로 data로 변수 사용이 가능했기때문에 편리했다.
Redux , React Query
리덕스에서는 비동기 작업을 처리하기 위해서는 미들웨어(redux-thunk,redux-saga)를 사용해야한다.
리덕스에서 미들웨어가 필요한 이유
기존의 리덕스는 동기적인 흐름으로 동작한다
(액션 객체 생성 → 액션이 발생하면 디스패치가 이를 스토어에 알리고 → 리듀서가 정해진 로직에 의해 액션 처리후 새로운 상태값 반환 )
⇒ 하지만 외부 데이터를 요청해서 그에 따른 응답을 화면에 보여주거나, 시간을 딜레이시킨다던지 이러한 경우에는 동기적인 흐름만으로는 처리하기 힘들다
따라서 리덕스를 사용하면서 비동기 작업을 처리하기 위해서는 미들웨어가 필요하다.
리덕스에서는 비동기 작업을 처리하기 위해서는 미들웨어(redux-thunk,redux-saga)를 사용해야한다.
하지만 react-query는 이 작업을 매우 간편하게 만들어주는데다가 많은 기능들을 제공해주고 있다.
또한 리덕스에서 기존에 직접 만들어서 사용했던 기능들을 별도의 옵션으로 지원하여 React-Query에서는 복잡한 코드를 짧은 코드로 대체할 수 있게 되었다
장점, 기능
- 데이터의 캐시 처리를 간편하게 할 수 있는 기능 제공
- 데이터에 변경점이 있는 경우에만 리렌더링 유발
- 데이터가 오래 되었다고 판단 되면 다시 get
- 동일 데이터 여러번 요청하면 한번만 요청(옵션에 따라 중복 호출 허용 시간 조절 가능)
- react hook과 사용하는 구조가 비슷
- client데이터와 server데이터 분리
- isLoading, error 등으로 데이터 상태 확인 가능
React Query 사용법
useQuery(get) : 서버 상태를 가져오기 위해 사용
const requestData = useQuery(쿼리 키, 쿼리 함수, 옵션);
쿼리키 : 문자열 또는 배열, 다른 컴포넌트에서도 해당키를 사용하면 호출 가능.
⇒ unique key를 배열로 넣으면 query함수 내부에서 변수로 사용 가능
쿼리함수 : 비동기함수(api호출 함수)
옵션 : useQuery 기능 제어(언제까지 데이터를 저장할건지, 상태 전환되는 시간등 여러가지 옵션 존재)
⇒ return 값은 api의 성공, 실패여부, api return 값을 포함한 객체
useMutation(post,update,delete) : data를 수정하기 위해서 사용
const requestData = useMutation(API 호출 함수, 콜백);
API 요청 함수를 호출하여 요청이 이루어짐
콜백함수 → 성공여부, 끝, 함수 실행되기전과 같이 시기에 따른 콜백함수 작성가능
사용방법
참고 및 출처
My구독의 React Query 전환기react-query가 redux같은 전역 상태관리 라이브러리를 대체할 수 있을까react-query
[웹FE 심화 스터디] 5주차 - react-query / SWR
[React] React-Query 사용 이유 & Queries 개념편