[Tanstack Query] isFetching과 isPending의 차이점
강의를 들으며 코드를 따라친 것을 제외하면 내가 만드는 프로젝트에서 tanstack query를 사용해본 것이 처음이었다. 사실 아직 모르는 부분도 많고, 내가 글을 읽으면서 공부하기보다는 직접 부딪히며 배우는 스타일이라고 생각해서 강의를 통해 기초를 익힌 뒤 무작정 프로젝트 개발에 들어갔다.
사실 프로젝트 개발이라고는 해도, 강의에서 따라 쳤던 코드를 기반으로 하는 거라서 크게 어려움은 없었다. (추가 기능 개발 시에는 GPT의 도움을 많이 받았고...) 그런데 매일 퇴근 후에 짬을 내서 사이드 프로젝트를 제작하다 보니, 그리고 최대한 빠르게 완성하고 싶은 욕심에 내가 잘 모르는 개념이 있더라도 작동만 제대로 하면 넘어가는 경우가 종종 있었다.
그 대표적인 예시가 바로 tanstack query의 상태 개념이다. 상태의 종류는 대표적으로 isPending, isError, isSuccess가 있으며 추가적으로 isFetching이라는 상태가 존재한다. 이름만 봐도 어떤 상태를 나타내는지 구분하는 데 어려움은 없지만, 두 가지 상태가 눈에 띈다.
isPending과 isFetching
isPeding은 요청하는 중이라는 뜻 같은데, 이제 보니 isFetching도 동일한 의미처럼 보인다. 그리고 조금 예전 코드를 살펴보면 isLoading이라는 상태도 종종 발견할 수 있었다.
솔직히 잘 몰랐다. 셋 중 아무거나 사용하더라도 처음에는 내가 의도한 대로 잘 적용되는 것처럼 보였거든! 내가 주로 위 세 가지 상태를 사용한 예시는 다음과 같았다.
- 최초에 데이터를 불러오기 전, 로딩 상태를 나타내기 위해 사용
- 이후에 데이터를 추가로 불러올 때 로딩 상태를 나타내기 위해 사용
- mutation으로 API 호출 후 중복 제출되지 않게 버튼을 disable 하기 위해 사용
그런데 1번 상황에서 문제가 발생했다. 아무 생각없이 isLoading을 사용했다가 로딩 UI가 사라지지 않는 경우가 있었던 것이다. 음...? 대체 왜일까...... 그래서 isFetching으로 변경했더니 이번에는 내가 의도한 대로 동작했다.
분명 구분해서 만들어 놓은 데에는 이유가 있을 테니, 구현을 해놓고 오늘에야 그 차이점을 자세히 찾아보았다.
isPending
isPeding은 해당 쿼리에 아직 데이터가 존재하지 않음을 의미한다. 즉, 화면에 최초 진입했을 때 아직 API를 통해 불러온 데이터가 없다면 true가 된다. 상기한 1번 경우에 아주 잘 어울리는 상태인 것이다.
isFetching
isFetching은 이미 데이터가 있는 상태든 아니든, 쿼리가 데이터를 가져오는 중이라면 true가 된다. 상기한 2번과 3번 상황에 잘 어울리는 상태라고 볼 수 있다.
그럼 isLoading은?
TanstackQuery의 공식 문서를 찾아보면, 4버전까지는 isLoading이 존재했지만 5버전으로 넘어오면서 isPending으로 대체된 것으로 보인다.
isPeding && isFetching
음! 이제 개념은 알겠다. 그런데 1번 상황에 대해서 다시 생각해보니, 참 이상한 점이 있다. isLoading을 사용했을 때 왜 최초에 계속 로딩 UI가 화면에 노출된 것일까? 가만히 생각해 보니, 내가 문제를 겪은 것은 검색 화면이었다. 최초 진입 시에는 검색 키워드가 없으니 해당 쿼리의 enable 속성이 false인 상태였다.
이에 관해 찾아보니, 애초에 쿼리가 실행된 적이 없으면 당연히 쿼리에 데이터도 없을 것이고 그러면 당연히isPending은 true가 될 수밖에 없다...... (초기화된 적이 없으니까)
그래서 이때는 isPending && isFetching을 조건으로 걸어 이것을 initailLoading 여부를 판단하는 변수로 사용하면 된다. isFetching은 현재 요청이 진행되고 있는지, 아닌지 여부를 알려주고 있으니 저장된 데이터가 없더라도 요청을 하는 중이 아니라면 굳이 로딩을 띄워주지 않아도 된다고 판단할 수가 있는 것이다.
여기까지 해서 Tanstack Query의 상태 개념에 대해 알아보았다. 공식 문서의 중요함을 오늘도 한 번 더 깨닫고 간다......... 이제 프로젝트에 적용하러 가야지!
