Recoil / Tanstack query 역할 분리하기

 

데이터 페칭부터 모든 상태관리 Recoil 사용 후기 

recoil을 사용했을 때 가장 좋았던점

1. 간편한 상태 관리: Recoil은 간단하고 직관적인 상태 관리를 제공합니다. RecoilRoot를 설정하고 atom을 사용하여 상태를 관리할 수 있어서 useState를 사용하는 것과 유사한 방식으로 상태를 다룰 수 있습니다. 또한 selector를 사용하여 상태값을 필터링할 수 있어서 상태 관리가 더욱 용이합니다.
2. 성능 최적화: Recoil은 Context API와 비교하여 더 나은 성능을 제공합니다. Context API는 상태 변경 시 Provider로 묶인 모든 컴포넌트를 리렌더링하지만, Recoil은 해당 컴포넌트만 리렌더링하여 불필요한 리렌더링을 방지하고 성능을 최적화합니다.
3. 코드의 단순성과 직관성: Recoil은 코드가 단순하고 직관적입니다. atom으로 데이터를 저장하고 selector로 데이터를 필터링하며, 사용할 때는 useRecoilValue, useRecoilState 등의 명확한 훅을 사용하여 편리성을 제공합니다.
4. 데이터 페칭이 가능함: Recoil은 selector와 selectorFamily를 통해 비동기 데이터 페칭이 가능합니다. 이를 통해 서버 데이터 관리부터 전역 상태 관리까지 Recoil을 사용하여 효율적으로 데이터를 관리할 수 있습니다.

이러한 이유로 나는 Recoil을 사용하여 상태 관리부터 데이터 페칭까지 다양한 기능을 구현했습니다. Recoil은 비동기 데이터 쿼리를 다룰 수 있도록 설계되어 있어서 데이터 페칭에서 캐싱 처리까지 가능하여 큰 문제가 없을 것으로 기대했습니다.

 

 

selector

 

 

selectorFamily

 

 

Recoil로 사용했을때 불편했던점. 

1. 데이터 페칭 비동기에 대한 예외처리 추가: 데이터가 비동기적으로 들어오는 경우, 데이터가 없을 때에 대한 예외처리를 추가해야 합니다. 예를 들어, 데이터가 아직 response를 받기 전이라면 초기값이나 undefined에 대한 예외처리를 해주어야 합니다.
2. key(캐싱) 초기화 기능이 unstabled 하다: Recoil에서도 key 값을 초기화하는 기능이 존재합니다. useRecoilRefresher_UNSTABLE() 함수를 사용하면 키(캐시)를 초기화할 수 있어서 비동기 요청 시 새로운 요청을 가능하게 할 수 있습니다. 그러나 이 함수가 UNSTABLE한 상태이기 때문에 사용하는 입장에서는 불안할 수 있습니다.

이러한 불편한 점들을 고려하여 Recoil을 사용할 때는 이러한 부분들에 대한 대응이 필요하며, 필요한 경우에는 다른 상태 관리 라이브러리나 커스텀 솔루션을 고려할 수도 있습니다.

 

 

 

 

 

Tanstack-query를 선택하게 된 이유  ( + recoil )

1. 서버 상태관리
   - Recoil을 사용하여 서버 상태를 관리하고 있었지만, 서버 상태 관리를 위해 Tanstack Query를 사용하기로 결정했습니다. 이는 Recoil이 SSR을 지원하지 않기 때문에 서버 측에서 상태 관리에 한계가 있기 때문입니다. 현재 우리의 서비스는 React를 사용하고 있으며, CSR 기반으로 구축되어 있지만, 나중에는 SSR을 도입할 수도 있다는 가능성을 염두에 두고 있습니다. 그래서 이제는 서버 측 상태 관리를 Tanstack Query로, 클라이언트 측 상태 관리를 Recoil로 사용하는 것이 좋을 것으로 판단했습니다.
   
   
2. Tanstack Query는 useInfiniteQuery를 제공하여 무한 스크롤 기능을 쉽게 구현
   - 이전에 Recoil로 무한 스크롤 기능을 구현할 때는 모든 기능을 사용자 정의해야 했지만, Tanstack Query를 사용하면 useInfiniteQuery 훅을 사용하여 데이터를 불러오고 스크롤할 때 자동으로 새로운 데이터를 가져올 수 있습니다. Recoil에서는 무한 스크롤을 구현하기 위해 상태를 관리하고 새로운 데이터를 요청하는 로직을 직접 작성해야 했습니다. 하지만 Tanstack Query를 사용하면 useInfiniteQuery를 호출하고 필요한 쿼리 로직을 정의하면 무한 스크롤에 필요한 모든 기능을 내장된 방식으로 사용할 수 있습니다.  따라서 Tanstack Query를 사용하면 무한 스크롤과 같은 기능을 더 쉽게 구현할 수 있으며, 무엇보다도 적은 코드로 더 많은 기능을 구현할 수 있습니다.
   
   
3. 성능 최적화
   - Recoil은 클라이언트 측에서의 상태 변경에 특화되어 있어서 컴포넌트의 리렌더링을 효율적으로 관리합니다. 반면에 React Query는 서버와의 데이터 통신을 관리하고 캐싱을 제공하여 성능을 최적화합니다. 따라서 각각의 라이브러리가 최적화된 기능을 제공하여 전체적인 성능을 향상시킬 수 있습니다.
   
   
4. 분리된 역할과 책임
   - Recoil은 클라이언트 상태를 관리하고 각각의 컴포넌트 간의 상태 공유를 담당하며, React Query는 서버와의 데이터 통신 및 상태 관리를 담당합니다. 이렇게 역할과 책임이 분리되면 각 라이브러리가 각각의 최적화된 방식으로 동작하여 코드의 가독성과 유지보수성이 향상됩니다.
   

 

 

 

 

 

 

https://recoiljs.org/ko/docs/guides/asynchronous-data-queries

비동기 데이터 쿼리 | Recoil