Tanstack Query
공식 사이트에서 해당 기술을 소개하는 문장은 다음과 같다.
Powerful asynchronous state management for TS/JS, React - 리엑트, JS, TS를 위한 강력한 비동기 상태 관리
공식 사이트를 조금 읽어보겠다.
텐스택 쿼리는 종종 웹 어플리케이션의 잃어버린 데이터 패칭 도서관이라고 설명되지만, 기술적인 측면에서 이것은 통신,캐싱,동기 그리고 서버 상태 업데이팅을 담당해준다.
전통적인 상태 관리 라이브러리들은 클라이언트 상태와 작업하기 적합한 와중에 그들은 서버 상태와 async와는 완벽한 조합을 이뤄내지 못한다. 이는 서버 상태는 완전하게 다르기 때문이다. 시작하는 입장에서 서버 상태는
원격적으로 존재한다 아마 너가 소유하거나 컨트롤하지 못할 위치에
패칭과 업데이팅을 위해서 비동기적인 API들이 요구된다.
공동 소유권을 가질 수 잇고 너의 지식과 무관하게 다른 사람들에 의해 변경될 수 있다.
조심하지 않으면 너의 어플리케이션은 잠재적으로 도태된다.
그래서 사용하면 좋은점은?
- 많은 라인과 복잡하고 이해하기 어려운 코드를 삭제할 수 있게 해준다. 대신 리엑트 쿼리 로직으로 손 쉽게 대체 가능하다.
- 너의 어플리케이션을 더욱 유지가능하고 새로운 기능을 빌드하기 쉬워진다. 새로운 서버 상태 데이터 소스 연결에 대한 걱정 없이.
- 유저들에게 더 빠르고 즉각적인 어플리케이션을 선사해 줄 수 있다.
- 잠재적으로 대역폭과 메모리 성능을 향상시켜준다.
이제 간단한 예시와 코드를 보면서 익숙해져보려고 한다.
일단 Tanstack query를 사용하는 목적은 HTTP요청을 보내고 유지하는데 이용하는 라이브러리다.
그럼 전에 작업했을때는 Tanstack query를 사용하지 않았는데 어떻게 통신하고 했나? useEffect나 fetch 함수 등으로 충분히 처리할 수 있었다는 점이다. 하지만 코드의 간결화와 수월한 작업을 위해 도입해보려고 한다.
기존 코드
const [data, setData] = useState();
const [error, setError] = useState();
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
async function fetchEvents() {
setIsLoading(true);
const response = await fetch('http://localhost:3000/events');
if (!response.ok) {
const error = new Error('An error occurred while fetching the events');
error.code = response.status;
error.info = await response.json();
throw error;
}
const { events } = await response.json();
return events;
}
fetchEvents()
.then((events) => {
setData(events);
})
.catch((error) => {
setError(error);
})
.finally(() => {
setIsLoading(false);
});
}, []);Tanstack query 적용
const {data, isPending, isError, error} = useQuery({
queryKey : ['event'],
queryFn : fetchEvents, // useEffect 안에 있던 통신 함수를 fetchEvents로 분리시켜서 불러온 것
staleTime : 5000,
})그래서 후기
저번 독서록 프로젝트를 할때 매 컴포넌트 마다 최소 한번은 HTTP 통신을 해서 데이터를 서버에서 받아와서 화면에 뿌려줘야 했는데 해당 코드가 적어도 50줄 이상은 되었다. 해당 코드를 매 컴포넌트마다 반복되는 것을 봤을때 가시성도 떨어지고 아주 별로였다.
그래서 리펙토링 진행했던 방향이 커스텀 훅을 통해서 공통 기능을 처리하는 코드를 묶어서 진행했다.
하지만 텐스택 쿼리를 공부해보니까 데이터를 다루는거에서 그치지 않고 기본적으로 코드를 작성하지 않아도 제공해주는 기능이 다양하고 유용했다. 특히 오류 처리나 staleTime을 설정해줘서 새로 data를 받아오지 않고 캐시된 data를 최신의 data로 간주하고 사용하기 위해 설정해주는 것은 전에 프로젝트를 진행하며 쓸대없이 같은 데이터를 계속 받아오는 문제점을 간편하게 해결 할 수 있었다.
