[🚨응급실 알리미] Recoil과 React-query를 선택한 이유

🚨응급실 알라미, 상태 관리 라이브러리는 무엇을 선택할까❓

필자는 FE 2명으로 구성되어 응급실 알라미 서비스를 개발하였습니다.
응급실 알라미는 경증 질환의 일반인을 대상으로 한 플랫폼으로, 공공데이터 API를 활용하여 필요한 데이터를 가져옵니다.
우리 팀의 고려사항은 다음과 같습니다.

1. 공공데이터 API를 활용
2. 상태 관리 라이브러리 미사용 경험
   - 필자는 이 프로젝트를 통해 Redux나 다른 상태 관리 라이브러리를 처음 사용해보려고 합니다. 반면 다른 팀원은 이미 Redux를 경험한 상태입니다. 
3. 제한된 개발 기간(2주)

따라서 이러한 고려사항을 가지고  상태 관리 라이브러리 선택에 고민한 과정을 담은 글입니다. 

 

1. Redux

Redux는 상태 관리 라이브러리 중 가장 오래되고, 가장 많이 사용되는 라이브러리입니다. Redux는 상태 관리의 일관성 및 확장성을 보장합니다. 또한 상태 관리의 테스트가 쉽고, 다양한 커뮤니티 지원을 받을 수 있습니다. 

단점

1.  Redux는 보일러 플레이트 코드량이 많다.
   - redux-toolkit과 같은 라이브러리를 사용하여 보일러 플레이트 코드량을 줄일 수 있지만,  Redux로 비동기 데이터를 관리하는 작업에는 여전히 많은 보일러 플레이트 코드가 필요합니다.
   - 전체적으로 코드를 작성하는 양이 많아지게 되고, recoil에 비해 상대적으로 러닝커브가 있는 redux와 redux-toolkit을 학습하면서 프로젝트를 진행하기엔 무리라고 생각했습니다.
2. Redux는 API통신 및 비동기 상태 관리를 위한 라이브러리는 아니다.
   - Redux는 주로 상태 관리에 중점을 두고 있지, API 통신과 비동기 상태관리를 위한 라이브러리는 아닙니다. 이런 작업을 Redux로 처리하려면 Redux Middleware가 추가적으로 필요하며, 이 또한 API 상태를 관리하기 위한 규격화된 방식은 없습니다.

2. Recoil

Recoil의 장점은 간단하고 직관적인 API를 제공하여 쉬운 사용성을 가지고 있습니다. 또한 Redux와 비교했을 때, Recoil은 코드의 양을 줄일 수 있어 개발을 더 빠르게 진행할 수 있습니다. 

 

Recoil의 Selector는 비동기 처리를 할 수 있습니다. 그와 동시에 캐싱 기능이 있기 때문에 같은 응답을 하는 api 호출을 추가적으로 요청하지 않기 때문에 성능적으로 유리합니다. 또한 React.Suspense를 지원하기 때문에 비동기 데이터를 기다리는 동안 로딩 상태를 보여줄 수 있습니다. 

단점으로는 Redux와 같이 안정화된 Devtools가 없기 때문에 디버깅시 Redux보단 상태의 변경을 파악하기 더 어렵고, snapshot이라는 개념이 공식문서에 존재하지만 아직 개발중라고 합니다.

https://recoiljs.org/docs/guides/dev-tools/

3. React-query

필자는 API요청과 비동기 데이터를 관리하기 위해 React Query 사용을 고민했습니다.
React Query는 API 호출의 결과를 캐싱하는 기능을 제공합니다. 데이터의 유효성을 추적하고 데이터가 변경되면 자동으로 재로딩하여 최신 데이터를 유지합니다. 또한 다양한 옵션과 설정을 통해서 캐싱, 재로딩 동작, 에러 처리, 데이터 변환 등 커스터마이징할 수 있습니다. 

결론적으로, 응급실 알라미의 전역 상태는 API와 관련된 사항이 많고, 2명이서 2주 안에 완성을 목표로 하기 때문에 조금 더 직관적이고 사용하기 쉬운 Recoil를 사용하는 것이 더 적합하다고 판단했습니다. 또한 React-Query를 활용하여 서버 데이터와 클라이언트 데이터를 분리하였습니다.
내부적인 클라이언트쪽에서 관리 할 전역 상태 관리를 할 경우엔 Recoil을 사용하고, 서버쪽 데이터를 관리할때는 React Query를 사용하여 데이터를 자동으로 캐싱하여 관리하고, 30분마다 데이터를 refetch하기로 하였습니다.

 

---

참고자료
https://tech.kakaopay.com/post/react-query-1/#-%EC%82%AC%EC%9A%A9%EC%9E%90-%EA%B2%BD%ED%97%98-%ED%96%A5%EC%83%81%EC%9D%84-%EC%9C%84%ED%95%9C-%EB%8D%94-%EB%A7%8E%EC%9D%80-%ED%95%B4%EC%95%BC-%ED%95%A0-%EC%9D%BC

https://techblog.yogiyo.co.kr/recoil%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%86%90%EC%89%AC%EC%9A%B4-%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC-b70b32650582

https://tanstack.com/query/latest/docs/react/overview