마크다운에 컴포넌트 추가하기
프론트엔드
마크다운에 컴포넌트 추가하기
두줄요약
마크다운을 mdast, hast, HTML로 변환하는 흐름을 살펴보고, 커스텀 태그를 리액트 컴포넌트로 치환하는 방법을 소개했습니다. MDX와 Gatsby 연동 예시도 함께 정리했습니다.
핵심 내용
- 마크다운에 컴포넌트를 삽입해 더 풍부한 표현을 만드는 방법 소개
- unified 기반의 변환 흐름과 rehype-react를 이용한 커스텀 태그-리액트 컴포넌트 치환 방식 설명
- MDX를 활용하면 JSX를 직접 사용해 컴포넌트 삽입을 더 쉽게 처리 가능
- Gatsby 환경에서의 적용 예시와 함께 변환 단계별 구조 확인