React Query 3 : 데이터 가져 오기 및 관리 가이드

React Query를 사용하여 프론트 엔드 CRUD 애플리케이션의 데이터 수집 단순화 프론트 엔드 크루드 애플리케이션을 구축하는 것은 처음에는 쉽지만 기능이 증가함에 따라 복잡성이 빠르게 증가합니다. 각 API 엔드 포인트마다 상태 관리, 동기화, 캐싱 및 오류 처리가 필요합니다. 이 기사는 React Query라는 라이브러리와 이러한 모든 문제를 해결하는 데 어떻게 도움이되는지 소개합니다. 라이브러리는 "누락 된 데이터 수집 라이브러리"라고 주장하며 RECT 응용 프로그램에 "서버 상태 관리"를 제공합니다.

우리는 완전한 React Query 데모 프로젝트를 사용하여 라이브러리가 제공하는 핵심 기능을 배우게됩니다. 그런 다음이 지식을 자신의 프로젝트에 적용 할 수 있습니다. 먼저 프로젝트 설정을 시작하기 전에 그것에 대해 조금 배우겠습니다.

키 포인트

React Query 3 반응 응용 프로그램에서 상태 관리 및 데이터 수집을 단순화, 캐시 처리, 동기화 및 오류 관리를 효율적으로 단순화합니다. 이 라이브러리는 React, React Router 및 REST API에 익숙한 중간에서 높은 수준의 개발자에게 적합합니다.

React Query 3은 2.X 버전에 새로운 기능과 개선 사항을 추가하고 업그레이드 된 사용자를위한 마이그레이션 안내서를 제공합니다.

데모 프로젝트에서 데모의 주요 기능에는 기본 쿼리, 페이징 쿼리 및 무제한 쿼리뿐만 아니라 생성, 업데이트 및 삭제 작업이 포함됩니다. 반응 쿼리의 DevTools 유틸리티는 실시간으로 내부 상태와 프로세스를 시각화하여 디버깅을 지원합니다. 데이터 신선도 및 캐시 지속 시간을 관리하여

및
• 와 같은 구성 옵션을 성능을 최적화합니다.
이 라이브러리는 무제한 스크롤 및 복잡한 상태 종속성과 같은 고급 시나리오를 지원하여 사용자 경험 및 개발자 경험을 향상시킵니다.
• 반응 쿼리에 대한
• React Query는 Tanner Linsey가 만든 오픈 소스 프로젝트입니다. React Query 3의 최신 주요 버전은 2020 년 12 월에 공식적으로 출시되었습니다. 이 새로운 버전에서는 새로운 기능이 추가되었으며 기존 기능이 개선되었습니다.
이전에 매우 인기있는 React Query 2.x 버전에 비해 몇 가지 중대한 변화가 있음에 주목해야합니다. 이전 버전에 대해 작성된 많은 구식 자습서가 발생할 수 있으므로 이러한 변경 사항을 명확하게 설명하는 마이그레이션 안내서가 있습니다.
• 새로운 버전은 큰 개선을 제공하며, 이전에보고 된 많은 버그가 해결되었습니다. 3.x 버전은 생산 준비가되었지만 여전히 개발 중이며 새로 발견 된 버그로 정기적으로 고정됩니다.
예방 조치
• cacheTime 이 기사는 다음과 같은 기본 기술과 지식을 마스터 한 중반에서 높은 프론트 엔드 개발자를위한 것입니다. staleTime
반응 반응 라우터 반응 후크 REST API 데이터 획득
개발 기계 환경에서는 다음을 설정해야합니다.

node.js

git 우체국, 불면증 또는 대 코드의 휴식 확장과 같은 휴식 클라이언트

프로젝트에 대한

분석 할 데모 프로젝트는 React 프론트 엔드 애플리케이션으로 React Query를 사용하여 나머지 JSON API 서버가 제공 한 데이터를 가져옵니다. 이 앱은 5 페이지만으로 구성되며 React Query가 제공하는 내용을 보여줍니다. 이러한 기능은 다음과 같습니다

기본 쿼리 Pagination Query

무제한 쿼리

