제6강: AI 모델 선택과 활용

GPT-4의 응답

import { useState, useEffect, useCallback, useRef } from 'react';

interface UseInfiniteScrollOptions {
  threshold?: number;
  rootMargin?: string;
  onLoadMore: () => Promise;
  hasMore: boolean;
}

export const useInfiniteScroll = ({
  threshold = 0.1,
  rootMargin = '0px',
  onLoadMore,
  hasMore
}: UseInfiniteScrollOptions) => {
  const [isLoading, setIsLoading] = useState(false);
  const observerRef = useRef(null);
  
  const lastElementRef = useCallback((node: HTMLElement | null) => {
    if (isLoading) return;
    
    if (observerRef.current) {
      observerRef.current.disconnect();
    }
    
    if (!hasMore || !node) return;
    
    observerRef.current = new IntersectionObserver(
      async (entries) => {
        if (entries[0].isIntersecting && hasMore && !isLoading) {
          setIsLoading(true);
          try {
            await onLoadMore();
          } catch (error) {
            console.error('Error loading more items:', error);
          } finally {
            setIsLoading(false);
          }
        }
      },
      { threshold, rootMargin }
    );
    
    observerRef.current.observe(node);
  }, [isLoading, hasMore, onLoadMore, threshold, rootMargin]);
  
  useEffect(() => {
    return () => {
      if (observerRef.current) {
        observerRef.current.disconnect();
      }
    };
  }, []);
  
  return { lastElementRef, isLoading };
};

// 사용 예제
const MyComponent = () => {
  const [items, setItems] = useState([]);
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  
  const loadMore = async () => {
    const newItems = await fetchItems(page);
    if (newItems.length === 0) {
      setHasMore(false);
    } else {
      setItems(prev => [...prev, ...newItems]);
      setPage(prev => prev + 1);
    }
  };
  
  const { lastElementRef, isLoading } = useInfiniteScroll({
    onLoadMore: loadMore,
    hasMore
  });
  
  return (
    

      {items.map((item, index) => (
        

          {item.content}
        
      ))}
      {isLoading && 
Loading...
}
    
  );
};

GPT-4의 특징:

• TypeScript로 타입 안전성 확보
• IntersectionObserver를 활용한 효율적 구현
• 에러 처리와 메모리 누수 방지 포함
• 완전한 사용 예제 제공