Markdown에서 React 컴포넌트로
온라인에서 Markdown을 React 컴포넌트로 변환. dangerouslySetInnerHTML과 DOMPurify가 포함된 즉시 사용 가능한 TSX 컴포넌트 생성. 즉시 복사 또는 다운로드.
.md 파일을 여기에 드롭하거나 클릭하여 선택
여러 파일 지원
marked와 DOMPurify를 사용하여 Markdown을 HTML로 렌더링하는 React 함수형 컴포넌트를 생성합니다. 'use client' 지시어, 타입 임포트, 사용 주석 포함 — 모든 React 또는 Next.js 프로젝트에 바로 붙여넣기 가능.
무료 Markdown 변환기 — HTML, PDF, Word, Slack, React
브라우저 기반 Markdown 변환기로 .md 파일을 HTML, Word 문서, Slack 메시지, React 컴포넌트 또는 인쇄 가능한 PDF로 변환 — 서버 업로드 없음.
Markdown → HTML
깔끔한 시맨틱 HTML5로 변환. 적절한 보안 처리가 된 전체 문서 또는 원시 프래그먼트 제공.
Markdown → PDF
브라우저 기본 인쇄 엔진을 사용한 인쇄 품질 A4 PDF 내보내기.
Markdown → Word
Microsoft Word, Google Docs, LibreOffice에서 열리는 .doc 파일 다운로드.
Markdown → Slack
Slack mrkdwn 형식으로 변환: *굵게*, _기울임_, ~취소선~, <url|텍스트>.
Markdown → React
dangerouslySetInnerHTML과 DOMPurify가 포함된 즉시 사용 가능한 React 컴포넌트 생성.
일괄 변환
여러 .md 파일을 업로드하고 모든 변환된 파일을 단일 ZIP으로 다운로드.
Markdown 변환 방법
- 1
입력 영역에 Markdown을 붙여넣거나, 일괄 모드로 전환하여 여러 .md 파일을 업로드하세요.
- 2
출력 형식을 선택하세요: HTML, PDF, Word, Slack 또는 React.
- 3
'변환 및 다운로드'를 클릭하면 파일이 즉시 기기에 다운로드됩니다.
자주 묻는 질문
컴포넌트는 어떤 라이브러리를 사용하나요?
Markdown 파싱에 marked, XSS 보안 처리에 DOMPurify를 사용합니다. 설치: npm install marked dompurify @types/dompurify
dangerouslySetInnerHTML은 안전한가요?
네. HTML이 렌더링 전에 DOMPurify로 보안 처리되어 XSS 벡터가 제거됩니다. 이는 React에서 동적 HTML을 위한 표준 안전 패턴입니다.
Next.js와 호환되나요?
네. DOMPurify는 브라우저 환경이 필요하므로 컴포넌트에 'use client' 지시어가 포함됩니다. React 18+ 또는 Next.js 13+ 이상의 모든 프로젝트에서 작동합니다.