작전 생성
• 업데이트 작업 삭제 작업
React Query는 더 많은 기능을 제공하지만이 기사는 공간에 제한되어 있으며 하나씩 소개 할 수 없습니다. 다음은 사용할 앱의 미리보기입니다.
프로젝트 설정
• 설정을 시작하기 전에 프로젝트에 사용 된 다른 종속성을 간단히 살펴 보는 것이 낫다고 생각합니다. 여기에는 다음이 포함됩니다
vite : 매우 빠른 빌드 도구 <:> 윈드 닉스 : 매우 빠른 꼬리 바람 css 컴파일러
반응 후크 양식 : React Hooks를 사용하는 양식 빌더 및 검증 라이브러리 반응 모달 : 접근 가능한 모달 구성 요소
axios : 약속 기반 브라우저 http 클라이언트
JSON 서버 : 완전한 위조용 REST API 서버
자체 컴퓨터에서 React Query 데모 응용 프로그램을 설정하려면 다음 지침을 수행하십시오.
JSON-Server가 사용하는 데이터베이스 파일에는 다양한 사용자가 포함되어 있습니다. 를 실행하면 가짜 API 서버가 포트 3004에서 시작됩니다. GET 요청을 실행하면 다음 예제 JSON 응답이 생성됩니다.
다음, 프론트 엔드 코드를 실행하는 개발 서버를 시작하십시오 :

브라우저로 이동하여 를 열면 응용 프로그램에 액세스하십시오. 위의 미리보기에서와 동일한 경험이 있어야합니다. 응용 프로그램의 기능을 철저히 탐색하려면 다음 작업을 수행하십시오.

기본 쿼리 페이지 (홈 페이지)를 봅니다.

페이징 페이지에 액세스하고 이전 및 다음 버튼과 상호 작용합니다.

무제한 페이지에 액세스하고 더 많은로드 버튼과 상호 작용하십시오. 기본 쿼리 페이지로 돌아가서 "사용자 만들기"버튼을 클릭하십시오. 사용자 페이지 작성 페이지로 연결됩니다. 양식을 채우고 저장 버튼을 클릭하십시오.

사용자 테이블에서 편집 아이콘을 찾으십시오. 클릭하십시오. 이렇게하면 사용자 편집 페이지로 이동합니다. 원하는 변경 사항을 작성하고 "저장"버튼을 클릭하십시오.

사용자 테이블에서 "삭제"아이콘을 찾으십시오. 클릭하십시오. 삭제 작업을 확인하도록 요청하는 모달 대화 상자가 시작됩니다. 삭제 버튼을 클릭하여 확인하십시오. 위의 모든 작업을 완료 한 후 프로젝트를 분해 할 수 있습니다. 각 구성 요소의 위치를 ​​이해하려면 프로젝트 구조를 확인하십시오. 이 기사에서 이러한 구성 요소의 단순화 된 버전을 제공하여 프로젝트에서 React 쿼리 사용의 기본 사항을 이해할 수 있습니다.

설치 반응 쿼리

반응 쿼리는 다음 명령을 사용하여 빈 또는 기존 React 프로젝트에 설치할 수 있습니다.

이 패키지에는 DevTools 유틸리티 기능을 포함하여 필요한 모든 것이 포함되어 있으며 나중에 논의 할 것입니다. 패키지를 설치 한 후에는 다음과 같이 상위 레벨 구성 요소 (

)를 업데이트해야합니다.

# 克隆项目
git clone git@github.com:sitepoint-editors/react-query-demo.git

# 导航到项目目录
cd react-query-demo

# 安装包依赖项
npm install

# 为 json-server 设置数据库文件
cp api/sample.db.json api/db.json

# 启动 json-server
npm run json-server

의 모든 자식 구성 요소는 React Query 라이브러리에서 제공 한 후크에 액세스 할 수 있습니다. 이 기사에서 우리가 사용할 고리는 다음과 같습니다. App.jsx

[
  {
    "id": 1,
    "first_name": "Siffre",
    "last_name": "Timm",
    "email": "stimmes0@nasa.govz",
    "gender": "Male"
  },
  {
    "id": 2,
    "first_name": "Fonzie",
    "last_name": "Coggen",
    "email": "fcoggen1@weather.com",
    "gender": "Female"
  },
  {
    "id": 3,
    "first_name": "Shell",
    "last_name": "Kos",
    "email": "skos2@prweb.com",
    "gender": "Female"
  }
]

QueryClientProvider

• useQuery
• 다음은 업데이트 된 (단순화 된 버전) useInfiniteQuery 우리가 사용할 서브 뷰를 사용하여 다음과 같습니다.
• (그러한 내용, UI 구성 요소, 기본 쿼리, 페이지 매김 쿼리, 무제한 쿼리, 돌연변이 및 기타 장을 포함하여 귀하의 요구 사항에 따라 나머지 부분을 계속 번역하십시오.

위 내용은 React Query 3 : 데이터 가져 오기 및 관리 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!