[프로젝트 상태 관리] React Query or Redux ?

---

📱 프로젝트

→ 현재 우리 프로젝트는 배달 서비스 앱으로 React Native, Expo CLI를 사용하여 구축하기로 하였으며 이제 상태 관리를 어떠한 라이브러리를 사용해서 할 지 정해야 하는 상황이다.

---

🖥 React Native로 구축하는 앱에 더 적합한 상태 관리는?

✔️ React Query는 데이터 패칭 및 캐싱에 유리, 많은 네트워크 요청과 데이터 패칭이 있으면 적합
✔️ Redux는 여러 구성 요소에서 공유, 복잡한 상태 관리에 유리, 복잡한 상태 관리를 요구할 경우 적합

→ React Query와 Redux 는 모두 훌륭한 상태 관리 도구이지만 다른 목적으로 사용됩니다.

React Query는 주로 데이터 페칭 및 캐싱에 사용되는 반면 Redux는 복잡한 응용 프로그램 상태를 처리 할 수있는보다 일반적인 상태 관리 라이브러리입니다.

React Query와 Redux의 주요 차이점은 React Query는 서버 상태 및 캐싱 관리에 중점을두고 Redux는 클라이언트 측 애플리케이션 상태 관리에 중점을 둔다는 것입니다.

요약하면 React Query와 Redux는 React 응용 프로그램에서 상태를 관리하기 위한 강력한 도구이지만 사용 사례와 상태 관리에 대한 접근 방식이 다릅니다. React Query는 서버 상태 및 캐싱에 중점을 두고 Redux는 클라이언트 측 애플리케이션 상태에 중점을 둡니다.

궁극적으로 상태 관리 도구의 선택은 앱의 특정 요구에 따라 다릅니다.

---

🖥 배달 앱 서비스에 더 적합한 상태 관리는?

→ 일반적으로 배달 서비스 앱의 경우 많은 양의 데이터와 복잡한 비즈니스 논리를 처리해야합니다.
이 경우 Redux가 앱 상태를 관리하는 데 더 나은 선택 일 수 있습니다.

먼저, Redux는 복잡한 응용 프로그램 상태를 관리하는 데 사용할 수있는 예측 가능한 상태 컨테이너를 제공하며 React Native 커뮤니티에서 대규모 응용 프로그램을 처리하는 데 널리 사용됩니다. Redux를 사용하면 모든 앱의 데이터를 단일 중앙 집중식 저장소에 저장할 수있어 구성 요소간에 데이터를 보다 쉽게 관리하고 공유 할 수 있습니다.

즉, React Query는 배달 서비스 앱에서 데이터를 가져오고 캐싱하는 데 적합합니다. API에서 데이터를 가져오고 캐시하는 효율적인 방법을 제공합니다, 불필요한 네트워크 요청 수를 줄이고 앱 성능을 향상시킵니다.

👉🏻 이 부분에 대해서 미팅을 통해 이야기를 한 후 결정을 해야할 것 같다!

---

🚚 다른 배달 서비스 앱들은?

→ 모든 배달 서비스 앱들에서는 어떻게 상태 관리를 하는지 알 수 없었지만, 확인 가능한 바로는 아래와 같다.

배달의 민족 : Redux → React Query
https://techblog.woowahan.com/6339/
요기요 : Redux, Recoil
https://techblog.yogiyo.co.kr/recoil%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%86%90%EC%89%AC%EC%9A%B4-%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC-b70b32650582

---

🔥 React Query, Redux 같이 적용?

→ 회의를 통해, React Query, Redux가 상충되는 개념이 아니기에 이들을 같이 적용하는 방법도 고려해보자는 이야기가 나왔습니다.

1. 함께 사용하는 방법

→ React Query, Redux toolkit을 함께 적용하는 기본적인 방법은 아래와 같습니다.

1) 필요한 라이브러리 설치 
npm install react-query @reduxjs/toolkit

2) Redux store 만들기 
import { configureStore } from '@reduxjs/toolkit';
const store = configureStore({
  reducer: {
    // your reducers here
  },
});

3) App을 Redux Provider로 감싸기 
import { Provider } from 'react-redux';
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

4) React Query Client 생성
import { QueryClient, QueryClientProvider } from 'react-query';
const queryClient = new QueryClient();
ReactDOM.render(
  <Provider store={store}>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </Provider>,
  document.getElementById('root')
);

5) 구성 요소에서 React Query 사용
import { useQuery } from 'react-query';
function MyComponent() {
  const { isLoading, error, data } = useQuery('myData', () =>
    fetch('/api/data').then((res) => res.json())
  );
  if (isLoading) return 'Loading...';
  if (error) return `An error has occurred: ${error.message}`;
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  );
}

6) 구성 요소에서 Redux Toolkit 사용
import { useSelector, useDispatch } from 'react-redux';
import { increment } from './counterSlice';
function MyComponent() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
    </div>
  );
}

2. 함께 사용시 주의사항

데이터 복제, 복잡성

→ 1) 데이터 복제
이슈 : 두 라이브러리를 모두 사용하면 동일한 데이터가 React Query 캐시와 Redux 저장소에 저장되는 데이터 복제로 이어질 수 있습니다. 이로 인해 불필요한 메모리 사용 및 잠재적 인 동기화 문제가 발생할 수 있습니다.

해결 방안 : 이를 완화하기 위해 특정 유형의 데이터에 대해 하나의 라이브러리를 사용하고 다른 유형의 데이터에 대해 다른 라이브러리를 사용하는 것이 좋습니다. 예를 들어 서버 데이터의 경우 React Queries를 사용하고 로컬 UI 상태의 경우 Redux Toolkit을 사용할 수 있습니다.

2) 복잡성
이슈 : 두 라이브러리를 모두 사용하면 특히 두 라이브러리에 익숙하지 않은 경우 코드에 약간의 복잡성이 추가 될 수 있습니다. 이렇게하면 장기적으로 코드를 디버그하고 유지 관리하기가 더 어려워 질 수 있습니다.

해결 방안 : 이를 완화하기 위해 상태 관리 요구에 React Queries 만 사용하거나 Redux Toolkit 만 사용하는 것과 같은 간단한 접근 방식을 사용하는 것이 좋습니다.

전체적으로 React Queries와 Redux Toolkit을 함께 사용하면 React 응용 프로그램의 상태를 관리 할 수있는 강력한 솔루션을 제공 할 수 있습니다, 그러나 잠재적 인 문제를 신중하게 고려하고 특정 사용 사례에 적합한 접근 방식을 선택하는 것이 중요할 것 같습니다.