reactquery 썸네일형 리스트형 React에서 Infinite Scroll 구현하기 Infinite Scroll은 목록의 끝에 도달할 때 자동으로 다음 데이터를 불러오는 패턴입니다. 적절히 구현하면 페이지 전환 없이 매끄러운 탐색을 제공하지만, 성능·접근성·에러 처리까지 신경 써야 합니다. 실무에서 바로 쓸 수 있는 IntersectionObserver 기반 구현, React Query 연동, 최적화 포인트를 정리합니다.1. 전략 선택: Scroll 이벤트 vs IntersectionObserver- IntersectionObserver: 브라우저가 뷰포트 교차 여부를 계산해 주어 정확하고 효율적입니다. 대부분 케이스에서 권장합니다.- Scroll 이벤트: 구형 브라우저나 특수 환경에서 fallback으로 사용합니다. 반드시 throttle/passive 처리로 성능을 챙깁니다.- 가상.. 더보기 React Suspense로 데이터 로딩 경험 개선하기 로딩 스피너 하나로는 부족합니다. React Suspense는 대기 중인 비동기 작업을 컴포넌트 트리 바깥으로 던지고, 가장 가까운 경계에서 적절한 대체 UI를 보여줍니다. 코드 스플리팅부터 데이터 로딩까지, 경계를 잘 배치하면 지연을 사용자 경험으로 전환할 수 있습니다.1. Suspense는 무엇이고 언제 쓰나요Suspense는 "대기"를 UI로 모델링합니다. Promise를 던지는 컴포넌트를 경계로 감싸면, 준비되기 전까지 fallback UI를 렌더링합니다. 실무에서는 다음에 유용합니다.- 코드 스플리팅된 청크 로드 대기- 데이터 요청 중 스켈레톤 보여주기- Next.js App Router에서 서버 컴포넌트 스트리밍2. 가장 쉬운 진입: 코드 스플리팅 + 스켈레톤큰 위젯은 lazy 로드하고 Sus.. 더보기 이전 1 다음