React-Query (1)

우현민·2021년 4월 19일
0
post-thumbnail

React-Query

최근 리덕스를 사용하던 중 리덕스를 이용해 데이터를 관리하는 것에 대한 불편을 느꼈고, 최근 유행인 React-Query를 공부해 보기로 했다.

이 시리즈는 react-query의 공식문서를 적당히 요약하고 필자의 생각을 합하여 정리한다.

Getting Started

React에서 상태를 관리하는 대표적인 방식은 state이다. 하지만 하나의 state로 어플리케이션을 관리하기에는 상당한 무리가 있어, 상태를 관리해주는 툴이 존재한다. 대표적인 것이 reduxmobX이다.

이들은 분명 훌륭한 툴이나, 보일러플레이트 코드가 너무나도 많고, 처음에 이해하기도 배우기도 정말 어렵다는 단점이 있다. 리덕스의 경우 코드가 많으니 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 세 개념에 집중하자.
  • Devtool은 React에서는 지원되지만 아직 React Native에서는 아니다 (210419 기준)
  • 타입스크립트로 구현되어 있다. 만약 커스텀 훅을 만들고 싶으면, 결과와 에러 타입을 분명하게 써 줘야 한다. 참고
profile
프론트엔드 개발자입니다

0개의 댓글