민프
[React][TypeScript] React Query-1 React Query란? 본문
리액트 개발자라면 상태 관리를 어떻게 해야 좋을지 생각해보게 된다.
상태관리 라이브러리로는 Redux, MobX, Recoil 등등.. 이 있는데 이 라이브러리들은 클라이언트 상태 관리에는 유용하지만, 서버 상태와 동기화되지 않기 때문에 프론트엔드 개발자들은 직접 상태를 업데이트해 줘야 하는 불편함이 있다.
즉 서버 상태에 따른 클라이언트 상태 관리가 잘 되지 않았다는 것 인데 이러한 불편함을 해소해주기 위해 React-Query, SWR, Redux-saga, Redux-Thunk 가 있는데 Redux를 알아보던 중 이러한 글을 보았다.
https://fe-developers.kakaoent.com/2022/220224-data-fetching-libs/
React에서 서버 데이터를 최신으로 관리하기(React Query, SWR)
카카오엔터테인먼트 FE 기술블로그
fe-developers.kakaoent.com
https://techblog.woowahan.com/6339/
Store에서 비동기 통신 분리하기 (feat. React Query) | 우아한형제들 기술블로그
오늘은 주문에서 사용하는 FE 프로덕트의 구조 개편을 준비하며 FE에서 사용하는 Store에 대해 개인적인 고민 및 팀원들과 검토하고 논의했던 내용을 소개합니다. 이 과정에서 생긴 여러 가지 의
techblog.woowahan.com
https://tech.kakaopay.com/post/react-query-1/
카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유 | 카카오페이 기술 블로그
카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유에 대해 설명합니다. 이 글은 연작 중 1편에 해당합니다. 1편: 카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유, 2편: React Que
tech.kakaopay.com
https://tech.kakao.com/2022/06/13/react-query/
My구독의 React Query 전환기
안녕하세요, 톡FE파트에서 My구독, 이모티콘 스토어를 개발하고 있는 Hugo입니다.My구독은 정기 결제를 통해 ‘이모티콘 플러스’, ‘톡서랍 플러스' 서비스를 이용할 수 있는 구독형 서비스입니
tech.kakao.com
위 글에서 Redux를 사용하였을때에는 서버 데이터를 위한 로직이 과도하게 커지고, 그로 인해서 Redux를 활용하기 위한 보일러 플레이트가 비대해진다는 단점이 있었는데 React-Query를 사용함으로써 프로젝트 구조가 단순해졌고, 캐싱 처리가 더 간단해졌으며, Redux와 Redux-Saga를 사용할 때는 Success, Failure 값을 useEffect의 deps로 전달해서 처리해야 하는 과정이 필요했었는데, 이 과정을 onSuccess와 onError로 간단하게 처리할 수 있었다고 하였다.
그렇다면 React-Query란 무엇일까
공식문서는 아래와 같다.
https://react-query-v3.tanstack.com/
TanStack Query | React Query, Solid Query, Svelte Query, Vue Query
Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue
tanstack.com
공식문서에서는 React-Query는 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어주는 React 라이브러리 라고 설명하고있다. 기존에 Redux, Mobx, Recoil과 같은 다양한 상태 관리 라이브러리들이 있긴 하지만, 클라이언트 쪽의 데이터들을 관리하기에 적합할 순 있어도 서버 쪽의 데이터들을 관리하기에는 적합하지 않는 점들이 있어서 등장하게 되었다.
kakao TECH FE 기술블로그(SWR에서 React로 변경)에서 웹을 개발할 때 데이터는
- Local State : 리액트 컴포넌트 안에서만 사용되는 State
- Global State: Global Store에 정의되어 프로젝트 어디에서나 접근할 수 있는 state
- Server State: 서버로부터 받아오는 state
로 크게 나눌 수 있는데 기존에는 Redux와 같은 상태 관리 라이브러리에 Glovbal State와 Server State를 전부 포함하는 방법으로 프로그래밍을 했었는데, React-query와 같은 data fetching 라이브러리를 사용함으로써 상태 관리 라이브러리에서 비동기 로직을 제거하여 관심사가 분리되고 선언적으로 프로그래밍을 할 수 있게 되었다고 한다.
이와 같이 React-query는 서버 데이터 상태관리를 지원한다. 따라서 이 점을 이용하여 클라이언트 데이터와 서버 데이터의 강한 의존도를 낮출 수 있는 장점을 가지고 있다.
데이터 캐시 처리는 직접 구현하려면 고려해야 할 게 많고, 데이터를 언제 갱신해야 하는지 여부를 파악하기가 어려워 매번 다시 요청을 보낼때가 있는데 이렇게 되면 성능 최적화가 되지 않아 클라이언트쪽과 서버 쪽 모두 부담이 되게 되는이 React-query는 이러한 부분을 해결해준다.
이번 데이터 갱신 여부가 중요한 프로젝트를 하게 되는데 React-query를 사용하면 핸들링하기에도 좋을 것 같다.
다음포스팅에서는 React-query 개발 문서를 보면서 직접 구현해봐야겠다.
