{
  "url": "https://unifast.dev/ko/docs/packages/react/hast-to-react/",
  "locale": "ko",
  "title": "hastToReact()",
  "description": "HAST 루트 노드를 React 엘리먼트로 변환합니다. 컴파일 파이프라인 전반을 직접 제어해야 할 때 쓰는 저수준 함수입니다.",
  "section": "packages",
  "body": "```ts\n\n```\n\n## 시그니처\n\n```ts\nfunction hastToReact(\n  hast: HastRoot,\n  options: HastToReactOptions,\n): unknown\n```\n\n## 매개변수\n\n### hast\n\n| 속성 | 타입 | 기본값 | 설명 |\n|----------|------|---------|-------------|\n| `type` | `\"root\"` | — | 노드 타입 식별자 |\n| `children` | `HastNode[]` | — | 트리의 자식 노드 |\n\n### options\n\nReact 엘리먼트 생성 설정.\n\n| 속성 | 타입 | 기본값 | 설명 |\n|----------|------|---------|-------------|\n| `createElement` | `CreateElement` | — | React의 createElement 함수 |\n| `Fragment` | `unknown` | — | React의 Fragment 컴포넌트 |\n| `components?` | `ComponentMap` | — | HTML 태그 이름과 커스텀 React 컴포넌트의 매핑 |\n\n## 사용법\n\n```tsx\n\nconst result = compile(md, { outputKind: \"hast\" });\nconst hast: HastRoot = JSON.parse(result.output as string);\n\nconst element = hastToReact(hast, {\n  createElement,\n  Fragment,\n  components: {\n    pre: ({ children, ...props }) => <pre className=\"code-block\" {...props}>{children}</pre>,\n    a: ({ children, ...props }) => <a target=\"_blank\" rel=\"noopener\" {...props}>{children}</a>,\n  },\n});\n```\n\n## 예시\n\n### 기본 사용법\n\n```tsx\n\nconst result = compile(\"# Hello, **world**!\", { outputKind: \"hast\" });\nconst hast: HastRoot = JSON.parse(result.output as string);\nconst element = hastToReact(hast, { createElement, Fragment });\n\nfunction Page() {\n  return <div>{element}</div>;\n}\n```\n\n### Shiki로 강조된 HAST와 함께\n\n```tsx\n\nconst transformer = await createShikiTransformer({\n  themes: [\"github-dark\"],\n  langs: [\"typescript\"],\n});\n\nconst result = compile(md, { outputKind: \"hast\" });\nconst hast: HastRoot = JSON.parse(result.output as string);\nconst highlighted = transformer.transform(hast);\nconst element = hastToReact(highlighted, { createElement, Fragment });\n```\n\n### 서버 사이드 렌더링\n\n```tsx\n\nconst result = compile(md, { outputKind: \"hast\" });\nconst hast: HastRoot = JSON.parse(result.output as string);\nconst element = hastToReact(hast, { createElement, Fragment });\nconst html = renderToString(element);\n\nconsole.log(html);\n// SSR을 위한 HTML 문자열\n```\n\n## 동작\n\n- **속성 이름 변환:** HTML 속성은 React 네이밍으로 변환됩니다 (`class`에서 `className`, `for`에서 `htmlFor` 등).\n- **스타일 파싱:** CSS 스타일 문자열이 React 스타일 객체로 파싱됩니다.\n- **className 배열:** HAST의 `className` 배열은 공백으로 이어 붙여집니다.\n- **불리언 속성:** `true`면 속성이 렌더링되고, `false`/`null`/`undefined`면 생략됩니다.\n- **Raw 노드:** 인라인 HTML로 렌더링됩니다. 신뢰할 수 없는 입력을 다룰 때는 (`@unifast/node`의) `sanitize` 플러그인을 사용하세요.\n- **주석과 doctype:** 무시됩니다(`null` 반환).",
  "alternates": [
    {
      "locale": "en",
      "url": "https://unifast.dev/docs/packages/react/hast-to-react/",
      "api": "https://unifast.dev//api/docs/packages/react/hast-to-react.json"
    },
    {
      "locale": "ja",
      "url": "https://unifast.dev/ja/docs/packages/react/hast-to-react/",
      "api": "https://unifast.dev//api/ja/docs/packages/react/hast-to-react.json"
    },
    {
      "locale": "zh-CN",
      "url": "https://unifast.dev/zh-CN/docs/packages/react/hast-to-react/",
      "api": "https://unifast.dev//api/zh-CN/docs/packages/react/hast-to-react.json"
    },
    {
      "locale": "zh-TW",
      "url": "https://unifast.dev/zh-TW/docs/packages/react/hast-to-react/",
      "api": "https://unifast.dev//api/zh-TW/docs/packages/react/hast-to-react.json"
    },
    {
      "locale": "ko",
      "url": "https://unifast.dev/ko/docs/packages/react/hast-to-react/",
      "api": "https://unifast.dev//api/ko/docs/packages/react/hast-to-react.json"
    },
    {
      "locale": "fr",
      "url": "https://unifast.dev/fr/docs/packages/react/hast-to-react/",
      "api": "https://unifast.dev//api/fr/docs/packages/react/hast-to-react.json"
    },
    {
      "locale": "it",
      "url": "https://unifast.dev/it/docs/packages/react/hast-to-react/",
      "api": "https://unifast.dev//api/it/docs/packages/react/hast-to-react.json"
    },
    {
      "locale": "es",
      "url": "https://unifast.dev/es/docs/packages/react/hast-to-react/",
      "api": "https://unifast.dev//api/es/docs/packages/react/hast-to-react.json"
    },
    {
      "locale": "pt-BR",
      "url": "https://unifast.dev/pt-BR/docs/packages/react/hast-to-react/",
      "api": "https://unifast.dev//api/pt-BR/docs/packages/react/hast-to-react.json"
    },
    {
      "locale": "de",
      "url": "https://unifast.dev/de/docs/packages/react/hast-to-react/",
      "api": "https://unifast.dev//api/de/docs/packages/react/hast-to-react.json"
    },
    {
      "locale": "ru",
      "url": "https://unifast.dev/ru/docs/packages/react/hast-to-react/",
      "api": "https://unifast.dev//api/ru/docs/packages/react/hast-to-react.json"
    },
    {
      "locale": "hi",
      "url": "https://unifast.dev/hi/docs/packages/react/hast-to-react/",
      "api": "https://unifast.dev//api/hi/docs/packages/react/hast-to-react.json"
    },
    {
      "locale": "id",
      "url": "https://unifast.dev/id/docs/packages/react/hast-to-react/",
      "api": "https://unifast.dev//api/id/docs/packages/react/hast-to-react.json"
    },
    {
      "locale": "tr",
      "url": "https://unifast.dev/tr/docs/packages/react/hast-to-react/",
      "api": "https://unifast.dev//api/tr/docs/packages/react/hast-to-react.json"
    },
    {
      "locale": "vi",
      "url": "https://unifast.dev/vi/docs/packages/react/hast-to-react/",
      "api": "https://unifast.dev//api/vi/docs/packages/react/hast-to-react.json"
    }
  ]
}