![]()
웹페이지에서는 데이터 요청 상태에 따라 UI는 다른 상태를 보여주어야 한다.데이터가 패칭 중 일 때 로딩 UI, 에러가 났을 때 에러 UI 등이 있다.위 상황을 처리하기 위해 다양한 방법을 사용할 수 있다.프로젝트에 적용하면서 유지보수성 및 가독성이 좋은 방법이 뭐가 있을까 고민하던 중Suspense와 ErrorBoundary를 활용한 선언적 데이터 패칭 처리 방법을 채택하게 되었고, 블로그로 정리하고자 한다.전통적인 데이터 패칭 처리@tanstack/react-query에서는 useQuery 값 내 isLoading, isError 상태값을 제공해 준다.아래는 useQuery를 사용해 standard 한 방법으로 비동기 요청으로 데이터를 받아와 사용자에게 전달하는 OrderList 페이지다.import..
![]()
프로젝트 내에 한 리스트 페이지를 구현하면서 무한 스크롤 페이징 기능을 만들었다. react-query의 useInfiniteQuery와 IntersectionObserver를 사용하여 구현해 보았는데, 다른 페이지에서 반복적으로 사용될 수 있는 로직이 있어 custom hooks으로 분리하여 리팩토링을 해주었다. 이를 블로그로 정리해보고자 한다. 무한 스크롤 페이징의 구현 무한 스크롤 페이징의 구현방식은 다음과 같다. useInfiniteQuery를 통해 리스트 데이터를 일부 호출하여 보여준다. IntersectionObserver를 통해 view에서 지금까지 호출된 데이터의 리스트가 다 보였을 때를 target으로 인지하고 target이 보였을 때 && list에 다음 페이지 데이터가 있을 때 다음 ..
