최근 리덕스를 사용하던 중 리덕스를 이용해 데이터를 관리하는 것에 대한 불편을 느꼈고, 최근 유행인 React-Query를 공부해 보기로 했다.
이 시리즈는 react-query의 공식문서를 적당히 요약하고 필자의 생각을 합하여 정리한다.
React에서 상태를 관리하는 대표적인 방식은 state
이다. 하지만 하나의 state
로 어플리케이션을 관리하기에는 상당한 무리가 있어, 상태를 관리해주는 툴이 존재한다. 대표적인 것이 redux
와 mobX
이다.
이들은 분명 훌륭한 툴이나, 보일러플레이트 코드가 너무나도 많고, 처음에 이해하기도 배우기도 정말 어렵다는 단점이 있다. 리덕스의 경우 코드가 많으니 redux-toolkit
처럼 코드 양을 줄여주는 라이브러리가 있을 수준이다.
이 훌륭한 툴들의 치명적인 단점은, 상태 관리를 위해 '순수 함수'를 지향한다는 점이다. 순수 함수와 서버 상태는 전혀 어울리지 않는다. 서버 상태에 대한 관리는 절대 인풋에 따라 동일하지 않고, 동일할 수 없다. 때문에 redux에서 서버와 소통하는 것은 상당히 모순적이다. 이외에도 캐싱, 데이터의 존속 여부 등 클라이언트의 철학으로 서버와 소통하는 데에는 한계가 존재한다.
While most traditional state management libraries are great for working with client state, they are not so great at working with async or server state. This is because server state is totally different.
이런 모순을 짊어지는 라이브러리 - redux-thunk
, redux-saga
등이 존재하여 상태 관리와 비동기 처리 사이의 괴리를 줄여 주지만, 결국 redux를 사용한다는 점에서 진정한 해결책은 아니다.
react-query는 이런 모순을 훌륭하게 해결해 준다.
npm i react-query
로 설치한다.query
, mutation
, query invalidation
세 개념에 집중하자.