React를 이용해 RSS Feed 불러오는 방법

RSS란?

RSS는 사이트의 콘텐츠를 XML 형식으로 제공하는 웹 피드 포맷인데 이 포맷을 이용하면 사용자는 사이트를 직접 방문하지 않고도 콘텐츠 업데이트를 받아볼 수 있다.

RSS Feed Component 작성

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

const RSSFeedComponent = () => {
const [items, setItems] = useState([]);

React에서 RSS 피드를 불러오기 위해 컴포넌트를 만든다.
먼저, useState, useEffect 훅을 이용해 상태 관리를 한다.
useState를 이용해 items라는 상태를 생성하고 초기값을 빈 배열로 설정한다. 이 items는 RSS 피드의 아이템들을 저장할 배열이다.

const rssUrl = 'http://feeds.bbci.co.uk/news/world/rss.xml'; // BBC News World RSS 피드 URL
const apiUrl = `https://api.rss2json.com/v1/api.json?rss_url=${encodeURIComponent(rssUrl)}`;

다음으로, RSS 피드를 불러올 URL과 이를 변환할 API URL을 설정한 후
useEffect 훅을 이용해 컴포넌트가 마운트될 때 RSS 피드를 불러오는 코드를 작성한다.

	useEffect(() => {
		fetch(apiUrl)
			.then(response => response.json())
			.then(data => {
				console.log('RSS Feed:', data.items);
				setItems(data.items);
			})
			.catch(error => console.error('Error fetching RSS:', error));
	}, []);

컴포넌트가 마운트되면 fetch 함수를 이용해 RSS 피드를 불러오고, 불러온 피드를 items 상태에 저장한다.

	return (
		<div>
			<h1>RSS Feed</h1>
			<ul>
				{items.map((item, index) => (
					<li key={index}>
						{console.log('Thumbnail:', item.thumbnail)} {/* 콘솔 로그로 Thumbnail 출력 */}
						{/* 이미지가 있으면 이미지를 표시 */}
						{
							item.enclosure && item.enclosure.link && (
								<>
									{console.log('Enclosure:', item.enclosure, 'Link:', item.enclosure.link)}
									<img src={item.enclosure.link} alt={item.title} style={{ maxWidth: '100px', maxHeight: '100px' }} />
								</>
							)
						}
						<a href={item.link} target="_blank" rel="noopener noreferrer">
							{item.title}
						</a>
					</li>
				))}
			</ul>
		</div>
	);
};

export default RSSFeedComponent;

마지막으로, 불러온 RSS 피드 아이템들을 화면에 출력한다.