데이터 패칭, 캐싱 및 상태관리
RTKQuery, React Query, SWR은 React 기반의 애플리케이션에서 데이터 패칭, 캐싱 및 상태관리에 용이한 도구이다.
데이터 패칭(Data Fetching)
원격 서버(API Server 등)에서 필요한 데이터를 가져오는 과정을 뜻한다. 주로 API를 활용해 이루어지고, 이를 필요에 따라 호출하고 응답을 처리한다
캐싱(Caching)
한 번 가져온 데이터를 메모리나 로컬에 임시 저장해 두는 행위를 말한다. 캐싱을 통해 같은 요청이 있을 때마다 새로 서버에서 데이터 패칭을 할 필요없이 기존에 가지고 있는 데이터를 즉시 보여줄 수 있기 때문에 성능과 사용자 경험(UX)적으로도 좋은 것 같다
상태 관리(State Management)
애플리케이션의 전반적인 상태를 관리하는 것을 말한다. 특히 웹 애플리케이션에서 데이터를 패치한 후, 상태가 변경이 되면 이를 관리하고 반영하는데 이를 상태관리에 도움이 되는 것 같다
SWR
•
간편한 API로 빠르게 시작할 수 있다(useSWR)
•
Stale-while-revalidate 전략 사용
◦
오래된 데이터 사용 후 검증을 말한다
•
서버 데이터 패칭을 사용할 때 사용자 경험을 개선하려는 개발자에게 적합하다고 한다
•
전역 상태 관리에서 필요한 Redux 및 기타 도구와 통합이 정말 쉽다고 한다
•
내가 생각하기에 작은 규모나 간단하게 사용하기에는 좋은 것 같다. 마치 useReducer와 같은 느낌이랄까?
RTK Query
•
Redux Toolkit과 함께 제공되고 Redux 에코시스템의 일부이다
•
데이터 패칭 및 상태 관리를 위해 Redux를 사용해야하는 경우에 조합성이 너무 좋다. 당연하게도 같은 라이브러리에서 제공하기때문이라고 생각한다.
•
Redux의 발전에 따라 앞으로 기능이 계속해서 확장될 가능성이 크다고 생각한다
현재 나는 42Manito(멘토링서비스)에서 사용중이다.
•
선택한 이유가 있는데 SSR과 CSR을 같이 섞어서 사용하는 프로젝트인데 이때 상태 관리를 위해 Redux를 사용해야 하는 이유가 있었고, 캐싱이라는 특징과, 기능별로 관심사를 분리할 수 있다는 장점도 있는 것 같다
•
그리고 Tag로 묶어서 data의 update행위를 했을때 같은 Tag로 묶여 있는 캐싱 데이터들을 강제 Refetch를 시킬 수 있다
•
그리고 크롬 확장 도구중에 Redux 도구가 디버깅하기에 정말 좋은 것 같다.... 최고최고 
React Query
•
광범위한 설정 및 API를 통해 매우 유연한 기능을 제공하는 것 같다
•
위에 소개 했던 도구들에 비해 러닝커브가 확실히 존재하는 도구인 것 같다.... 나도 아직 안써....봤....
•
Pagination, Infinite Scroll과 같은 좋은 기능들도 지원한다
결론으로는?
•
프로젝트의 성격과 도구의 숙련도에 따라 선택지를 고르면 될 것 같다. 그리고 무엇을 선택하든 선택하고 아키텍처를 구성하는 것에 있어서는 재밌는 일이 될 수 있을 것 같다. 물론 개발중에는 "왜 이 기능이 없지?"하며 짜증이 치밀어 오를때도 있지만... 만들어서 쓰죠 뭐..... 하하하하하 오늘은 이만!