서버 상태관리 라이브러리인 Tanstack Query를 공부해 보려한다!-!
Tanstack Query
먼저 Tanstack Query는 리액트에서 서버상태 관리를 위한 라이브러리이다.
서버상태 관리란 클라이언트와 서버 간의 데이터 상태를 동기화하여 관리하는 것을 의미하며 이 과정에서 발생할 수 있는 불편함들을 최소화하고 ux를 향상시키기 위해 비동기적 통신 방식을 보다 효과적으로 활용하여 개발자가 더욱 편리하게 데이터를 관리하고 사용자에게 더 나은 경험을 제공할 수 있도록 도와주는게 Query의 역할이다.
다른 라이브러리들과 차이점
현재는 Tanstack Query뿐만 아니라 Redux, Recoil 등 여러 상태 라이브러리가 있는데 요즘에는 주로 Query를 많이 쓰인다고 한다. 어떤점으로 인해 그런건지 궁금해져서 공식문서 통해 Query의 장점을 알아보았다!!
캐싱을 통한 효율적인 데이터 통신
Query는 캐싱을 통해 데이터를 관리한다. 자동 메모이제이션이 가능해 동일한 요청을
보낼 경우 이전에 받았던 데이터를 재사용하기 때문에 불필요한 요청을 막아
성능을 향상시키고 네트워크 비용과 데이터 처리 비용을 절약하는 데 도움이 된다.
간단한 Boilerplate code
Query가 나오기 이전 많이 쓰이던 상태관리 라이브러리 중 Redux가 있었는데
상태관리에는 유용하지만 이때 필요한 재사용 코드가 너무 복잡해서 사용이 어려웠다고 한다. 이에 반해 Query는 간단한 Boilerplate 코드를 사용하기 때문에 더 효율적인 개발환경을 제공하여 빠르게 개발을 시작하고 더 적은 코드를 작성할 수 있도록 한다.
사용자 경험(ux) 향상을 도움
데이터를 가져오는 과정에서 로딩, 에러 처리를 쉽게 구현할 수 있도록 값을 제공해 주고, 매번 서버에서 데이터를 가져올 필요 없이 캐싱 방식을 도입해 유저에게 더 빠르게 데이터를 보여 줄 수 있도록 도와준다.
내가 중요하게 생각한 장점 외에도 무한스크롤, 페이지네이션 등 기능구현을 편리하게 할 수 있도록 지원하기도 하고 여러가지 기능을 많이 가지고있는 라이브러리였다..!
Tanstack Query 공식문서 https://tanstack.com/query/latest
Tanstack Query와 캐시 상태
Query을 사용하는데 꼭 알아야할 개념으로 캐시와 캐시상태에 대해 간단하게 정리해보았다!-!
캐시(Cache)
데이터를 미리 복사해 놓고 임시 저장하는 메커니즘
웹 브라우저의 캐시 활용
- 저장 용량은 작지만, 데이터를 가져오는 속도는 빠른 임시 저장 공간
- 속도 향상과 네트워크 비용 절감을 위해 사용
- 사이트에 접속할 때 서버에 데이터를 요청하는 것이 아니라, 캐시된 데이터를 활용(= 캐싱)
캐시에 저장된 데이터 상태
Fresh (신선한 상태)
백엔드에서 최근에 받아 캐시에 저장된 상태로 데이터가 유효하여 신선한 상태
Stale (신선하지 않은 상태)
데이터가 캐시되어 있지만 유효기간이 지나 신선하지 않은 상태
=> 이 상태에서는 백그라운드에서 데이터를 업데이트하는 refetch가 실행된다.
Inactive (비활성화 상태)
컴포넌트가 언마운트되면 캐시된 데이터가 비활성화된 상태
=> 이 때 해당 데이터는 캐시에서 제거된다.
상태의 따른 실행작업
데이터가 fresh 상태면 캐시에 저장된 데이터 리턴
데이터가 stale 상태면 백그라운드에서 refetch(=새로운 데이터를 가져오는 것)를 진행
내용이 길어지는 관계로 쿼리의 사용법은 다음 포스트로 올려야겠다...★
