Building & Learning/MERN PERN
PERN - 마크다운 설정 03 markdown / react npm markdown
devlunch4
2025. 8. 28. 14:31
반응형
PERN - 마크다운 설정 03 markdown / react npm markdown
웹서비스 제공중 태그 및 내용 작성을 했으나 마크다운 형식의 글을 표현해야하는 경우가 있습니다.
즉 react 앱에서 마크다운을 직접 보여할 경우, 이 기능을 구현해야하죠.
--
사용자가 작성한 텍스트를 마크다운으로 랜더링 하거나, 문서형 콘텐츠를 보여줘야할때, 이럴때 간단히 패키지를 이용해서 쉽게 구현이 가능합니다,
---
react-markdown 패키지를 사용하면 되는데요.
https://www.npmjs.com/package/react-markdown
react-markdown
React component to render markdown. Latest version: 10.1.0, last published: 6 months ago. Start using react-markdown in your project by running `npm i react-markdown`. There are 3885 other projects in the npm registry using react-markdown.
www.npmjs.com
소스에 적용 방법을 기록으로 남겨봅니다.
가장 먼저 패키지를 설치합니다.
명령어
$ npm install react-markdown
설치 완료!
소스에 임포트하기!
소스에 적용하기 후 변경 확인!
기존,
변경 = 마크다운 형식 적용
--
추가 옵션 제공 필요!
스타일 추가!
깔끔하게 적용 된 것을 확인!
끝!
반응형