React-Query
<아래 공식문서>
fetching, caching, 서버 데이터와의 동기화를 지원해주는 라이브러리
이름처럼 React 환경에서의 비동기 Query(질의) 과정을 도와주는 라이브러리이다.
1. React Query는 React Application에서 서버 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트하는 작업을 도와주는 라이브러리이다.
2. 복잡하고 장황한 코드가 필요한 다른 데이터 불러오기 방식과 달리 React Component 내부에서 간단하고 직관적으로 API를 사용할 수 있다.
3. 더 나아가 React Query에서 제공하는 캐싱,Windos Focus Refetching 등 다양한 기능을 활용하여 API 요청과 관련된 번잡한 작업 없이 "핵심 로직"에 집중할 수 있다.
그렇다면, React-Query는 프론트엔드에서 비동기 데이터를 불러오는 과정 중 발생하는 문제들을 해결하는데, 어떤 문제들을 해결할까?
1. 캐싱(Caching)
React-Query의 장점 중 하나는 데이터를 캐싱한다는 점이다.
캐싱이란 특정 데이터의 복사본을 저장하여 이후 동일한 데이터의 재접근 속도를 높이는 것
React-Query는 캐싱을 통해 동일한 데이터에 대한 반복적인 비동기 데이터 호출을 방지하고, 이는 불필요한 API 콜을 줄여 서버에 대한 부하를 줄이는 좋은 결과를 가져온다.
=> 데이터가 최신의 것인지 아닌지는?
만일 서버 데이터를 불러와 캐싱한 후, 실제 서버 데이터를 확인했을 때 서버 상에서 데이터의 상태가 변경되어 있다면, 사용자는 실제 데이터가 아닌 변경 전의 데이터를 바라볼 수밖에 없게 된다. 이는 사용자에게 잘못된 정보를 보여주는 에러를 낳는다.
💡 참고로, React-Query에서는 최신의 데이터를 fresh한 데이터, 기존의 데이터를 stale한 데이터라고 말한다!!
Client 데이터와 Server 데이터 간의 분리
Client Data: 모달 관련 데이터, 페이지 관련 데이터 등등..
Server Data: 사용자 정보, 비즈니스 로직 관련 정보 등등..
간단하게 생각해서 비동기 API 호출을 통해 불러오는 데이터들을 Server 데이터라고 할 수 있다.
실제 Client 데이터의 경우 Redux, Recoil, movX와 같은 전역 상태 관리 라이브러리들을 통해 잘 관리되어오고 있으나, 이러한 라이브러리들이 Server 데이터까지도 관리를 해야하는 상황이 발생하는 것.
React-Query 결론
React-Query는 데이터 요청, 변경에 관련된 코드를 단순화시켜준다. 이를 통해 서버와의 데이터 요청과 응답을 처리하는 코드를 작성하는데 더 적은 시간을 투자할 수 있으며, 애플리케이션의 성능과 유지보수성을 높일 수 있다.
React-Query로 데이터 요청의 상태를 추적하여 UI를 적절하게 업데이트 할 수 있다. 예를 들면, 복잡한 코드 작성 없이 isLoading으로 데이터의 로딩 상태를 추적하고, 로딩 중인 경우 로딩중임을 알리는 UI를 렌더링 할 수 있습니다. 이러한 UI 업데이트는 React-Query에서 자동으로 처리된다.
