리액트쿼리, 리덕스

리액트 쿼리와 리덕스는 모두 리액트 상태 관리 라이브러리 중 하나

다른 개념과 사용법을 가짐

 

리액트쿼리

React Query는 React Hooks를 사용하여 Redux처럼 상태 관리를 해주는 라이브러리

주로 API 호출과 같은 비동기적인 데이터의 흐름을 관리하며,

서버로 부터 데이터를 가져오고 캐싱

React Query는 리스트나 테이블 등의 대량 데이터를 다룰 때 유용

 

리덕스

Redux는 Flux 아키텍처를 기반으로 하는 상태 관리 라이브러리 중 하나

React와 함께 사용되며, 컴포넌트의 상태 관리는 Redux Store에서 담당.

컴포넌트 간의 데이터 공유와 비동기 작업 처리를 위해 사용

Redux는 다수의 컴포넌트에서 공유되는 상태값을 관리

 

사용방향

React Query는 주로 서버의 데이터를 가져와 하나의 컴포넌트에서 사용하는 것을 지향함

React Query는 비동기 API 호출을 직관적이고 편안하게 관리함

React Query는 주로 비동기적으로 가져온 데이터들을 여러 컴포넌트에서 동일하게 렌더링해줄 때 사용

Redux는 각각의 컴포넌트에서 사용되는 상태를 관리

Redux는 각 액션마다 Store에 저장되어 있는 상태를 바꿔서 사용합니다.

Redux는 전역적으로 사용될 데이터들을 담을 수 있는 Store로 작용하여,

여러 컴포넌트에서 조작하는 데이터를 공유할 때 사용합니다.

 

 

목적

React Query는 서버로부터 데이터를 가져와

서버 데이터 소스의 변화를 즉각적으로 반영할 수 있도록 해주는 것이 목적

Redux는 스토어(store)에 상태 데이터를 중앙 집중식으로 저장하여 관리

다른 컴포넌트에서 공유해서 사용할 수 있도록 하는 것이 목적

 

 

사용 방식

React Query는 React를 위해 특화된 훅(hook) 형태로 사용됩니다.

React Query를 사용하면 서버 API와 상호작용할 수 있는 훅(API Data Hook)을 제공합니다.

Redux는 하나의 스토어(store)로 상태 전체를 관리

자체적으로 React 컴포넌트와의 연결에 대한 복잡성이 존재

 

구성요소

React Query는 Query Cache, UseQuery Hooks, UseMutation Hooks 등의 구성요소를 활용

Redux는 Action, Reducer, Store 등으로 구성

 

불필요한 재렌더링 방지

React Query는 서버에서 가져온 데이터가 변경되지 않았다면

캐시에서 데이터를 반환하여, 불필요한 재렌더링을 방지

한 번 요청한 데이터는 캐시(cache)에 저장해두기 때문에,

다시 요청하지 않아도 됨

Redux는 재렌더링을 방지하기 위해 추가적인 처리가 필요

 

 

조합

React Query와 Redux를 함께 사용하는 것은 가능함

그러나, 이를 함께 사용할 경우 상태 관리가 복잡해질 수 있으므로 세밀한 구현이 필요 

React Query는 비동기 데이터를 처리하고, 서버로부터 결과를 가져올 때 사용

 

Redux는 애플리케이션 전체에서 데이터를 관리하여,

상태가 변경될 때마다 변경된 값을 즉시 업데이트

 

큰 데이터를 다룰 때 React Query가 유용하고 속도나 테이블 같은 리스트의 재렌더링 성능을 향상

 

만약 두 라이브러리를 함께 사용하면,

React Query를 사용하여 데이터를 가져온 후,

반환된 데이터를 Redux 스토어에 저장할 수 있음

그러나, 이 두 상태 관리 라이브러리를 함께 사용하는 것은

상황에 따라 부담이 될 수 있으므로,

프로젝트의 상황에 맞는 상태 관리 방법을 선택하는 것이 중요

 

 

React Query와 Redux를 함께 사용하는 것이 부담될 수 있는 경우

 

적은 양의 상태 관리가 필요한 경우

Redux는 모든 애플리케이션 상태를 중앙 집중식으로 관리.

작은 규모의 애플리케이션에서는 이러한 상태 관리가 적어서 React Query만으로 충분

 

팀원의 기술적 이해도

Redux는 팀원 간 효율적인 상태 관리를 위해 설정이 필요.

Redux의 복잡성을 이해하고 있는 팀원들 끼리 협업하는 것이 좋으며,

Redux에 익숙하지 않은 팀원이 있다면 지원하는 것이 중요

 

데이터의 양이 너무 많은 경우

React Query는 서버로부터 데이터를 가져와 처리

데이터 양이 많은 경우에는 상태를 중앙 집중식으로 관리하는

Redux와 함께 사용하여 최적의 성능을 가질 수 있음

 

데이터의 구조와 길이

Redux 같은 전역적인 상태 관리 도구를 사용하면,

데이터 구조와 길이가 커질수록 효율성이 높아짐

하지만, React Query는 컴포넌트 단위로 데이터를 가져오고 관리하기 때문에,

데이터의 길이와 구조에 따라 효율성이 다를 수 있음

 

유지 보수성

상태 관리 라이브러리를 함께 사용하면 코드의 복잡도가 증가할 수 있음.

설계와 구현에 신경을 써야 하며 올바르게 관리해야함

 

리덕스 미들웨어와 쿼리를 배웠는데 두가지의 개념이 섞이면서 

카오스등장

최대한 정리를 해봤는데 사용해보면서 익히는 수 밖에 없겠다 ㅎㅎ...!