해당 글은 우아한테크코스 5기 팀바팀 크루 루루가 작성했습니다!

React query 도입이유

react-query 사용을 고려하게된 이유

팀바팀의 핵심 기능인 캘린더는 등록,수정,삭제가 일어날 때 전체 일정과 개별 일정의 최신화가 보장되어야 함. 이후에 추가될 기능들 또한 최대한의 최신화가 보장되어야 함. 즉 서버,클라이언트 데이터를 분리하여 관리 할 수 있기 때문에 도입을 고려하게 됨.

react-query을 도입했을 때 장점

• 캐싱

  • 동일한 데이터를 여러번 요청하면 캐싱된 데이터를 가져오기 때문에 불필요한 통신을 줄일 수 있음.

    • 캘린더에서 달을 이동할 때 항상 전체 일정을 get한다. 전체 일정에서 개별 일정을 조회할 때마다 해당 일정을 get한다.

• get한 데이터에 대해 update를 진행하게 되면 자동으로 get을 수행한다.

  • 개별 일정에 대해 수정, 삭제를 하게되면 전체 일정 또한 invalidateQueries를 통해 쿼리가 오래되었다는 것을 알려주어 데이터를 가져오게 한다.
• 비동기 과정을 선언적으로 관리할 수 있다.
• 서비스의 특성상 각각 기능별 페이지와 모아보기 페이지에서 데이터를 사용하는데 이 데이터를 저장하는 불필요한 전역 상태를 만들지 않아도 된다.
• react-query를 통해 성공, 에러, 로딩, 패칭 등 다양한 상태를 알 수 있기 때문에 간단하게 상황에 따라 맞는 UX/UI를 사용자에게 제공할 수 있다.

• UX

  • 협업을 위한 서비스 특성 상 서버 상태 동기화의 필요성이 높아짐

    • react-query의 background refetch를 활용하여 사용자에게 서버의 최신 상태를 보여줄 수 있음
    • refetchOnWindowFocus 등을 활용하여 탭 전환 / 윈도우 포커스 시 그동안 다른 사용자가 업데이트한 데이터를 보여줄 수 있음
  • Suspense, ErrorBoundary를 할용하여 선언적으로 비동기 로직의 로딩 / 에러 상태를 처리할 수 있음
  • 캐싱을 활용하여 불필요한 비동기 요청 횟수를 줄일 수 있음