[React] react markdown, 마크다운 적용하기, 마크다운 사용법

안녕하세요 두잉이입니다.

 

react-markdown 사용법에 대해 포스팅 해보도록 하겠습니다.

 

react-markdown 설치

npm install react-markdown

 

폴더 구조

src/lib/Markdown 밑에 Markdown.js, index.js를 만들어 줍니다.

적용방법

import ReactMarkdown from 'react-markdown';

설치한 ReactMarkdown을 import 후 markdown component로 보여줄 텍스트 데이터를 감싸기만 하면 끝!

const youtText = '#h1 ##h2';

<ReactMarkdown children={yourText} />

하지만 이렇게만 하면 쓸 수있는 마크다운 문법이 제한적이기 때문에 link, table, checklist 등의 형식을 표현할 수 있게

remark-gfm 플러그인을 같이 설치해 주도록 한다.

 

remark-gfm 설치 및 사용법

npm install remark-gfm

플러그인 설치 후 ReactMarkdown태그 안에 Plugin 형태로 넣어주면 끝이다.

import React, { useCallback } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';


<ReactMarkdown children={yourText} remarkPlugins={[remarkGfm]} />

 

전체 코드

src/lib/Markdown/Markdown.js

/* eslint-disable react/no-children-prop */
import React, { useCallback } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

const Markdown = React.memo(({ linkStopPropagation, ...props }) => {
	const handleLinkClick = useCallback(event => {
		event.stopPropagation();
	}, []);
	const linkRenderer = useCallback(
		/* eslint-disable jsx-a11y/anchor-has-content,
						  jsx-a11y/click-events-have-key-events,
						  jsx-a11y/no-static-element-interactions,
						  react/jsx-props-no-spreading */
		({ node, ...linkProps }) => <a {...linkProps} onClick={handleLinkClick} />,
		/* eslint-enable jsx-a11y/anchor-has-content,
						 jsx-a11y/click-events-have-key-events,
						 jsx-a11y/no-static-element-interactions,
						 react/jsx-props-no-spreading */
		[handleLinkClick],
	);

	let renderers;

	if (linkStopPropagation) {
		renderers = {
			link: linkRenderer,
		};
	}

	return <ReactMarkdown {...props} remarkPlugins={[remarkGfm]} components={renderers} />;
});

export default Markdown;

src/lib/Markdown/index.js

import Markdown from './Markdown';

export default Markdown;

텍스트가 보여질 컴포넌트에서 사용법

example.js

import Markdown from 'src/lib/Markdown';

<Markdown linkTarget="_blank">{data.text}</Markdown>

db에서 받아서 보여줄 txt 데이터등을 import 해온 마트다운 컴포넌트안에 props로 넣어주면 된다.

 

 

마크문법은 아래 링크를 참조하자

https://gist.github.com/ihoneymon/652be052a0727ad59601

마크다운(Markdown) 사용법

 

react-markdown github

https://github.com/remarkjs/react-markdown

GitHub - remarkjs/react-markdown: Markdown component for React

remark-gfm github

https://github.com/remarkjs/remark-gfm

GitHub - remarkjs/remark-gfm: remark plugin to support GFM (autolink literals, footnotes, strikethrough, tables, tasklists)