[React] 상태관리 :: Redux와 React Query | 차이점 | 함께 사용하면 좋은 이유

 

 

 

Redux와 React Query의 차이점

 

Redux

• 주된 목적: 클라이언트 측 상태 관리. 주로 사용자가 직접 생성하고 관리해야 하는 전역 상태(예: 사용자 입력, UI 상태, 인증 상태 등)를 다루기 위한 라이브러리입니다.
• 데이터 관리: 모든 종류의 상태(비동기 또는 동기, 클라이언트 내부에서만 사용하는 상태)를 관리하는 데 사용됩니다.
• 전역 상태: 상태를 하나의 스토어에 저장하고, 전역에서 액세스 및 업데이트할 수 있도록 합니다.
• 설정 복잡성: 전통적인 Redux는 비동기 처리나 상태 관리 로직이 다소 복잡할 수 있습니다. 이를 간소화하기 위해 Redux Toolkit을 많이 사용합니다.
• 비동기 처리: 비동기 처리는 Redux 미들웨어(예: redux-thunk 또는 redux-saga)를 통해 처리해야 하며, 수동으로 로딩/성공/실패 상태를 관리해야 합니다.

React Query

• 주된 목적: 서버 상태 관리. 서버에서 데이터를 가져오는 로직(예: API 호출)을 더 쉽게 처리하고, 데이터의 캐싱, 동기화, 리패칭 등의 기능을 제공하는 도구입니다.
• 비동기 데이터 관리: 서버와의 통신(예: REST API 또는 GraphQL API 호출)과 같은 비동기 데이터를 관리하는 데 중점을 둡니다.
• 자동 캐싱 및 리패칭: React Query는 서버 데이터를 자동으로 캐싱하고, 캐시된 데이터를 유효하게 유지하기 위해 자동으로 재요청을 보내거나, 특정 조건에서 리패칭을 처리할 수 있습니다.
• 로딩 및 오류 처리 자동화: API 요청 중 로딩 상태나 오류 처리 로직을 내장하고 있어, 별도의 상태 관리 없이 간편하게 사용할 수 있습니다.
• 비동기 처리 최적화: 데이터의 무효화(invalidation), 백그라운드에서의 리패칭, 데이터 동기화 등의 기능을 기본적으로 제공합니다.

 

 

함께 사용하면 좋은 이유

Redux와 React Query는 서로 보완적인 도구입니다. 각각의 장점을 활용하여 더 효율적인 상태 관리를 할 수 있습니다.

1. 클라이언트 상태와 서버 상태 분리

• Redux는 애플리케이션의 전역 상태, 사용자 입력, UI 상태 등을 관리하는 데 적합
• React Query는 서버와 통신하는 상태(API 응답 데이터, 비동기 데이터)를 관리하는 데 최적화
• 두 개를 함께 사용하면 클라이언트와 서버의 상태를 분리하여 각각의 목적에 맞게 관리할 수 있습니다. 즉, Redux는 클라이언트 상태에 집중하고, React Query는 서버 상태를 효율적으로 처리하게 됩니다.

2. 비동기 로직의 간소화

• Redux에서 서버 상태를 관리하려면 로딩 상태, 성공/실패 상태, 그리고 캐싱 로직을 직접 구현해야 합니다.
• React Query는 이러한 비동기 데이터를 다루는 과정을 매우 간단하게 만들어줍니다. 따라서 Redux를 서버 상태 관리에 사용하려는 복잡함을 줄일 수 있습니다. React Query가 API 호출과 데이터 동기화를 자동으로 처리해 주기 때문입니다.

3. 더 나은 성능과 UX

• React Query는 API 데이터를 캐싱하고, 필요할 때만 다시 요청하는 방식으로 성능을 최적화할 수 있습니다. 이는 불필요한 API 호출을 줄여주고, 데이터가 이미 로드된 경우에도 즉시 캐시에서 제공할 수 있어 더 나은 사용자 경험을 제공합니다.
• Redux는 클라이언트 상태를 관리하는 데 더 적합한데, 이를 통해 사용자의 입력이나 UI 관련 상태는 Redux에서 처리하고, 서버 데이터는 React Query에서 처리하는 구분된 아키텍처가 더 좋은 성능을 냅니다.

4. 복잡성 감소

• 비동기 데이터를 다루는 복잡한 로직을 React Query가 맡음으로써 Redux의 복잡성이 크게 줄어듭니다. 특히 비동기 처리와 관련된 Redux 미들웨어를 사용하지 않아도 된다는 장점이 있습니다.