React Query 활용: 최적화된 데이터 관리 전략

jsonLee·2023년 8월 20일

1. 리액트 쿼리란?

정의: React에서 서버 데이터를 효과적으로 가져오고 동기화하기 위한 도구입니다.
특징: 서버 데이터의 자동 리패치, 실시간 동기화 고급 기능들을 지원하여 개발의 복잡성을 줄여줍니다.

2. 시작하기

설치:

npm install react-query

3. 주요 특징

Fresh & Stale Data: 데이터의 신선도에 따라 쿼리가 자동으로 리패치됩니다.

useQuery('todos', fetchTodos, {
  staleTime: 1000 * 60 * 5  // 5 minutes
});

배경 동기화: 앱이 다시 포커스될 때나 네트워크 연결이 복구될 때 데이터가 자동으로 동기화됩니다.
Garbage Collection: 활성화되지 않은 쿼리 데이터는 일정 시간 후 자동으로 수거됩니다.

4. 주요 Hooks

useQuery: 데이터 조회 작업에 사용됩니다.

const { data, error, isLoading } = useQuery('myData', fetchData);

useMutation: 데이터 생성, 수정, 삭제 작업에 사용됩니다.

const mutation = useMutation(updateTodo, {
  onSuccess: () => {
    console.log('Data updated!');
  }
});

useQueryClient: 쿼리 클라이언트의 인스턴스에 접근합니다.

const queryClient = useQueryClient();
queryClient.invalidateQueries('todos');

5. 쿼리 캐싱

리액트 쿼리는 자동으로 캐싱을 합니다. 이로 인해 사용자 경험이 빠르고 반응적입니다.

const { data } = useQuery('myData', fetchData, {
  cacheTime: 1000 * 60 * 10  // 10 minutes
});

6. Optimistic Updates

서버 응답을 기다리지 않고, 빠르게 UI 업데이트를 시뮬레이션한 후, 응답에 따라 상태를 확정 또는 롤백합니다.

const mutation = useMutation(updateData, {
  onMutate: (newData) => {
    // 현재 캐시 데이터 백업
    const previousData = queryClient.getQueryData('myData');
    
    // Optimistic Update
    queryClient.setQueryData('myData', newData);
    
    // 롤백 함수 반환
    return () => queryClient.setQueryData('myData', previousData);
  },
  onError: (error, newData, rollback) => {
    // 롤백: 원래 데이터로 되돌림
    rollback();
  },
  onSuccess: (data, variables, context) => {
  // 뮤테이션이 성공했을 때 실행할 로직
  },
  onSettled: (data, error, variables, context) => {
  // 뮤테이션이 완료될 때 실행할 로직 (성공/실패 모두 포함)
  },
});

onMutate와 onError, onSuccess, onSettled는 useMutation 훅의 일부로서 특정 시나리오에 대응하여 개발자가 추가 로직을 제공할 수 있도록 합니다.

onMutate:

onMutate는 뮤테이션 함수가 호출되기 직전에 실행됩니다. 이 콜백은 주로 Optimistic UI Updates의 구현에서 유용하게 사용됩니다.

시나리오: 사용자가 어떤 액션(예: 데이터 업데이트)을 수행하면, 실제 서버 응답을 기다리지 않고 UI를 즉시 업데이트하여 사용자에게 빠른 반응성을 제공하고 싶을 때, onMutate에서 이를 구현할 수 있습니다. 만약 뮤테이션 요청이 실패하면, onError에서 롤백 로직을 수행하여 UI를 원래 상태로 되돌릴 수 있습니다.

onMutate: (newData) => {
  // 현재 캐시 데이터 백업
  const previousData = queryClient.getQueryData('myData');
  
  // Optimistic Update: UI를 즉시 업데이트
  queryClient.setQueryData('myData', newData);
  
  // 롤백 함수 반환
  return () => queryClient.setQueryData('myData', previousData);
},

onError:

onError는 뮤테이션 함수가 실패했을 때 실행됩니다. 이 콜백은 에러 핸들링과 롤백 작업에 유용합니다.

시나리오: Optimistic Update 후 뮤테이션 요청이 실패하면, 원래의 캐시 데이터로 롤백해야 합니다. onError에서는 onMutate에서 제공한 롤백 함수를 사용하여 이를 수행할 수 있습니다.

onError: (error, newData, rollback) => {
  // 롤백: 원래 데이터로 되돌림
  rollback();
  // == onMutate에서 리턴한 함수 
  // () => queryClient.setQueryData('myData', previousData);
  console.error("Mutation failed:", error);
},

7. 결론

리액트 쿼리는 React의 데이터 관리 영역에서 혁신적인 해결책을 제공합니다. 전통적으로 데이터 가져오기, 캐싱, 동기화 등의 문제는 각각 다루기 복잡하고, 여러 가지 엣지 케이스가 있습니다. 리액트 쿼리를 통해 이러한 모든 문제를 일관된 방식으로 처리할 수 있습니다.

Optimistic Update와 같은 고급 기능도 간단한 설정만으로 사용할 수 있게 되었고, 이는 웹 애플리케이션의 반응성과 사용자 경험을 크게 향상시키는 요소입니다.

리액트 쿼리는 React 애플리케이션에서 데이터 관리를 대대적으로 단순화하며, 캐싱 및 데이터 동기화를 자동화하여 개발자의 생산성을 향상시킵니다.