Recycler view

RecyclerView의 작동 원리

import React from 'react';
import {FixedSizeList as List} from 'react-window';

interface Base {
    id?: string | number;
}

interface Props<T> {
    itemCount: number;
    itemSize: number;
    items: (T & Base)[];
    renderItem: (item: T, index: number) => React.ReactNode;
    keyExtractor?: (item: T) => string;
    initialNumToRender?: number;
}

function RecyclerView<T>({
                             itemCount,
                             items,
                             renderItem,
                             keyExtractor,
                             initialNumToRender,
                             itemSize,
                         }: Props<T>) {
    return (
        <List
            height={itemSize * ((initialNumToRender || itemCount) - 1)}
            overscanCount={0}
            itemCount={itemCount}
            itemSize={itemSize}
            width='100%'
        >
            {({index, style}) => {
                const item = items[index];
                return (
                    <div style={style} key={keyExtractor ? keyExtractor(item) : item.id}>
                        {renderItem(item, index)}
                    </div>
                );
            }}
        </List>
    );
}

export default RecyclerView;

import React, {useEffect, useState} from 'react';
import RecyclerView from "./RecyclerView";

interface Source {
    id?: string;
    name: string;
}

interface Feed {
    author?: string;
    content: string;
    description: string;
    publishedAt: string;
    source: Source;
    title: string;
    url: string;
    urlToImage?: string;
}

type Feeds = Feed[];

const NewsFeed: React.FC = () => {
    const [feeds, setFeeds] = useState<Feeds>([]);

    useEffect(() => {
        // Example of fetching data from an API endpoint
        fetch('https://newsapi.org/v2/top-headlines?country=us', {
            headers: {
                "X-Api-Key": "9f6482a584804376874b848980b7a044"
            }
        })
            .then(response => response.json())
            .then(data => {
                setFeeds(data.articles);
            });
    }, []);
    return (
        <div className="news-feed-container">
            {feeds.length === 0 ? (
                <p>Loading...</p>
            ) : (
                <RecyclerView
                    initialNumToRender={3}
                    keyExtractor={(item) => item.title}
                    itemCount={feeds.length}
                    items={feeds}
                    itemSize={300}
                    renderItem={(feed,) =>
                        (
                            <div key={feed.url} className="news-feed-item">
                                <h2>{feed.title}</h2>
                                <p><strong>Author:</strong> {feed.author || 'Unknown'}</p>
                                <p><strong>Source:</strong> {feed.source.name}</p>
                                <p>{feed.description}</p>
                                <p>{feed.content}</p>
                                <a href={feed.url} target="_blank" rel="noopener noreferrer">Read more</a>
                                <img src={feed.urlToImage} alt={feed.title}/>
                                <p><strong>Published At:</strong> {new Date(feed.publishedAt).toLocaleString()}</p>
                            </div>
                        )
                    }/>
            )}
        </div>
    );
}

export default NewsFeed;