Recoil→ React-Query 로 리팩토링 하기
프로젝트 초기
useEffect와 useState를 사용하여 API 데이터를 가져오는 방법을 구현했었습니다. 그러나 데이터가 변경될 때마다 새로고침을 해야하는 문제가 있어, 이를 해결하기 위해 useRecoilCallback을 사용하여 Recoil을 도입했습니다.
Recoil 사용으로 문제점
Recoil을 사용하는 과정에서 많은 시간이 소요되었습니다. 더불어 API 데이터를 관리하는 방법이 과연 Recoil로 하는 것이 맞는가에 대한 의구심이 들었습니다. 데이터가 변경될 때마다 새로고침을 하지 않아도 되는 상황이 필요하고, 컴포넌트에서 API를 호출하거나 캐시를 관리하는 작업은 너무나도 번거로웠기 때문입니다.
React-Query를 도입해보자!
그래서 API 데이터 관리를 React-Query로 사용하기로 결정했습니다. React-Query는 API 데이터를 관리하기 위한 라이브러리로, API 호출 결과를 캐시하고, 자동으로 캐시를 갱신하며, 서버의 데이터가 변경되었을 때 자동으로 새로운 데이터를 가져오는 장점이 있기 때문입니다. 이를 통해 컴포넌트에서 직접 API를 호출하거나 캐시를 관리하는 번거로운 작업을 할 필요가 없어졌습니다. 또한, API 데이터를 효율적으로 관리할 수 있고, 에러 처리를 쉽게 할 수 있게 되었습니다.
결론
프로젝트 초기에는 Recoil을 사용하여 API 데이터를 관리했었지만, React-Query를 도입하여 효율적으로 관리할 수 있다는 것을 알게되었습니다. 현재는 React-Query를 사용하여 리팩토링 중이며, API 정의, response type 정의, API fetch, 컴포넌트에서 사용하는 방법을 훨씬 편하게 구현할 수 있게 되었습니다. 프로젝트의 상황에 따라 적합한 방법을 선택하는 것이 중요하다는 것을 배웠습니다.
