현대 Web APIs 실무 — Observer 패턴과 브라우저 API

1// ✅ IntersectionObserver로 무한 스크롤
2function useInfiniteScroll(onLoadMore: () => void) {
3  const sentinelRef = useRef<HTMLDivElement>(null);
4
5  useEffect(() => {
6    const sentinel = sentinelRef.current;
7    if (!sentinel) return;
8
9    const observer = new IntersectionObserver(
10      (entries) => {
11        if (entries[0].isIntersecting) {
12          onLoadMore(); // 리스트 끝에 닿으면 더 로드
13        }
14      },
15      { threshold: 0.1 } // 10% 보이면 트리거
16    );
17
18    observer.observe(sentinel);
19    return () => observer.disconnect(); // 정리
20  }, [onLoadMore]);
21
22  return sentinelRef;
23}
24
25// 사용
26function PostList() {
27  const { posts, loadMore } = usePosts();
28  const sentinelRef = useInfiniteScroll(loadMore);
29
30  return (
31    <ul>
32      {posts.map(post => <PostItem key={post.id} post={post} />)}
33      <div ref={sentinelRef} /> {/* 이 요소가 보이면 로드 */}
34    </ul>
35  );
36}

1function LazyImage({ src, alt }: { src: string; alt: string }) {
2  const [loaded, setLoaded] = useState(false);
3  const imgRef = useRef<HTMLImageElement>(null);
4
5  useEffect(() => {
6    const img = imgRef.current;
7    if (!img) return;
8
9    const observer = new IntersectionObserver(([entry]) => {
10      if (entry.isIntersecting) {
11        img.src = src; // 화면에 들어올 때 src 설정
12        setLoaded(true);
13        observer.disconnect();
14      }
15    });
16
17    observer.observe(img);
18    return () => observer.disconnect();
19  }, [src]);
20
21  return (
22    <img
23      ref={imgRef}
24      alt={alt}
25      style={{ opacity: loaded ? 1 : 0, transition: 'opacity 0.3s' }}
26    />
27  );
28}
29// 참고: 최신 브라우저는 <img loading="lazy" />로 더 간단하게 처리 가능