react-query vs redux, thunk

 

 

react-query 는 서버 리소스 기준으로 fetching 하고 상태관리 하는 라이브러리라고 보면 되겠죠? 간단하게 사용할 때는 유용할 거 같긴한데 redux, thunk 조합 보다 유연성은 떨어질 거 같은데 또 redux-persist 같은거 사용도 안 될 거 같고, 두개를 동시에도 많이 사용하시나요?

저는 개인적으로 그냥 올라운드라 커버 가능한 redux, thunk 조합을 사용하는게 일관되고 유연성이 있어서 더 좋아보이긴 하는데요.. 그럼 redux, thunk 기본 조합에 캐싱? 그런 기능 필요시 그에 맞게 추가해야겠죠? react-query 는 그냥 그 자체만으로 따로 취급해야 하는거겠죠? redux, thunk 방식에 react-query 를 연동한다던가 하는 그런 성격의 것은 아닌거죠?

만약에 그게 맞다면 react-query 는 서버 url 기준으로 fetching 하고 서버 url 기준으로 fetching 된 상태를 관리하는 용도의 라이브러리로 그냥 간단하게 화면 단에서 빨리 사용하기 위한 용도 정도가 적합한 것으로 보이는데요.. 복잡한 구조의 클라이언트 측 상태가 있다면 react-query 나 swr 같은건 사용하지 않아야 하는거 같구요.

 

 

 

 

React Query와 Redux + Thunk 조합은 각각 다른 목적과 강점을 가진 라이브러리들이며, 이 둘을 이해하고 적절히 사용하는 것이 중요합니다. 아래에서 설명드리겠습니다.

1. React Query의 역할

React Query는 서버 상태를 관리하는 데 특화된 라이브러리입니다. 주로 서버에서 데이터를 Fetching, Caching, Synchronization, Background Updates와 같은 작업을 쉽게 처리할 수 있도록 도와줍니다.

• Fetching: React Query는 서버로부터 데이터를 가져오는 로직을 간편하게 작성할 수 있습니다.
• Caching: 서버로부터 가져온 데이터를 캐싱하고, 동일한 데이터를 다시 요청할 때 효율적으로 관리합니다.
• Background Updates: 데이터가 오래되었거나 변경되었을 경우, 자동으로 다시 데이터를 가져와 최신 상태를 유지합니다.
• Synchronization: 여러 컴포넌트에서 동일한 데이터에 접근할 때, 데이터를 동기화하고 일관성을 유지합니다.

2. Redux + Thunk 조합

Redux는 전역 상태 관리를 위해 널리 사용되며, Thunk는 비동기 로직을 처리하기 위해 Redux와 함께 사용되는 미들웨어입니다.

• 유연성: Redux + Thunk 조합은 클라이언트 측 상태(예: UI 상태, 사용자 입력 등)를 관리하는 데 매우 유연합니다. 원하는 대로 상태 구조를 설계하고, 비동기 로직도 자유롭게 추가할 수 있습니다.
• Redux-Persist: Redux 상태를 로컬 스토리지에 저장하고 복원하는 기능을 제공합니다. 클라이언트 측 상태를 영속화(persist)할 때 유용합니다.

3. 두 라이브러리의 차이점

• 서버 상태 vs 클라이언트 상태: React Query는 서버에서 가져오는 데이터를 중심으로 동작하며, 그 데이터를 캐싱하고 관리하는 데 최적화되어 있습니다. 반면, Redux는 클라이언트 측에서 관리해야 하는 모든 상태(서버 상태 포함)를 관리하는 데 사용됩니다.
• 유연성: Redux + Thunk는 상태 관리에 대한 더 많은 유연성을 제공합니다. 복잡한 로직, 여러 상태 조각을 조합해서 관리해야 할 때 특히 유리합니다.
• 간단한 사용: React Query는 간단한 서버 데이터 관리에는 매우 유용하고, 간편하게 사용할 수 있습니다. 복잡한 전역 상태를 관리할 필요 없이, 서버 데이터와 관련된 상태를 쉽게 처리할 수 있습니다.

4. React Query와 Redux의 함께 사용 여부

React Query와 Redux는 서로 보완적으로 사용할 수 있습니다. 예를 들어, 전역적으로 관리해야 하는 클라이언트 상태는 Redux로 처리하고, 서버 데이터는 React Query로 관리하는 방식입니다. 이렇게 하면 각 라이브러리의 강점을 살릴 수 있습니다.

• 서로 연동: React Query로 서버 데이터를 관리하고, 그 데이터를 Redux 상태로 넣을 수도 있습니다. 하지만 이런 경우엔 React Query의 캐싱 기능이 무의미해질 수 있으므로, 굳이 서버 상태를 Redux에 넣을 필요가 없는 경우가 많습니다.

5. 복잡한 구조의 클라이언트 상태

복잡한 구조의 클라이언트 상태를 관리해야 하는 경우, Redux가 더 적합합니다. 이 경우 React Query는 단순히 서버 데이터 관리를 위한 도구로 사용하면 됩니다.

결론

• React Query는 서버 상태를 쉽게 관리하기 위한 라이브러리로, 간단한 데이터 fetching과 캐싱에 매우 유용합니다.
• Redux + Thunk는 클라이언트 측의 복잡한 상태를 관리하기에 유연하고 강력한 도구입니다.
• 두 라이브러리는 목적이 다르므로, 함께 사용하는 것이 가능하며, 서로의 강점을 보완할 수 있습니다.
• 복잡한 애플리케이션에서는 Redux로 클라이언트 상태를 관리하고, React Query로 서버 상태를 관리하는 방식이 효과적일 수 있습니다.