이번 프로젝트에서 내가 꼭 써봐야 겠다하는 라이브러리가 있었는데,
바로 TanStackQuery(구 react Query)이다. 바뀌고 나서 입에 찹찹 안 달라붙긴 하는데 꼭 써보고 싶었다.
물론 라이브러리는 사용하기 이전에 꼭! 왜?? 라는 근거를 댈수 있어야 해서 내 블로그에서는 어떻게 쓸수 있을까 고민을좀 많이 해봤다. 그럼이제 무슨 라이브러리고 어떤 목적으로 쓸수 있을지 확인해보자.
1. Tanstack Query 누구세용?
Tanstack Query는 클라이언트 상태가 아닌 "서버 상태(Server State)"를 효율적으로 관리하는 라이브러리이다.
서버의 상태가 처음에 들으면 애매한데 서버상태란
클라이언트 상태 (Client State) | 서버 상태 (Server State) |
useState, useReducer 등으로 관리 | fetch(), axios.get()으로 서버에서 받아오는 외부 데이터 |
즉시 변경 가능 | 비동기, 네트워크 지연, 에러 발생 가능 |
UI 조작 중심 | 서버의 데이터 동기화가 중요 |
즉, 서버에서 받아온 데이터를 어떻게 클라이언트에서 관리할지 도와주는 라이브러리 라고한다.
처음에는 관리라고 하니까 아 그러면 게시글 전체를 가져오는 대시보드에서 검색을 할때 이미 전체 데이터가 있으니 여기서 필터해서 서버없이 다시 보여주는 그런거 할수있나보구나! 라고 생각했는데… 이건 잘못된 접근이다. 그럴꺼면 진짜 쿼리는 왜필요하겠는가
그런게 아니라면, 아니 어차피 필요한 데이터 가져와서 보여주거나 파싱하면 끝인데 뭐하러 “관리”까지 해야해요??
프론트엔드 관점에서 “데이터”는 화면을 보여줄 기준일 수도 있고, 특정 액션이 이후에 보여질 데이터가 달라질 수도 있다. 특정 데이터 삭제후 Api재호출, 무한스크롤 등…
즉 TanstackQuery는 비동기 데이터를 기반으로 UI를 만드는 사람” 입장에서 귀찮은 걸 다 해주는 라이브러리이다.
2.Tanstack Query의 기능
TanstackQuery는 api를 호출하는 시점부터 시작해서 클라이언에 내려온 이후에도 여러가지 기능을 가지고있다.
기능 | 설명 |
데이터 Fetch | API 호출을 자동으로 처리 ( useQuery, useInfiniteQuery) |
캐싱(Cache) | 요청 결과를 메모리에 저장해서 중복 호출 방지 |
자동 리페치 | 창 포커스/네트워크 재연결 시 자동으로 데이터 새로고침 |
로딩/에러 상태 관리 | isLoading, isError, error, data 등 상태 자동 추적 |
쿼리 키 관리 | 동일한 요청을 식별하고 구분할 수 있게 도와줌 |
데이터 동기화 | invalidateQueries, refetchQueries로 서버 데이터와 클라이언트 상태 동기화 |
SSR/하이드레이션 지원 | Next.js와의 궁합도 굿 👍 |
3. TanstackQuery 주요 훅들은 뭐가 있을까.
- useQuery : 데이터를 가져오는 1회성 훅.
- useMutation : 데이터를 생성/수정/삭제할 때 사용하는 훅
- useInfiniteQuery : 연속된 호출을 할때 사용하는 훅
- useQueries : 여러 단일 쿼리를 병렬로 요청할 때 사용하는 훅
+유용하게 쓸수있는 함수는 뭐가있을까
- invalidateQueries() : 강제로 refetch를 유도하는 함수
- setQueryData() : 캐시를 수동 업데이트하는 함수
- getQueryData() : 현재 캐시된 데이터를 가져오는 함수
- prefetchQuery() : 미리 fetch 해두는 함수…?
4. 이제 내 블로그 프로젝트에서 한번써보자.
TanstackQuery를 아 이래서 써야하는구나! 하는 케이스를 좀 찾아보다 매우 흥미로운 기능을 발견했다. 바로 useInfiniteQuery로 무한 스크롤을 구현할 수 있다는 것이다.
내 블로그는 각 카테고리의 포스팅을 PostCard를 구현해서 보여주는데 한번에 너무 많은 카드들이 랜더링 되거나 SSR에서 내려주면 조금 문제가 있다 생각해서 무한스크롤을 이참에 구현해보자라고 생각했는데 아주 좋은 실험 대상이다.
TanstackQuery를 바로 적용하기 이전에 Next는 조심스럽게 다가가야 하기때문에
G님에게 Next에서 TanstackQuery를 쓰기전에 꼭 유의해야할 점을 물어봤다.
작성중 …