React에서 Markdown 파일을 동적으로 로드하는 방법(markdown-to-jsx)

React에서 Markdown 파일을 동적으로 로드하는 방법(markdown-to-jsx)

내 React 구성 요소 중 하나에 사본을 표시하는 방법에 대해 소란을 피우고 있었습니다.

HTML div, 단락, 이미지, 표 등을 다루는 대신

이미 가지고 있는 .md(마크다운) 파일을 가져오는 방법을 찾았습니다.

이 프로세스에는 다음이 포함됩니다.

markdown-to-jsx

React 상태 관리 및 수명 주기에 대한 가벼운 지식; 여기서 후크를 사용합니다

.

JavaScript Fetch API에 대한 간단한 지식(매우 간단한 지식, 걱정하지 마십시오)

가장 먼저 필요한 것은 마크다운 파일을 구성하는 것입니다.

나는 .md 파일을 src 디렉토리의 markdown 폴더에 저장하도록 선택했습니다.

다음은 모든 것을 통합하는 코드입니다.

설명할 코드는 다음과 같습니다.

// App.js

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

import Markdown from 'markdown-to-jsx';

import './styles/main_styles.css';

function App() {
    const file_name = 'react_pinterest_clone.md';
    const [post, setPost] = useState('');

    useEffect(() => {
        import(`./markdown/${file_name}`)
            .then(res => {
                fetch(res.default)
                    .then(res => res.text())
                    .then(res => setPost(res))
                    .catch(err => console.log(err));
            })
            .catch(err => console.log(err));
    });

    return (
        <div className="container">
            <Markdown>
                {post}
            </Markdown>
        </div>
    );
}

export default App;

여기에는 3가지 중요한 일이 있습니다.

markdown-to-jsx 패키지를 가져옵니다.

상태를 설정합니다.

마크다운을 가져와서 표시합니다.

먼저 markdown-to-jsx 패키지를 가져와야 합니다.

반환 블록에서 사용합니다.

둘째, .md 데이터를 보관하는 데 사용할 상태를 설정합니다. 처음에는 post 변수를 빈 문자열로 설정하고 Markdown 태그 사이에 배치합니다.

우리는 또한 우리가 원하는 마크다운 파일을 동적으로 선택하는 방법으로 작동하는 file_name이 있습니다. 이 경우
나는 그것을 하드 코딩했지만 어떤 논리에 따라 원하는대로 설정할 수 있습니다.

세 번째로 구성 요소가 로드되면 useEffect() 함수로 가져오기를 사용합니다.

이 방식으로 사용되는 가져오기는 약속으로 작동하고 마크다운 파일의 절대 경로를 반환합니다.

그런 다음 Fetch API를 사용하여 원하는 마크다운 파일을 가져옵니다.

파일을 가져오면 응답을 텍스트 파일로 구문 분석한 다음 구문 분석된 응답을 게시 상태 변수에 저장해야 합니다.

그렇게 간단합니다.

소스 파일here을 가져올 수 있습니다.

보다 심층적인 가이드를 원하시면 YouTube에서 전체 비디오 자습서를 확인하십시오.

우리를 팔로우하고 최신 웹 개발 자습서를 따라잡으십시오.

블로그를 위해 Markdown 파일을 React에 동적으로 로드 | Markdown-to-jsx