{
  "url": "https://unifast.dev/ko/docs/guides/react/",
  "locale": "ko",
  "title": "React 연동",
  "description": "@unifast/react로 unifast 출력을 React 애플리케이션에서 렌더링합니다. 단순한 HTML 렌더링부터 MDX 컴포넌트 매핑까지 지원합니다.",
  "section": "guides",
  "body": "`@unifast/react`는 unifast의 출력을 React 애플리케이션에서 렌더링하기 위한 유틸리티를 제공합니다. 단순한 HTML 렌더링부터 MDX 컴포넌트 매핑까지 다룰 수 있습니다.\n\n### 설치\n\n### hastToReact 사용하기\n\nHAst(HTML AST)를 React 엘리먼트로 변환합니다. 이렇게 하면 원본 HTML을 주입하지 않고도 HTML 요소를 커스텀 React 컴포넌트로 매핑할 수 있습니다.\n\n```tsx\n\nconst result = compile(source, { outputKind: \"hast\" });\nconst elements = hastToReact(result.output, {\n  components: {\n    h1: (props) => <h1 className=\"heading\" {...props} />,\n    a: (props) => <a className=\"link\" target=\"_blank\" {...props} />,\n    pre: CodeBlock,\n  },\n});\n\nfunction Page() {\n  return <article>{elements}</article>;\n}\n```\n\n이 방식은 기본적으로 안전합니다. AST가 원본 HTML 없이 React 엘리먼트로 변환되기 때문입니다.\n\n### MDX 렌더링\n\nMDX 콘텐츠의 경우 `compileToReact`를 사용해 React 컴포넌트를 곧바로 얻을 수 있습니다.\n\n```tsx\n\nconst result = compile(source, { inputKind: \"mdx\" });\nconst Content = compileToReact(result);\n\nfunction Page() {\n  return (\n    \n  );\n}\n```\n\n### 컴포넌트 매핑\n\n`hastToReact`와 `compileToReact`는 모두 `components` 맵을 인자로 받습니다. 이를 통해 기본 HTML 요소를 커스텀 React 컴포넌트로 교체할 수 있습니다.\n\n```tsx\nconst components = {\n  // 제목 교체\n  h1: ({ children }) => <h1 className=\"text-3xl font-bold\">{children}</h1>,\n\n  // 커스텀 코드 블록\n  pre: ({ children, ...props }) => ,\n\n  // 외부 링크는 새 탭에서 열기\n  a: ({ href, children }) => (\n    <a href={href} target={href?.startsWith(\"http\") ? \"_blank\" : undefined}>\n      {children}\n    </a>\n  ),\n};\n```\n\n### 서버 사이드 렌더링\n\nunifast 컴파일은 동기적으로 동작하며 Node.js에서 실행되므로 SSR에 적합합니다.\n\n```tsx\n// server.tsx\n\nexport async function getStaticProps() {\n  const source = await readFile(\"content/post.md\", \"utf8\");\n  const result = compile(source, {\n    plugins: [frontmatter()],\n    outputKind: \"hast\",\n  });\n\n  return {\n    props: {\n      hast: result.output,\n      meta: result.frontmatter,\n    },\n  };\n}\n\nfunction Post({ hast, meta }) {\n  const content = hastToReact(hast);\n  return (\n    <article>\n      <h1>{meta.title}</h1>\n      {content}\n    </article>\n  );\n}\n```\n\n### 함께 보기\n\n- [compileToReact()](/docs/packages/react/compile-to-react) - API 레퍼런스\n- [hastToReact()](/docs/packages/react/hast-to-react) - API 레퍼런스\n- [MDX 사용하기](/docs/guides/mdx) - MDX 컴파일 가이드",
  "alternates": [
    {
      "locale": "en",
      "url": "https://unifast.dev/docs/guides/react/",
      "api": "https://unifast.dev//api/docs/guides/react.json"
    },
    {
      "locale": "ja",
      "url": "https://unifast.dev/ja/docs/guides/react/",
      "api": "https://unifast.dev//api/ja/docs/guides/react.json"
    },
    {
      "locale": "zh-CN",
      "url": "https://unifast.dev/zh-CN/docs/guides/react/",
      "api": "https://unifast.dev//api/zh-CN/docs/guides/react.json"
    },
    {
      "locale": "zh-TW",
      "url": "https://unifast.dev/zh-TW/docs/guides/react/",
      "api": "https://unifast.dev//api/zh-TW/docs/guides/react.json"
    },
    {
      "locale": "ko",
      "url": "https://unifast.dev/ko/docs/guides/react/",
      "api": "https://unifast.dev//api/ko/docs/guides/react.json"
    },
    {
      "locale": "fr",
      "url": "https://unifast.dev/fr/docs/guides/react/",
      "api": "https://unifast.dev//api/fr/docs/guides/react.json"
    },
    {
      "locale": "it",
      "url": "https://unifast.dev/it/docs/guides/react/",
      "api": "https://unifast.dev//api/it/docs/guides/react.json"
    },
    {
      "locale": "es",
      "url": "https://unifast.dev/es/docs/guides/react/",
      "api": "https://unifast.dev//api/es/docs/guides/react.json"
    },
    {
      "locale": "pt-BR",
      "url": "https://unifast.dev/pt-BR/docs/guides/react/",
      "api": "https://unifast.dev//api/pt-BR/docs/guides/react.json"
    },
    {
      "locale": "de",
      "url": "https://unifast.dev/de/docs/guides/react/",
      "api": "https://unifast.dev//api/de/docs/guides/react.json"
    },
    {
      "locale": "ru",
      "url": "https://unifast.dev/ru/docs/guides/react/",
      "api": "https://unifast.dev//api/ru/docs/guides/react.json"
    },
    {
      "locale": "hi",
      "url": "https://unifast.dev/hi/docs/guides/react/",
      "api": "https://unifast.dev//api/hi/docs/guides/react.json"
    },
    {
      "locale": "id",
      "url": "https://unifast.dev/id/docs/guides/react/",
      "api": "https://unifast.dev//api/id/docs/guides/react.json"
    },
    {
      "locale": "tr",
      "url": "https://unifast.dev/tr/docs/guides/react/",
      "api": "https://unifast.dev//api/tr/docs/guides/react.json"
    },
    {
      "locale": "vi",
      "url": "https://unifast.dev/vi/docs/guides/react/",
      "api": "https://unifast.dev//api/vi/docs/guides/react.json"
    }
  ]
}