React-Query 학습 (1)

nextjs의 끝판왕이라 생각되는 React-Query를 개념적으로만 다루어보겠습니다.

 

React-Query는 React 앱에서 비동기 로직을 간편하게 처리할 수 있도록 도와주는 라이브러리입니다.

이전에 Redux와 Saga를 사용하여 비동기 관련 로직을 다뤘던 것과 다른 비동기 작업을 접근하고,

다양하고 유용한 기능을 제공하고있습니다.

React-Query

React-Query는 비동기 데이터 요청과 관련된 여러 가지 문제점을 해결하기 위해 등장했습니다. 이 라이브러리는 전역 상태 관리, 캐싱, 리패칭 등을 자동으로 처리하여 개발자가 데이터의 무결성에 직접 신경 쓰지 않아도 되도록 돕습니다.

기존에는 React 애플리케이션에서 비동기 데이터를 다루기 위해 Redux나 Context API와 함께 자체적으로 상태 관리 및 데이터 요청을 처리하는 방식이 일반적이었습니다. 하지만 이는 종종 복잡성과 비효율성을 야기했습니다. React-Query는 이러한 문제를 해결하고자, 데이터 요청에 대한 추상화와 효율적인 데이터 캐싱, 재요청을 간소화함으로써 개발자들이 더 직관적이고 유지보수가 쉬운 코드를 작성할 수 있도록 지원합니다.

또한 React-Query는 성능을 극대화하기 위해 다양한 최적화 기능을 내장하고 있습니다. 예를 들어, 중복된 데이터 요청을 최소화하고 캐시를 활용하여 성능 향상을 꾀합니다. 이는 네트워크 요청을 줄이고, 애플리케이션의 반응성을 향상하는 데 도움을 줍니다.

따라서 React-Query는 React 애플리케이션의 비동기 데이터 관리를 단순화하고 최적화하여 개발자들이 더 효율적으로 작업할 수 있도록 돕는 유용한 도구로 평가되고 있습니다.

useQueryClient

useQueryClient는 React-Query의 중요한 훅 하나로, QueryClient를 통해 생성된 객체의 정보를 얻는 데 사용됩니다.

이를 통해 캐싱과 관련되는 정보를 자식 컴포넌트에서도 확인할 수 있어, 데이터의 상태를 효율적으로 관리할 수 있습니다. 이는 Context Api와 비슷한 사용 방식을 제공하며, 애플리케이션의 전역적인 데이터 상태를 관리하는 데 유용합니다.

 

다음 장에서는 변경점 v4에서의 v5까지 어떻게 바뀌어가고 있는지 살펴보겠습니다.