source

React Query와 Redux의 주요 차이점은 무엇입니까?

itover 2023. 4. 2. 10:23
반응형

React Query와 Redux의 주요 차이점은 무엇입니까?

현재 사용하고 있습니다.redux국가 경영을 위한 다양한 프로젝트에 참여했습니다.며칠 전에 제가 들은 게react-query또한 상태 관리에도 사용되며 캐시 및 비동기 가져오기 기능을 제공합니다.나는 이 두 도서관의 주요 차이점을 알아내려고 한다.사용처react-query이 경우 리덕스가 필요해요

리액트 쿼리는 전문 라이브러리라고 할 수 있습니다.API 캐시를 보유하고 있습니다.게다가 전문화 되어 있기 때문에, 그 작업을 꽤 잘 해, 코드가 적게 필요하게 됩니다.

한편, Redex는 거의 모든 것을 저장할 수 있는 도구를 제공하지만, 논리를 작성해야 합니다.따라서 Redx에서 더 많은 작업을 수행할 수 있지만, 전문 라이브러리에서는 필요하지 않은 코드를 작성해야 합니다.

api 캐시 in react 쿼리, 나머지 글로벌 상태는 Redx로 나란히 사용할 수 있습니다.

즉, 공식 Redx Toolkit은 버전 1.6 이후 API 캐시 추상화 RTK Query와 함께 React Query와 유사한 기능 세트를 제공하지만 전체적으로 몇 가지 다른 개념을 가지고 있습니다. 이 또한 확인해 보는 것이 좋습니다.

react-query는 리모트 서버에 저장되어 있는 데이터를 처리하도록 설계되어 있습니다.이 데이터에 액세스하려면 앱에서 비동기 요청을 사용해야 합니다.여기서 캐싱, 로드 상태, 네트워크 장애 등을 처리할 수 있습니다.

그것이 바로 반응 쿼리가 빛을 발하는 부분이다.

반대쪽의 Redx는 클라이언트 측의 데이터를 처리합니다.예를 들어 텍스트 입력의 내용이나 모달의 상태 등이 있습니다.네트워크 관련 문제는 처리할 필요가 없습니다.하지만 당신은 원인과 결과의 복잡한 순서를 다루어야 합니다.

그곳이 레덕스가 빛나는 곳이다.

Redux그리고.react-query두 가지 매우 다른 점이 있습니다.react-query데이터 동기화에 사용됩니다.Redux는 글로벌스테이트 매니저입니다 react-query모든 앱을 동일한 DB로 동기화하기 위해 사용됩니다.Redux앱 상태의 일부를 해당 상태를 읽어야 하는 모든 컴포넌트와 공유하기 위해 사용됩니다.

예:다른 사용자와 채팅할 수 있는 앱이 있습니다.와 함께react-query모든 앱을 사용자가 받은 모든 메시지와 동기화한 후 메시지를 저장합니다.Redux채팅 페이지 및 이력 채팅 페이지에 메시지를 남기기 위해 사용합니다.

React Query는 서버 상태를 관리합니다.서버와 클라이언트 간의 기능을 처리하는 것이 주된 기능이다.

Redux는 클라이언트 상태를 처리합니다.Redx를 사용하여 데이터를 비동기적으로 저장할 수 있습니다.

그래서 그들은 다른 레벨에서 고유한 역할을 가지고 있고 둘 다 나란히 사용할 수 있다.

  • React-Query = 서버 상태 라이브러리(save/cache api 응답)
  • Redex = 클라이언트 상태 라이브러리(접근 가능한 클라이언트 상태를 저장해야 함)

클라이언트 상태서버(또는 리모트) 상태의 2종류의 상태를 구별할 필요가 있습니다.

  • 클라이언트 상태는 다음과 같습니다.
    • 서버에 아직 유지되지 않은 로컬로 작성된 데이터.
    • 활성 경로, 선택한 탭, 스피너, 페이지 번호 제어 등을 처리하는 UI 상태.
  • 서버 상태는 다음과 관련된 모든 것입니다.
    • 취득 및 갱신을 위해 비동기 API가 필요한 원격으로 유지되는 데이터

클라이언트 상태의 경우 Redx는 애플리케이션 상태를 관리하기 위한 그래이트 관리 도구입니다.

한편, 서버 상태를 관리하기 위해서, 통상의 상태 관리 툴을 사용할 수 있습니다만, 비동기 상태나 서버 상태에서의 조작에는 그다지 능숙하지 않습니다.이를 해결하기 위해 Respect Query를 사용합니다.설명서에서 설명한 바와 같이 Respect 쿼리는 다음을 위한 훌륭한 도구입니다.

  • 캐싱 중...(프로그래밍에서 가장 어려운 일)
  • 동일한 데이터에 대한 여러 요청을 단일 요청으로 중복 제거
  • 백그라운드에서 "오래된" 데이터 업데이트
  • 데이터가 "구식"인 경우 파악
  • 가능한 한 신속하게 데이터 업데이트 반영
  • 페이지 설정 및 데이터 로딩 지연 등의 성능 최적화
  • 서버 상태의 메모리 및 가비지 컬렉션 관리
  • 구조 공유를 사용하여 조회 결과 메모화

간단하게 생각할 수 있습니다.

  • React Query = axios + 캐시 논리
  • Redx는 동기화된 데이터와 비동기화된 데이터를 저장할 수 있습니다.

저는 런, 는, 그, 나, 나, 나, 나, by, by, by, by, by, by, by, by을 씁니다.context state, " " " " " " " ,React Query지금 비동기 상태를 관리합니다.

언급URL : https://stackoverflow.com/questions/68525459/what-is-the-main-difference-between-react-query-and-redux

반응형