React 애플리케이션에 미리보기와 함께 링크를 포함하는 방법-JS 튜토리얼-php.cn

React 애플리케이션에 미리보기와 함께 링크를 포함하는 방법

Mary-Kate Olsen

풀어 주다： 2024-10-13 20:25:03

원래의

1028명이 탐색했습니다.

소개

웹 애플리케이션을 구축할 때 URL을 공유할 때 소셜 미디어 플랫폼에서 링크 미리 보기를 표시하는 방식과 같이 링크 콘텐츠의 미리 보기를 표시하는 것이 유용한 경우가 많습니다. 따라서 URL 텍스트 대신 URL 옆에 사진 및 설명과 같은 정보도 표시할 수 있습니다.

이 게시물에서는 대상 페이지의 HTML을 스크랩하기 위해 axios 및 Cherio를 사용하여 오픈 그래프 메타데이터(예: 제목, 이미지, 설명)를 가져오는 동안 React 앱에 링크를 삽입하는 방법을 안내하겠습니다.

제공된 URL에 대한 Open Graph 메타데이터를 가져와 표시하는 간단한 EmbeddedLink 구성 요소를 만들어 보겠습니다.

전제 조건

시작하기 전에 다음이 설치되어 있는지 확인하세요.

React – Create React App 또는 원하는 방법을 사용하여 React 프로젝트를 설정합니다.
Axios – HTTP 요청을 생성하는 데 사용됩니다.
Cheerio – HTML 구문 분석 및 스크래핑용(일반적으로 스크래핑에 사용되는 서버측 jQuery와 유사한 라이브러리).

다음 명령을 사용하여 Axios와 Cheerio를 설치할 수 있습니다.

npm install axios cheerio

로그인 후 복사

1단계: EmbeddedLink 구성 요소 생성

URL을 prop으로 받아들이고 나중에 사용할 해당 링크에서 오픈 그래프 메타데이터를 가져오는 새로운 EmbeddedLink 구성 요소를 생성하겠습니다. 전체 코드는 다음과 같습니다.

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

const EmbeddedLink = ({ url }) => {
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const [imageUrl, setImageUrl] = useState('');
    const [title, setTitle] = useState('');
    const [description, setDescription] = useState('');

    useEffect(() => {
        const fetchOGData = async () => {
            try {
                const response = await axios.get(url, {
                    headers: {
                        'origin': 'https://mysite.com'
                    }
                });
                const html = response.data;

                // Parse HTML content using Cheerio
                const $ = cheerio.load(html);
                const ogImage = $('meta[property="og:image"]').attr('content');
                const ogTitle = $('meta[property="og:title"]').attr('content');
                const ogDesc = $('meta[property="og:description"]').attr('content');

                setImageUrl(ogImage || '');
                setTitle(ogTitle || '');
                setDescription(ogDesc || '');
                setLoading(false);
            } catch (error) {
                setError(error);
                setLoading(false);
            }
        };

        fetchOGData();
    }, [url]);

    if (loading) return <div>Loading...</div>;
    if (error) return <div>Error: {error.message}</div>;

    return (
        <div className="embedded-link border-2 p-5 my-3 border-neutral-800">
            {imageUrl && <img src={imageUrl} alt={title} className="cover-image max-w-50 w-auto h-auto" />}
            <a href={url} target="_blank" rel="noopener noreferrer" className="text-indigo-500 underline font-bold text-2xl">
                {title && <h3>{title}</h3>}
            </a>
            {!imageUrl && !title && <p>No preview available</p>}
            <p className="my-3">{description}</p>
            <p className="text-slate-500">{url}</p>
        </div>
    );
};

export default EmbeddedLink;

로그인 후 복사

2단계: EmbeddedLink 구성 요소 사용

이제 React 앱에서 다음과 같이 EmbeddedLink 구성 요소를 사용할 수 있습니다.

import React from 'react';
import EmbeddedLink from './EmbeddedLink';

function App() {
    return (
        <div className="App">
            <h1>Link Preview Example</h1>
            <EmbeddedLink url="https://example.com" />
        </div>
    );
}

export default App;

로그인 후 복사

이미지, 제목, 설명과 함께 제공된 URL의 미리보기가 렌더링됩니다.