다루다 프로젝트에서, 데모데이 기간동안 만들어둔 코드를 리팩토링하게 되었는데
이때 난 툴 목록 페이지의 랜더링 속도 개선을 위해 tanstack query를 적용하여, 데이터 패칭 상태를 관리해주는 테스크를 담당하게 되었다.
기존에는 여러 상태 관리를 통해서, loading과 error 유무를 랜더링해주었기에 코드가 다소 복잡했었고, 데이터 캐싱없이 카테고리 / 무료툴 여부를 누를때마다, 새롭게 값을 받아오는 방식이었기 때문에 이부분에 대해서 tanstack query로 해당 페이지의 로직을 변경하게 되었다.
Infinite Sroll 에서 페이지의 하단을 만났을때 새로운 데이터를 불러오는 동안의 로딩 처리는 Lottie를 이용해 spinner를 랜더링하는 형식이었다. 그동안 useQuery를 통해 데이터를 패칭할때 isLoading 을 useQeury 로 부터 받아와, 로딩 상태를 핸들링했기 때문에 이번에도 동일하게 처리했으나 예상과는 다르게 동작하게 되었다.
{isLoading && ( <S.Lottie> <LoadingLottie /> </S.Lottie> )}
처음 데이터를 받아오는 동안에는, spinner가 정상적으로 잘 보였으나
페이지 하단에서 다시 데이터를 받아올때는 로딩 UI가 나타지 않았다.
처음에는 다음 페이지를 요청하는 무한스크롤의 트리거가, spinner 를 랜더링시키는 코드보다 위쪽에 있어서 생기는 문제라고 생각했다.
하지만, 문제는 트리거 위치와는 별개로, isLoading과 isFetching 의 차이점에 대한 이해 부족이었다!
isLoading과 isFetching
isLoading과 isFetching은 공통적으로 Tanstack Query에서 데이터를 불러올 때 사용하는 상태값인데, 상황에 따라 다르게 사용된다.
- isLoading:
- 데이터를 처음 불러오는 동안 true로 설정
- 컴포넌트가 처음 마운트될 때 데이터를 요청하고 있을 때 true -> 한 번 데이터가 로드되면 false로 변경된다
- isFetching:
- 추가 페이지를 요청하는 중에도 true로 설정
- 무한 스크롤로 데이터를 추가로 요청할 때, 혹은 페이지를 변경할 때마다 이 값이 true로 설정된다.
isLoading은 처음 데이터를 불러올 때만 true가 되기 때문에, 무한 스크롤에서 페이지 하단에 도달하고 새로운 데이터를 요청할 때는 isLoading이 아니라 isFetching을 활용해야 했다는 것이다.
{(isLoading || isFetching) && (
<S.Lottie>
<LoadingLottie />
</S.Lottie>
)}
위 코드처럼 isLoading과 isFetching을 함께 사용하면, 초기 데이터 패칭 시에는 isLoading, 추가 데이터 패칭 시에는 isFetching을 통해 두 로딩 상태를 정확하게 처리할 수 있었다. 이 방식으로 Lottie 애니메이션을 적용해서, 무한 스크롤의 로딩 상태를 관리해볼 수 있었다.
