메인 콘텐츠로 건너뛰기

재사용 가능한 스니펫

One of the core principles of software development is DRY (Don't Repeat Yourself). This is a principle that applies to documentation as well. If you find yourself repeating the same content in multiple places, you should consider creating a custom snippet to keep your content in sync.

사용자 지정 스니펫 만들기​

전제 조건: 스니펫 파일은 snippets 디렉토리에 만들어야 합니다.

정보

snippets 디렉토리의 모든 페이지는 스니펫으로 처리되며 단독 페이지로 렌더링되지 않습니다. 스니펫에서 단독 페이지를 만들려면 스니펫을 다른 파일에 가져와서 컴포넌트로 호출하세요.

기본 내보내기​

  1. 여러 위치에서 다시 사용하려는 내용을 스니펫 파일에 추가합니다. 선택적으로 가져올 때 props를 통해 채울 수 있는 변수를 추가할 수 있습니다.
안녕하세요! 이것은 여러 페이지에서 다시 사용하려는 내용입니다. 오늘의 키워드는
{word}입니다.
경고

다시 사용하려는 내용은 가져오기가 작동하도록 snippets 디렉토리 안에 있어야 합니다.

  1. 대상 파일에 스니펫을 가져옵니다.
title: 제목
description: 설명

import MySnippet from '/snippets/path/to/my-snippet.mdx';

## 헤더

로렘 입숨 dolor sit amet.

<MySnippet word="bananas" />

재사용 가능한 변수​

  1. 스니펫 파일에서 변수를 내보냅니다:
export const myName = '내 이름';

export const myObject = { fruit: 'strawberries' };
  1. 대상 파일에서 스니펫을 가져와 변수를 사용합니다:
title: 제목
description: 설명

import { myName, myObject } from '/snippets/path/to/custom-variables.mdx';

안녕하세요, 제 이름은 {myName}이고 {myObject.fruit}을 좋아합니다.

재사용 가능한 컴포넌트​

  1. 스니펫 파일 안에서 화살표 함수 형태로 컴포넌트를 내보내어 props를 받는 컴포넌트를 만듭니다.
export const MyComponent = ({ title }) => (
  <div>
    <h1>{title}</h1>
    <p>... 스니펫 내용 ...</p>
  </div>
);
경고

MDX는 화살표 함수 본문 안에서 컴파일되지 않습니다. 가능하면 HTML 구문을 사용하거나 MDX를 사용해야 하는 경우 기본 내보내기를 사용하세요.

  1. 대상 파일에 스니펫을 가져와 props를 전달합니다
title: 제목
description: 설명

import { MyComponent } from '/snippets/custom-component.mdx';

로렘 ipsum dolor sit amet.

<MyComponent title={'사용자 지정 제목'} />