intersectionobserver 썸네일형 리스트형 React에서 Intersection Observer로 비디오 자동 재생 제어하기 스크롤에 따라 화면에 보이는 비디오만 자동 재생하고, 화면을 벗어나면 일시 정지시키는 UX는 피드·기사·제품 리스트에서 필수입니다. React에서는 Intersection Observer를 이용하면 성능 부담 없이 이를 안정적으로 구현할 수 있습니다.1. 핵심 아이디어와 브라우저 정책Intersection Observer는 특정 DOM이 뷰포트에 얼마나 노출되는지 비동기적으로 알려줍니다. 이 값을 기준으로 비디오를 play/pause 하면 됩니다. 단, 자동 재생은 브라우저 정책상 소리가 꺼진 상태(mutated)와 인라인 재생(playsInline)이 중요합니다. iOS Safari 등 일부 환경에서는 muted + playsInline 없이는 자동 재생이 거부됩니다.2. 단일 비디오 컴포넌트 구현가장.. 더보기 React에서 Infinite Scroll 구현하기 Infinite Scroll은 목록의 끝에 도달할 때 자동으로 다음 데이터를 불러오는 패턴입니다. 적절히 구현하면 페이지 전환 없이 매끄러운 탐색을 제공하지만, 성능·접근성·에러 처리까지 신경 써야 합니다. 실무에서 바로 쓸 수 있는 IntersectionObserver 기반 구현, React Query 연동, 최적화 포인트를 정리합니다.1. 전략 선택: Scroll 이벤트 vs IntersectionObserver- IntersectionObserver: 브라우저가 뷰포트 교차 여부를 계산해 주어 정확하고 효율적입니다. 대부분 케이스에서 권장합니다.- Scroll 이벤트: 구형 브라우저나 특수 환경에서 fallback으로 사용합니다. 반드시 throttle/passive 처리로 성능을 챙깁니다.- 가상.. 더보기 React 앱에서 Lazy Loading 이미지 처리하기 이미지는 웹 성능에 가장 큰 영향을 주는 자산 중 하나입니다. Lazy Loading은 화면에 보이기 전까지 이미지를 지연 로드하여 초기 로드 시간을 단축하고, 네트워크 사용량을 줄이며, 사용자 경험을 개선합니다. React에서 실무적으로 활용 가능한 Lazy Loading 전략과 코드 예제를 정리했습니다.1. 무엇이 왜 중요한가- 초기 렌더에 필요하지 않은 이미지를 늦게 불러오면 LCP, TTI 같은 핵심 지표가 개선됩니다.- 스크롤 목록, 카드 그리드 등 이미지가 많은 화면에서 효과가 큽니다.- 단, 첫 화면의 히어로 이미지는 Lazy Loading을 피하고 적극적으로 빠르게 로드해야 합니다.2. 가장 쉬운 방법: 네이티브 loading="lazy"브라우저가 제공하는 네이티브 속성으로 즉시 도입할 수.. 더보기 이전 1 다음