맞춤형 스니펫 만들기
사전 조건: snippets 디렉토리에 스니펫 파일을 생성해야 합니다.
snippets 디렉토리의 모든 페이지는 스니펫으로 처리되며 독립적인 페이지로 렌더링되지 않습니다. 스니펫으로 독립적인 페이지를 만들고 싶다면, 스니펫을 다른 파일로 가져와서 컴포넌트로 호출하세요.
기본 내보내기 (Default export)
- 여러 위치에서 재사용하려는 콘텐츠를 스니펫 파일에 추가합니다. 선택 사항으로, 스니펫을 가져올 때 prop을 통해 채울 수 있는 변수를 추가할 수 있습니다.
안녕하세요! 이 내용은 여러 페이지에서 재사용하려는 콘텐츠입니다. 오늘의 키워드는 {word}입니다.
가져오기(Import)가 작동하려면 재사용하려는 콘텐츠가 snippets 디렉토리 내에 있어야 합니다.
- 대상 파일로 스니펫을 가져옵니다.
---
title: 나의 제목
description: 나의 설명
---
import MySnippet from '/snippets/path/to/my-snippet.mdx';
## 헤더
Lorem impsum dolor sit amet.
<MySnippet word="바나나" />
재사용 가능한 변수
- 스니펫 파일에서 변수를 내보냅니다:
snippets/path/to/custom-variables.mdx
export const myName = '나의 이름';
export const myObject = { fruit: '딸기' };
- 대상 파일에서 스니펫을 가져와 변수를 사용합니다:
---
title: 나의 제목
description: 나의 설명
---
import { myName, myObject } from '/snippets/path/to/custom-variables.mdx';
안녕하세요, 제 이름은 {myName}이고 저는 {myObject.fruit}를 좋아합니다.
재사용 가능한 컴포넌트
- 스니펫 파일 내에서, 화살표 함수 형태로 컴포넌트를 내보내어 prop을 받는 컴포넌트를 만듭니다.
snippets/custom-component.mdx
export const MyComponent = ({ title }) => (
<div>
<h1>{title}</h1>
<p>... 스니펫 콘텐츠 ...</p>
</div>
);
MDX는 화살표 함수의 바디 안에서 컴파일되지 않습니다. 가능한 한 HTML 구문을 사용하거나, MDX를 사용해야 하는 경우 기본 내보내기(Default export)를 사용하세요.
- 대상 파일로 스니펫을 가져오고 prop을 전달합니다.
---
title: 나의 제목
description: 나의 설명
---
import { MyComponent } from '/snippets/custom-component.mdx';
Lorem ipsum dolor sit amet.
<MyComponent title={'맞춤형 제목'} />
