【한글자막】 React Query / TanStack Query : React로 서버 상태 관리하기

쿼리, 변이, Auth와의 통합, 테스트 등 모두 마스터하세요! 이 스마트한 종합 솔루션으로 서버의 데이터와 앱을 최신 상태로 쉽게 유지할 수 있습니다.

Ratings: 4.63 / 5.00




Description

버전 5 업데이트가 출시되었습니다!

2024년 1월부터 이 강좌는 React Query 버전 5를 다룹니다.

--


React Query가 React 앱에서 서버 상태 관리를 위한 최고의 솔루션이 된 이유가 있습니다!

--> 이 스마트한 종합 솔루션으로 서버의 데이터와 앱을 최신 상태로 쉽게 유지할 수 있습니다.


Redux로 서버의 데이터를 관리하는 경우 React Query는 앱에서 Redux를 대신할 수 있습니다. 그리고 React Query는 Redux보다 훨씬 간단하고 강력하게 서버 데이터 관리를 할 수 있습니다. 가령 React Query는 다음과 같은 것을 할 수 있습니다:

  • 서버 쿼리에 대한 로딩 상태와 에러 상태를 추적합니다 (이를 직접 관리할 필요가 없습니다!)

  • 업데이트된 데이터를 가져오는 동안 캐시된 서버 데이터를 표시할 수 있습니다.


1. 이 강의는 간단한 앱으로 시작하여 다음과 같은 React Query 버전 5의 기본 사항을 배웁니다:

  • 쿼리

  • 로딩 상태와 에러 상태

  • React Query 개발자 도구

  • 페이지 매김과 프리페칭(pre-fetching)

  • 변이(Mutation)


2. 그 다음엔 Star Wars API로 우회하여 무한 쿼리(사용자가 현재 데이터의 끝에 가까워지면서 더 많은 데이터를 얻음)에 대해 알아봅니다.


3. 마지막으로 위의 내용을 더 자세히 알아보기 위해 대형 멀티 컴포넌트 앱을 개발하고 추가로 아래의 내용을 배웁니다

  • 로딩과 에러 처리 중앙 집중화

  • 데이터 필터링

  • React Query를 Auth와 통합하기

  • 낙관적 업데이트를 포함한 변이 후 데이터를 최신 상태로 유지하는 방법

  • React Query 테스트하기


4. 그 외 주목할 만한 강의 특징:

  • React Query의 환경으로 사용할 미리 작성된 프로젝트가 있으므로 강의와 관련 없는 코드를 작성하는 데 시간을 낭비할 필요가 없습니다

  • 개념을 이해하고 있는지 확인하기 위해 정기적 “코드 퀴즈”로 연습할 수 있는 충분한 기회

  • 모든 복잡한 부분을 이해하는 데 도움이 되는 헷갈리는 개념에 대한 시각적 모델

  • 주요 프로젝트는 TypeScript로 작성되었습니다

  • Q&A를 통해 수강생들과 소통하는 것을 좋아하고 지원을 아끼지 않는 강사

    (강의와 관련하여 궁금하신 점은 무엇이든 Q&A에 남기실 수 있지만, 꼭 영어로 남겨주세요. 그래야 답변을 드릴 수 있습니다.)


React의 큰 반향이 무엇인지 확인하고 더 간단하고 강력한 서버 상태 관리로 여러분의 앱을 개선하세요!

1강에서 만나요!


- Bonnie

What You Will Learn!

  • React Query 버전 5의 쿼리, 변이(Mutation)와 캐시 제어
  • React Query를 통한 페이지 매김(Pagination), 무한 스크롤과 낙관적 업데이트
  • React Query를 인증과 통합
  • React Query 테스트

Who Should Attend!

  • 효율적이고 강력한 시스템으로 서버 상태를 관리하고 싶은 React 개발자