[Day52] ⚛️ React React 무한 스크롤 구현

[github-actions]

React 무한 스크롤 구현

카테고리: ⚛️ React
난이도: 🟢 Easy
제한 시간: 15분

---

문제

쇼핑몰 상품 목록을 무한 스크롤로 구현하세요. IntersectionObserver를 사용하여 사용자가 스크롤할 때마다 추가 데이터를 로드합니다.

코드

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

const products = Array.from({ length: 20 }, (_, i) => ({ id: i + 1, name: `Product ${i + 1}` }));

function InfiniteScroll() {
  const [items, setItems] = useState(products);
  const loader = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        // TODO: 여기에 구현하세요
      }
    }, { threshold: 1.0 });

    if (loader.current) {
      observer.observe(loader.current);
    }

    return () => {
      if (loader.current) {
        observer.unobserve(loader.current);
      }
    };
  }, []);

  return (
    <div>
      <ul>
        {items.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      <div ref={loader}>Loading more items...</div>
    </div>
  );
}

export default InfiniteScroll;

요구사항

1. IntersectionObserver를 사용하여 스크롤 이벤트를 감지해야 합니다.
2. 사용자가 스크롤하여 하단에 도달할 때마다 새로운 상품을 추가해야 합니다.
3. 초기 상품 목록은 20개이며, 스크롤할 때마다 10개의 상품을 추가해야 합니다.

힌트

💡 힌트 보기

IntersectionObserver를 사용하여 하단 요소가 화면에 보일 때 새로운 데이터를 추가하세요.

---

🤖 이 문제는 AI에 의해 자동 생성되었고, 생성 후 검수 단계를 거쳤습니다.
풀이는 PR로 제출해주세요! 정답은 다음 날 자정에 댓글로 공개됩니다.

[github-actions]

📝 레퍼런스 정답

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

const products = Array.from({ length: 20 }, (_, i) => ({ id: i + 1, name: `Product ${i + 1}` }));

function InfiniteScroll() {
  const [items, setItems] = useState(products);
  const loader = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        setItems((prevItems) => [
          ...prevItems,
          ...Array.from({ length: 10 }, (_, i) => ({ id: prevItems.length + i + 1, name: `Product ${prevItems.length + i + 1}` }))
        ]);
      }
    }, { threshold: 1.0 });

    if (loader.current) {
      observer.observe(loader.current);
    }

    return () => {
      if (loader.current) {
        observer.unobserve(loader.current);
      }
    };
  }, []);

  return (
    <div>
      <ul>
        {items.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      <div ref={loader}>Loading more items...</div>
    </div>
  );
}

export default InfiniteScroll;

자신의 풀이와 비교해보세요! 다른 접근 방식도 정답일 수 있습니다.