[후기] 카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유

* 이 게시물은 카카오페이 기술 블로그의 '카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유 | 카카오페이 기술 블로그'를 읽고, 관련 내용을 바탕으로 정리한 지식과 저의 생각을 담은 글입니다.

React Query: 효율적인 비동기 데이터 관리 방법

카카오페이 프론트엔드 개발자들이 작성한 기술 블로그 카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유 | 카카오페이 기술 블로그 를 바탕으로, React Query라는 라이브러리가 왜 주목받고 있는지에 대해 정리했습니다.

---

Redux로 데이터 관리, 왜 어려웠을까?

React Query를 사용하기 전에, 카카오페이에서는 Redux를 통해 비동기 데이터를 관리했다고 합니다. Redux는 React 생태계에서 많이 쓰이는 전역 상태 관리 라이브러리지만, 비동기 데이터 관리에 특화된 도구가 아니었기 때문에 여러 어려움이 있었다고 합니다.

1. 너무 많은 Boilerplate 코드 Redux를 사용하면 액션(Action), 리듀서(Reducer), 사가(Saga) 등을 작성해야 했습니다. 단순히 API 하나를 호출하려고 해도 코드가 길어지고, 관리하기 어려워지는 문제가 있었습니다.
2. API 상태 관리 방식의 다양성 개발자마다 데이터를 어떻게 저장하고 로딩 상태를 관리할지 설계가 달랐습니다. 규격화된 방식이 없으니 협업할 때 더 많은 논의가 필요했다고 합니다.
3. 사용자 경험을 위한 추가 작업 예를 들어, 앱이 백그라운드에 있다가 다시 열릴 때 데이터를 최신화해야 하는 경우, 직접 이벤트를 감지하고 데이터를 불러오는 코드를 작성해야 했습니다. 이게 복잡한 시스템에서는 큰 부담이 되었다고 합니다.

---

React Query, 무엇이 다를까?

React Query는 비동기 데이터를 관리하기 위해 탄생한 라이브러리입니다. 서버에서 데이터를 가져오고, 캐싱하고, 업데이트하는 과정을 간단하게 만들어줍니다. 카카오페이 기술 블로그에서는 React Query의 주요 장점으로 다음을 꼽았습니다.

1. 코드가 간단하다
   Redux에서 작성해야 했던 긴 코드를 단 몇 줄로 줄일 수 있다고 합니다.
   예를 들어, 데이터를 가져오는 코드는 이렇게 간단해집니다.
   

   const { data, isLoading } = useQuery('todos', fetchTodos);
   ​

2. 규격화된 방식 제공
   API 상태 관리에서 로딩 상태, 에러 처리 등을 일관성 있게 다룰 수 있는 옵션들이 기본 제공됩니다. 협업할 때 규칙을 정하기 쉬워졌다고 합니다.
3. 사용자 경험 향상
   React Query는 refetchOnWindowFocus와 같은 옵션을 제공해, 사용자가 화면으로 돌아왔을 때 데이터를 자동으로 최신화할 수 있습니다. 이전에는 직접 구현해야 했던 기능이 이제 옵션 하나로 해결된다고 합니다.

---

Redux와 React Query 비교

특징	Redux	React Query
코드 복잡도	액션, 리듀서 등 Boilerplate가 많음	간결한 Hook 사용
API 상태 관리 방식	직접 설계 및 구현	기본 제공 옵션 활용
사용자 경험 기능	직접 구현 필요	기본 옵션 제공 (e.g., 캐싱, Refetch)
사용 목적	전역 상태 관리	비동기 데이터 관리

---

React Query의 실제 코드 예시

카카오페이 기술 블로그에서는 아래와 같은 Todo 리스트 예시를 공유했습니다.

 

1. 데이터를 가져오기:

import { useQuery } from 'react-query';
const fetchTodos = () => axios.get('/todos').then(res => res.data);

const { data, isLoading, error } = useQuery('todos', fetchTodos);

 

2. 데이터를 업데이트하기:

import { useMutation, useQueryClient } from 'react-query';
const queryClient = useQueryClient();

const { mutate } = useMutation(
  newTodo => axios.post('/todos', newTodo),
  {
    onSuccess: () => queryClient.invalidateQueries('todos')
  }
);

 

3. 화면에서 사용:

if (isLoading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;

return (
  <ul>
    {data.map(todo => (
      <li key={todo.id}>{todo.title}</li>
    ))}
  </ul>
);

---

나의 생각

카카오페이 기술 블로그를 읽으며 React Query의 강점이 얼마나 매력적인지 새삼 느낄 수 있었습니다. 무엇보다 반복적으로 작성해야 하는 Boilerplate 코드를 대폭 줄여, 개발 시간을 크게 단축할 수 있다는 점이 정말 인상적이었습니다. 또한, 사용자 경험을 위한 다양한 기능이 기본적으로 제공되기 때문에 개발자는 핵심 로직에 더욱 집중할 수 있다는 점이 큰 장점으로 다가왔습니다. React Query는 팀원 간 일관된 API 관리 방식을 정착시키는 데도 도움을 주기 때문에 협업 효율성을 크게 높일 수 있는 도구라고 생각합니다. 특히 데이터 동기화가 중요한 카카오페이와 같은 서비스 환경에서는 React Query가 정말 잘 어울리는 선택이라는 확신이 들었습니다.