리액트 사용하기
도큐사우루스는 MDX를 기본 지원합니다. MDX를 기반으로 마크다운 파일 내에 JSX를 작성해서 리액트 컴포넌트를 표현할 수 있습니다.
note
.md
또는 .mdx
확장자를 가진 파일은 모두 MDX에 의해 구문이 해석됩니다. 일부 문법은 약간 다르게 처리될 수 있습니다. 좀 더 정확한 구문 해석과 에디터 지원을 위해 MDX 문법을 포함한 .mdx
파일 확장자를 사용하는 것을 권장합니다.
아래 코드를 실행해보세요.
export const Highlight = ({children, color}) => ( <span style={{ backgroundColor: color, borderRadius: '2px', color: '#fff', padding: '0.2rem', }}> {children} </span>);
<Highlight color="#25c2a0">도큐사우루스 초록</Highlight>과 <Highlight color="#1877F2">페이스북 파랑</Highlight>은 내가 좋아하는 색입니다.
**마크다운**을 _JSX_와 같이 사용할 수 있습니다!
리액트 컴포넌트와 마크다운 문법이 어떻게 마크업 코드로 변환되는지 확인할 수 있습니다.
http://localhost:3000
도큐사우르스 초록 과 페이스북 파랑은 내가 좋아하는 색입니다.
마크다운을 JSX와 같이 사용할 수 있습니다!
다른 파일에 설정한 사용자 지정 컴포넌트나 npm으로 설치한 서드파티 컴포넌트를 가져올 수도 있습니다. MDX 문서에서 MDX로 할 수 있는 더 많은 흥미로운 기능을 찾아볼 수 있습니다.
caution
모든 문서 파일은 MDX에서 구문을 해석하지만 일부 HTML은 JSX에서 처리합니다. 그래서 컴포넌트를 인라인 스타일로 설정해야 하는 경우 JSX 형식을 따르며 style 오브젝트를 지정해주어야 합니다. 이 부분은 도큐사우루스 1과 달라진 점입니다. 자세한 내용은 v1에서 v2로 이전하기를 참고하세요.