[TIL] React Query와 친해지기

메인 프로젝트 이후 동기분들의 결과물을 보다가 React query를 이용하신 분들이 꽤 많다는 걸 알게 되었다.

구두로만 '좋아요 써 보세요'라고 듣다가 모 기업 과제를 진행하면서 구체적으로 무엇이 좋은지 알아보았다.

 

참고자료는

1. 카카오 기술블로그 : React에서 서버 데이터를 최신으로 관리하기(React Query, SWR)

https://fe-developers.kakaoent.com/2022/220224-data-fetching-libs/

 

2. 오픈소스컨설팅 테크블로그 : React-Query 도입을 위한 고민 (feat. Recoil)

https://tech.osci.kr/2022/07/13/react-query/

 

3. 노경환님 블로그 : react-query 가이드

https://kyounghwan01.github.io/blog/React/react-query/basic/#%E1%84%89%E1%85%A1%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%92%E1%85%A1%E1%84%82%E1%85%B3%E1%86%AB-%E1%84%8B%E1%85%B5%E1%84%8B%E1%85%B2

 

4. 카카오페이 기술블로그 : 

https://tech.kakaopay.com/post/react-query-1/#fn-2

 

React Query는 React Application에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트 하는 작업을 도와주는 라이브러리입니다.
React Query는 우리에게 친숙한 Hook을 사용하여 React Component 내부에서 자연스럽게 서버(또는 비동기적인 요청이 필요한 Source)의 데이터를 사용할 수 있는 방법을 제안합니다.

 

내 경험에 비추어 봤을때 가장 와 닿는 장점은 아무래도

1) 간편한 retry / refetch 설정 ->  항상 신선한 데이터 상태 유지

useEffect에 dependency 설정해 두고 retry count 변수를 수정하는 등의 복잡한 과정을 편하게 처리해준다(ㅠ)

 

2) server data를 local 변수나 store에 저장하지 않고 분리해 사용할 수 있음

아직 예제를 다 이해하지는 못했지만 가능하다는 것만으로도 코드 작성하는 복잡성이 훠얼씬 줄어들 것 같다.

변경된 서버 데이터 상태를 알아서 반영해 주니, 시도님께서 애먹으셨던 투두리스트 업데이트 등의 문제도 간단히 해결할 수 있겠다.

 

redux 미들웨어와 axios interceptor를 공부하자고 마음먹자마자 과제를 시작하면서 react query에 올라타게 되었는데...

swr이든 react query든 axios를 완벽히 대체할 수는 없다고 하니까 직접 사용하면서 어느 부분에서 혼합해서 쓰면 좋을지 체득하면 좋겠다.

그러고 나면 종합해서 메인프로젝트 로그인 처리 과정도 리팩토링해야지!