MDX 컴포넌트 예시

제목 스타일 (h2)

h2는 주요 섹션을 나누는 데 사용합니다. 하단에 골드색 보더가 있습니다.

h3는 섹션 내의 하위 주제를 나타냅니다. 골드색 텍스트로 눈에 띕니다.

h4는 더 세부적인 내용을 구분할 때 사용합니다. 앞에 # 기호가 붙습니다.

h5는 작은 섹션이나 노트에 사용합니다. 앞에 ## 기호가 붙습니다.

h6는 가장 작은 제목으로, 부가 정보나 각주에 사용합니다. 앞에 ### 기호가 붙습니다.

Callout 컴포넌트는 짧은 토막글 형태로 정보, 경고, 에러 등을 표시할 때 사용합니다.

🤔왜 하필 리액트인가요?

리액트는 컴포넌트 기반 아키텍처로 재사용성이 높고, 가상 DOM을 통해 효율적인 렌더링을 제공합니다. 또한 거대한 커뮤니티와 풍부한 생태계를 갖추고 있어 다양한 문제에 대한 해결책을 쉽게 찾을 수 있습니다.

⚠️실험적 기능 주의

이 API는 실험적 기능입니다. 프로덕션 환경에서는 사용에 주의하세요.

🚨되돌릴 수 없는 작업

이 작업은 되돌릴 수 없습니다. 삭제 전 반드시 백업을 확인하세요.

💡성능 최적화 팁

useMemo와 useCallback을 적절히 사용하면 불필요한 리렌더링을 방지할 수 있습니다. 하지만 과도한 최적화는 오히려 코드 복잡도를 높일 수 있으니 주의하세요.

📝참고 사항

이 문서는 React 18 기준으로 작성되었습니다. 이전 버전에서는 일부 API가 다를 수 있습니다.

Details 컴포넌트는 긴 내용을 접어서 보여줄 수 있습니다. 상단과 하단 모두에 접기/펼치기 버튼이 있어 스크롤 없이 편하게 접을 수 있습니다.

defaultOpen prop을 true로 설정하면 기본적으로 펼쳐진 상태로 시작합니다.

중요한 내용을 처음부터 보여주고 싶을 때 유용합니다.

인라인 코드는 이렇게 표시됩니다.

JavaScript

Python(Pyodide)

좋은 코드는 그 자체로 문서가 됩니다. 하지만 훌륭한 코드는 왜 그렇게 작성되었는지를 설명합니다.

이미지는 자동으로 둥근 모서리와 그림자가 적용됩니다.

캡션이 있는 이미지: