Trouble Shooting

[Facebook chat] React-Query 를 사용한 데이터 페칭 및 캐싱 전략

ToggleDoc 내에서 페이스북 채팅 기능을 구현하는 과정에서 다양한 데이터 페칭 및 상태 관리 전략이 필요했다. 이 포스트에서는 리액트 쿼리(React Query)를 사용하여 이러한 문제 상황을 어떻게 극복했는지, 특히 데이터 페칭 및 캐싱 전략에 초점을 맞추어 문제를 해결했던 기록을 남겨두었다.

기존 상태 관리 및 데이터 페칭 전략

ToggleDoc의 기존 상태 관리 및 데이터 페칭은 React-redux와 Redux-saga를 사용했다. 이 방식은 애플리케이션의 상태를 Generator Function 등을 통해 세밀하게 관리할 수 있게 해주었지만, 불필요한 보일러플레이트가 많아 코드 작성에 조금 더 많은 시간이 필요하고, 가독성이 좋지 않은 문제가 있었다. 또한 서버와의 긴밀한 데이터 동기화가 필요한 채팅 기능의 특성상 더 효율적인 방법을 찾을 필요가 있었다.

React-Query의 도입

최근 React 생태계에서는 React-Query, Zustand와 같이 더 간편하고 효과적으로 데이터 및 상태 관리를 할 수 있는 라이브러리들이 부상하고 있다. 이러한 개발 트렌드에 맞춰, 서버와의 데이터 동기화가 중요한 채팅 관련 데이터 관리를 React-Query로 전환하기로 결정했다. 반면, 채팅 내용을 렌더링하는 UI 부분에 필요한 데이터는 기존의 React-redux를 통한 관리 로직을 유지하기로 했다. 이로써 기술 스택을 최적화하고, 각 라이브러리의 장점을 최대한 활용할 수 있게 되었다.

React-Query란?

리액트 쿼리는 서버 상태 관리를 위한 강력한 라이브러리이다. 데이터 페칭, 캐싱, 동기화, 업데이트 등의 작업을 효율적으로 처리할 수 있게 도와주며, 애플리케이션의 복잡성을 줄이고 개발자의 생산성을 높여준다.

React-Query의 데이터 페칭 및 캐싱 기능

페이스북 채팅 구현 시, 유저가 설정한 페이스북 페이지, 페이지 별 채팅 목록, 채팅별 메시지 등 다양한 데이터를 효율적으로 불러오고, 사용자 경험을 개선하기 위해 이를 캐시에 저장해야 할 필요가 있었다. 리액트 쿼리는 이러한 요구사항을 충족하는 핵심 기능을 제공한다.
  1. 자동 데이터 캐싱 및 무효화: 데이터를 자동으로 캐시에 저장하고, 필요에 따라 캐시를 무효화하여 최신 상태를 유지한다. 이를 통해 네트워크 사용량을 줄이고 빠른 사용자 인터페이스 반응성을 보장할 수 있다.
  1. 백그라운드 업데이트: 페이지 포커스, 네트워크 재연결 등의 이벤트에 반응하여 백그라운드에서 데이터를 자동으로 업데이트하여 사용자가 항상 최신의 정보를 볼 수 있도록 한다.
  1. 쿼리 무효화 및 데이터 재조회: 특정 이벤트(예: 새 메시지 전송)가 발생했을 때 관련 쿼리를 무효화하고 최신 데이터로 재조회할 수 있는 기능을 제공한다. 이것으로 데이터 일관성을 유지할 수 있다.

구현

ToggleDoc에서는 React-Query를 활용하여 사용자가 설정한 페이스북 페이지 정보, 페이지별 채팅 목록과 채팅별 메시지를 관리했다. 예를 들어, useQuery 훅을 사용하여 페이스북 API로부터 채팅 목록을 가져오고, 이 데이터를 자동으로 캐시하여 사용자가 앱을 다시 방문했을 때 즉시 사용할 수 있도록 했다.
const { data, isSuccess } = useQuery('FB-Chats', fetchChats);
또한, 새로운 메시지를 보낸 후에는 useMutation 훅을 사용하여 메시지 전송 로직을 구현하고, 성공 콜백에서 관련 쿼리인 채팅방 목록과 메시지를 리패치하는 방식으로 데이터를 최신화했다.
const mutation = useMutation(sendMessage, {
  onSuccess: () => {
    queryClient.refetchQueries('FB-Message');
    queryClient.refetchQueries('FB-Chats');
  },
});
 
리액트 쿼리를 사용함으로써 ToggleDoc 내 페이스북 채팅 파트에서 서버 상태 관리의 복잡성을 크게 줄이고, 사용자 경험을 개선할 수 있었다. 데이터 페칭부터 캐싱, 업데이트까지 모든 과정을 효율적으로 처리할 수 있게 되었으며, 이로써 유저에게 조금 더 즉각적인 채팅 경험을 제공할 수 있게 되었다. 기존 Redux 기반으로 관리되던 서버 데이터 역시 차차 React-Query로 마이그레이션할 예정이다.