Redux는 상태 관리 라이브러리이다.
Redux는 컴포넌트 간 데이터 공유를 쉽게 해주며, 상태를 예측 가능하게 만들어 주는 것이 목적이다.
Redux의 주요 개념 중 하나는 store이다. Store는 어플리케이션 전역에서 상태를 저장하고 관리하는 객체이다. Store의 상태를 변경하는 유일한 방법은 action을 dispatch하는 것이다. Action은 객체로 이루어져 있으며, store의 상태를 변경하는 데 필요한 데이터를 담고 있다.
Reducer는 action을 받아서 state를 변경하는 함수이다. Reducer는 순수 함수로 작성되며, 이전 상태와 액션 객체를 받아서 새로운 상태를 반환한다.
React에서 Redux를 사용할 때는, Provider 컴포넌트를 사용하여 어플리케이션 전체에 Redux store를 제공하고, connect 함수를 사용하여 컴포넌트를 Redux store에 연결한다. 이렇게 연결된 컴포넌트는 Redux store의 상태를 props로 받아올 수 있다.
Redux는 복잡한 어플리케이션에서 상태 관리를 보다 예측 가능하고 효율적으로 할 수 있게 도와준다. 그러나 Redux를 사용하면서 불필요하게 복잡한 코드를 작성하거나, 과도하게 많은 상태를 Redux store에 저장하게 되면 오히려 코드를 복잡하게 만들 수 있다. 따라서 적절한 상황에서 적절하게 사용하는 것이 중요하다.
React Query
서버 상태, 캐시 및 비동기 데이터와 상호작용하기 위한 JavaScript 라이브러리. React Query는 데이터를 캐싱하고 동기화하며, 요청을 취소하고 재요청할 수 있다. 또한, React Query는 자동으로 데이터를 다시 가져오는 새로 고침 기능과 함께 제공되며, 이를 통해 데이터를 자동으로 업데이트할 수 있다.
React Query는 대부분의 상황에서 Redux보다 간단하게 데이터를 관리할 수 있다. Redux는 상태 관리 라이브러리이며, 데이터를 중앙 집중적으로 관리한다. 이는 큰 규모의 애플리케이션에서 유용하다. 그러나 작은 규모의 애플리케이션에서는 복잡성을 증가시키는 경우가 많다. React Query는 요청이 필요한 컴포넌트 내에서 사용될 수 있으며, 필요에 따라 컴포넌트 간에 데이터를 공유할 수 있다. 따라서 작은 규모의 애플리케이션에서는 React Query를 사용하는 것이 좋을 수 있다.
리덕스(Redux)와 리액트 쿼리(React Query)
둘 다 상태 관리를 위한 라이브러리이지만 목적과 사용 방법이 다르다.
리덕스는 전역 상태 관리를 위한 라이브러리로, 애플리케이션의 모든 컴포넌트가 상태를 공유할 수 있다. 리덕스는 단방향 데이터 흐름을 가지고 있어, 액션(action)을 통해 상태를 변경하고 이를 리듀서(reducer)를 통해 처리한다.
반면 리액트 쿼리는 데이터 통신을 위한 라이브러리로, API 요청, 캐시 처리, 데이터 업데이트 등을 편리하게 처리할 수 있다. 리액트 쿼리는 컴포넌트 내에서 데이터를 관리하고 처리하기 때문에, 로컬 상태와 외부 데이터를 함께 사용하는 경우 유용하다.
즉, 리덕스는 상태 관리를 위한 라이브러리이고, 리액트 쿼리는 데이터 통신을 위한 라이브러리이다.
