Redux Toolkit - RTK Query 사용 후기 및 정리

Redux Toolkit 공식 문서에 따르면, RTK Query는 강력한 데이터 패칭(fetching)과 캐싱(caching) 도구이다.
나 역시 약 3개월간 RTK Query를 사용하면서 직접 느낀 장점들이 있었다.

RTK Query 장점

• API로부터 호출된 데이터가 자동으로 캐싱된다.
  일반적으로 조건이 변경될 때마다 API를 재호출해야 하지만,
  RTK Query는 이전 조건으로 돌아가면 캐싱된 결과를 그대로 활용해 API 재요청을 줄여준다.
• API 응답 상태 관리를 자동화한다.
  Redux-thunk에서는 loading 상태를 직접 설정해야 했다.
  하지만 RTK Query는 isLoading, status 등의 프로퍼티를 기본 제공해 상태 관리가 간단하다.

const { data, error, isLoading } = useGetUserInfo('12345');

---

Queries

데이터를 조회(SELECT)할 때 사용하는 훅이다.
쿼리의 endpoint에는 providesTags를 설정할 수 있으며,
이를 통해 캐시 무효화와 자동 리패칭을 관리할 수 있다.

쿼리 훅의 인자

• queryArg: API 호출에 필요한 파라미터
• queryOptions: 쿼리 동작 방식 설정 옵션

쿼리 훅 옵션 예시

• skip (default: false): 쿼리 호출을 건너뛸지 여부
• pollingInterval (default: 0): 밀리초 단위로 재요청
• selectFromResult: 응답값 중 필요한 데이터만 필터링
• refetchOnMountOrArgChange (default: false): 마운트 시마다 쿼리 리패칭
  • 숫자로 설정 시, 마지막 성공 응답과의 시간 차를 계산하여 리패칭
• refetchOnFocus (default: false): 브라우저 포커스 시 리패칭
• refetchOnReconnect (default: false): 네트워크 재연결 시 리패칭

쿼리 예제

const { data, error, isLoading } = useGetUserInfo({
  id: 'testUser'
}, {
  skip: false,
  pollingInterval: 3000
});

---

Mutations

POST, PUT, DELETE 등 데이터 변경이 필요한 경우 사용한다.

Mutation은 데이터 변경과 동시에 invalidateTags를 통해 관련된 캐시를 무효화하고, 리스트 API를 다시 불러오게 해준다.

Mutation에서 제공하는 상태 프로퍼티

• data: 가장 최근의 응답 데이터
• error: 에러 객체
• isUninitialized: 아직 요청을 보내지 않은 상태
• isLoading: 요청 중인 상태
• isSuccess: 요청이 성공했을 때
• isError: 요청이 실패했을 때
• reset: 응답 캐시를 초기화하고 상태를 리셋

---

요약

종류	주 용도
Queries	데이터 조회 시 사용 (SELECT)
Mutations	데이터 추가, 수정, 삭제 시 사용 (UPDATE, DELETE)

 

providesTags와 invalidateTags를 통해 자동 캐시 무효화 및 리패칭이 가능하므로, UI와 상태 관리가 훨씬 간편해진다.