1. InfiniteScrollBasic

InfiniteScrollBasic 컴포넌트는 사용자가 페이지를 스크롤할 때마다 새로운 항목을 로드하는 기본적인 인피니티 스크롤을 제공합니다. 아래는 이 컴포넌트를 사용하는 방법에 대한 설명입니다.

1.1. Import

import InfiniteScrollBasic from '@components/InfiniteScroll/InfiniteScrollBasic';

1.2. Usage

기본 사용 예제는 아래와 같습니다:

Scroll down to load more

import InfiniteScrollBasic from '@components/InfiniteScroll/InfiniteScrollBasic';

function Example() {
  const content = [
    "This is the first sentence of the infinite scroll example.",
    "Here is the second sentence that will appear.",
    "The third sentence shows up as you scroll down.",
    // ... (더 많은 문장들)
  ];

  return <InfiniteScrollBasic content={content} />;
}

export default Example;

1.3. Props

InfiniteScrollBasic 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`content`	스크롤 시 로드할 항목들의 리스트입니다.	`string[]`	`[]`

1.4. Full Example

import InfiniteScrollBasic from '@components/InfiniteScroll/InfiniteScrollBasic';

function FullExample() {
  const content = [
    "This is the first sentence of the infinite scroll example.",
    "Here is the second sentence that will appear.",
    // ... (더 많은 문장들)
  ];

  return <InfiniteScrollBasic content={content} />;
}

export default FullExample;

2. InfiniteScrollImage

InfiniteScrollImage 컴포넌트는 사용자가 페이지를 스크롤할 때마다 새로운 이미지를 로드하는 인피니티 스크롤을 제공합니다. 이 컴포넌트는 이미지 URL 배열을 받아 이미지를 무한히 로드할 수 있습니다.

2.1. Import

import InfiniteScrollImage from '@components/InfiniteScroll/InfiniteScrollImage';

2.2. Usage

기본 사용 예제는 아래와 같습니다:

Scroll down to load more

import InfiniteScrollImage from '@components/InfiniteScroll/InfiniteScrollImage';

function Example() {
const images = [
  "/images/image1.jpg",
  "/images/image2.jpg",
  "/images/image3.jpg",
  "/images/image4.jpg",
  // ... 더 많은 이미지
];

return <InfiniteScrollImage images={images} />;
}

export default Example;

2.3. Props

InfiniteScrollImage 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`images`	스크롤 시 로드할 이미지들의 URL 배열입니다.	`string[]`	`[]`

2.4. Full Example

import InfiniteScrollImage from '@components/InfiniteScroll/InfiniteScrollImage';

function FullExample() {
const images = [
  "/images/image1.jpg",
  "/images/image2.jpg",
  "/images/image3.jpg",
  "/images/image4.jpg",
  "/images/image5.jpg",
  // ... 더 많은 이미지
];

return <InfiniteScrollImage images={images} />;
}

export default FullExample;

3. InfiniteScrollBlogPosts

InfiniteScrollBlogPosts 컴포넌트는 외부 API에서 블로그 포스트 데이터를 가져와 무한 스크롤을 통해 표시하는 예제입니다. 이 컴포넌트는 InfiniteScrollBasic을 사용하여 데이터를 스크롤하면서 표시합니다.

데이터는 koreanjson.com 에서 제공되는 샘플 블로그 포스트 데이터를 사용하며, 제목과 본문을 무한 스크롤로 표시합니다. 각 포스트의 문장은 구분자로 나뉘어 각각의 항목으로 표시됩니다.

3.1. Import

import InfiniteScrollBlogPosts from '@components/InfiniteScroll/InfiniteScrollBlogPosts';

3.2. Usage

기본 사용 예제는 아래와 같습니다:

import InfiniteScrollBlogPosts from '@components/InfiniteScroll/InfiniteScrollBlogPosts';

function Example() {
  return <InfiniteScrollBlogPosts />;
}

export default Example;

3.3. Props

InfiniteScrollBlogPosts 컴포넌트는 별도의 props를 사용하지 않으며, 내부에서 데이터를 가져와 표시하는 기능을 수행합니다.

3.4. Full Example

import { useState, useEffect } from "react";
import InfiniteScrollBasic from "./InfiniteScrollBasic";

interface BlogPost {
  id: number;
  title: string;
  content: string;
  createdAt: string;
  updatedAt: string;
  UserId: number;
}

const InfiniteScrollBlogPosts = () => {
  const [content, setContent] = useState<string[]>([]);

  useEffect(() => {
    const fetchBlogPosts = async () => {
      try {
        const response = await fetch("https://koreanjson.com/posts/1");
        const data: BlogPost = await response.json();

        const titleParts = data.title.split(".");
        const contentParts = data.content.split(".");

        const displayText = [...titleParts, ...contentParts];
        setContent(displayText);
      } catch (error) {
        console.error("Failed to load data", error);
      }
    };

    fetchBlogPosts();
  }, []);

  return (
    <div>
      <InfiniteScrollBasic content={content} />
    </div>
  );
};

export default InfiniteScrollBlogPosts;