개발자

React 무한 스크롤 구현 방식(useState,useInfiniteQuery) 차이점?

2024년 02월 25일조회 115

프로젝트를 진행하면서 useInfiniteQuery를 사용해 무한스크롤 기능을 구현했습니다. 방식은 대충 아래와 같이 흘러갑니다. 1. intersection-observer를 사용해 특정 영역이 보이면 useInfinteQuery를 사용해 pageParam를 +1 하고 axios 함수를 호출합니다. 2. 카테고리 별로 상품을 나눴으며 카테고리 재 클릭 시(A->B->A) 캐시가 삭제되어 다시 처음부터 무한 스크롤이 작동 됩니다. 다 만들고 생각해보니깐 뭔가 observer가 활성화되면 axios 함수를 호출 할 때마다 useState를 사용해서 setState(page +1) 이런식으로 적용해서 /shop/getAll/${category}?page=${page} 여기에 넣어주면 구현은 될 거 같습니다. 하지만 이게 성능에 큰 차이점이 있는지도 잘 모르겠고 server 상태를 관리하기 위해 이렇게 사용하는 건가 싶기도 하고.. 두 가지 구현 방식에 대해 차이점을 잘 모르겠습니다. 다른 분들은 왜 사용하고 있는지 궁금합니다. (정확히는 useState를 사용해서 무한 스크롤을 구현하는 방식이랑 useInfiniteQuery를 사용해 구현하는 방식의 차이를 모르겠습니다.)

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 0

답변이 없을 때 보이는 아이콘

첫 답변을 기다리고 있어요.

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 02월 25일

useState와 useInfiniteQuery는 상태 관리를 위한 훅이지만, 두 가지의 주요 사용법과 차이점은 다음과 같습니다. 1) useState: 이는 단순히 컴포넌트의 로컬 상태를 관리하는 React의 기본적인 훅입니다. 보통 간단한 데이터 구조와 UI 상태 변경을 위해 사용됩니다. 이 경우, 페이지 번호를 state로 관리하고 무한 스크롤 로직에서 페이지 번호를 직접 증가시키면서 API 호출을 수동으로 하게 됩니다. 2) useInfiniteQuery: 이것은 React Query라이브러리에서 제공하는 훅으로, 자동 페이지화 및 "무한 스크롤" 목록에 매우 적합합니다. 복잡한 네트워크 로직(캐싱, 동기화, 자동 refetch 등)을 처리하며 개발자의 부담을 줄여줍니다. `useInfiniteQuery`는 페이지 파라미터를 자동으로 처리하고, 'load more' 버튼 클릭 혹은 intersection observer 콜백에서 `fetchNextPage` 함수를 호출하는 것만으로도 다음 페이지 데이터를 가져올 수 있습니다. 따라서 대부분의 경우에는 `useInfiniteQuery`가 `useState`보다 우수합니다. 왜냐하면 a) `useInfiniteQuery`는 페이지별로 데이터를 캐싱하므로 카테고리 A->B->A로 넘어갈 때 이전에 불러왔던 데이터를 재사용할 수 있습니다. useState 방식에서는 매번 API 호출을 다시 해야 합니다. b) React Query가 data fetching 및 캐싱 등 복잡한 부분을 처리해주므로 코드 관리가 용이합니다. c) React Query는 비동기 작업의 각 상태(로딩 중, 오류, 성공 등)를 관리하는 기능도 내장하고 있어서, 이러한 부분들을 매번 직접 구현할 필요가 없습니다. 그러나 useInfiniteQuery와 같은 라이브러리 사용에 대한 의존성과 오버헤드를 최소화하려는 경우, 혹은 프로젝트나 개발 환경이 요구하는데 따라 useState와 같은 기본 훅을 이용해서 직접 구현하는 것이 필요할 수도 있습니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!