import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "타입스크립트",
  "children": [{
    "depth": 2,
    "value": "타입스크립트 설정",
    "children": []
  }, {
    "depth": 2,
    "value": "API 타입",
    "children": [{
      "depth": 3,
      "value": "Signal",
      "children": [{
        "depth": 5,
        "value": "디폴트 값",
        "children": []
      }]
    }, {
      "depth": 3,
      "value": "Context",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "컴포넌트 타입",
    "children": []
  }, {
    "depth": 2,
    "value": "이벤트 핸들러",
    "children": []
  }, {
    "depth": 2,
    "value": "ref 속성",
    "children": []
  }, {
    "depth": 2,
    "value": "제어 흐름 좁히기",
    "children": []
  }, {
    "depth": 2,
    "value": "특수 JSX 속성 및 디렉티브",
    "children": [{
      "depth": 3,
      "value": "on:___/oncapture:___",
      "children": []
    }, {
      "depth": 3,
      "value": "prop:___/attr:___",
      "children": []
    }, {
      "depth": 3,
      "value": "use:___",
      "children": []
    }]
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    p: "p",
    h2: "h2",
    code: "code",
    pre: "pre",
    span: "span",
    h3: "h3",
    h5: "h5",
    ol: "ol",
    li: "li"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "타입스크립트",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#타입스크립트",
        children: "#"
      }), "타입스크립트"]
    }), "\n", jsx(_components.p, {
      children: "Solid는 타입스크립트와 함께 사용하기 쉽도록 설계되었습니다:\n표준 JSX를 사용하기 때문에 타입스크립트는 코드를 대부분 이해할 수 있으며, API에 정교한 내장 타입을 제공합니다.\n이 가이드는 타입스크립트로 Solid 코드를 작성하는데 유용한 팁을 다룹니다."
    }), "\n", jsxs(_components.h2, {
      id: "타입스크립트-설정",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#타입스크립트-설정",
        children: "#"
      }), "타입스크립트 설정"]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.a, {
        href: "https://github.com/solidjs/templates/",
        children: "Solid starter templates"
      }), "는 ", jsx(_components.a, {
        href: "https://github.com/solidjs/templates/blob/master/ts/tsconfig.json",
        children: jsx(_components.code, {
          children: "tsconfig.json"
        })
      }), "을 위한 좋은 시작점을 제공합니다."]
    }), "\n", jsxs(_components.p, {
      children: ["Solid JSX 컴파일러와 타입스크립트를 함께 사용하려면, ", jsx(_components.a, {
        href: "https://www.typescriptlang.org/tsconfig#jsx",
        children: jsx(_components.code, {
          children: "\"jsx\": \"preserve\""
        })
      }), " 설정을 사용해 JSX 구조를 그대로 유지해야 하며, ", jsx(_components.a, {
        href: "https://www.typescriptlang.org/tsconfig#jsxImportSource",
        children: jsx(_components.code, {
          children: "\"jsxImportSource\": \"solid-js\""
        })
      }), " 으로 JSX 타입을 지정해야 합니다.\n따라서, 최소한의 ", jsx(_components.code, {
        children: "tsconfig.json"
      }), " 파일은 다음과 같습니다:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-json",
        children: [jsx(_components.span, {
          className: "hljs-punctuation",
          children: "{"
        }), "\n  ", jsx(_components.span, {
          className: "hljs-attr",
          children: "\"compilerOptions\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: ":"
        }), " ", jsx(_components.span, {
          className: "hljs-punctuation",
          children: "{"
        }), "\n    ", jsx(_components.span, {
          className: "hljs-attr",
          children: "\"jsx\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: ":"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"preserve\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: ","
        }), "\n    ", jsx(_components.span, {
          className: "hljs-attr",
          children: "\"jsxImportSource\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: ":"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-js\""
        }), "\n  ", jsx(_components.span, {
          className: "hljs-punctuation",
          children: "}"
        }), "\n", jsx(_components.span, {
          className: "hljs-punctuation",
          children: "}"
        }), "\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["코드 베이스가 여러 JSX 타입을 사용(예를 들어, 리액트와 Solid를 같이 사용)하는 경우, 가장 많이 사용하는 코드 타입을 ", jsx(_components.code, {
        children: "tsconfig.json"
      }), " 파일의 ", jsx(_components.code, {
        children: "jsxImportSource"
      }), " 기본값으로 설정한 다음, 다른 타입을 사용하는 파일에서 아래와 같은 프래그마를 사용해 ", jsxs(_components.a, {
        href: "https://www.typescriptlang.org/tsconfig#jsxImportSource",
        children: [jsx(_components.code, {
          children: "jsxImportSource"
        }), " 옵션을 오버라이드"]
      }), "합니다:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-ts",
        children: [jsxs(_components.span, {
          className: "hljs-comment",
          children: ["/** ", jsx(_components.span, {
            className: "hljs-doctag",
            children: "@jsxImportSource"
          }), " ", jsx(_components.span, {
            className: "hljs-variable",
            children: "solid"
          }), "-js */"]
        }), "\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "또는"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-ts",
        children: [jsxs(_components.span, {
          className: "hljs-comment",
          children: ["/** ", jsx(_components.span, {
            className: "hljs-doctag",
            children: "@jsxImportSource"
          }), " react */"]
        }), "\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "api-타입",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#api-타입",
        children: "#"
      }), "API 타입"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid는 타입스크립트로 작성되었기 때문에, 모든 것이 타입이 지정되어 있습니다.\n", jsx(_components.a, {
        href: "https://www.solidjs.com/docs/latest/api",
        children: "API 문서"
      }), "에는 API 호출 타입과 함께 유용한 몇 가지 타입들에 대해 자세히 설명하고 있습니다.\n여기에서 핵심 프리미티브 사용시 결과 타입에 대해서 알아보겠습니다."]
    }), "\n", jsxs(_components.h3, {
      id: "signal",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#signal",
        children: "#"
      }), "Signal"]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "createSignal<T>"
      }), " 는 시그널에 저장된 객체 타입 ", jsx(_components.code, {
        children: "T"
      }), "에 의해 파라미터화됩니다. 예를 들어:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-ts",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [count, setCount] = createSignal<", jsx(_components.span, {
          className: "hljs-built_in",
          children: "number"
        }), ">();\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "createSignal"
      }), "은 전달한 타입에 해당하는 ", jsx(_components.code, {
        children: "Signal<number>"
      }), " 타입을 반환하며, 이는 제네릭 타입을 갖는 getter와 setter의 튜플입니다:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-ts",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "type"
        }), " { ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Signal"
        }), ", ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Accessor"
        }), ", ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Setter"
        }), " } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "'solid-js'"
        }), ";\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "type"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Signal"
        }), "<T> = [", jsx(_components.span, {
          className: "hljs-attr",
          children: "get"
        }), ": ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Accessor"
        }), "<T>, ", jsx(_components.span, {
          className: "hljs-attr",
          children: "set"
        }), ": ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Setter"
        }), "<T>];\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["이 경우, ", jsx(_components.code, {
        children: "count"
      }), " getter의 타입은 ", jsx(_components.code, {
        children: "Accessor<number | undefined>"
      }), "입니다.\n", jsx(_components.code, {
        children: "Accessor<T>"
      }), "는 Solid에서 제공하는 타입 정의이며, 이 경우 ", jsx(_components.code, {
        children: "() => number | undefined"
      }), "와 동일합니다.\n예제에서는 ", jsx(_components.code, {
        children: "createSignal"
      }), "에 디폴트 값을 지정하지 않았기 때문에 ", jsx(_components.code, {
        children: "| undefined"
      }), " 타입이 추가되었습니다.\n시그널의 디폴트 값은 따라서 ", jsx(_components.code, {
        children: "undefined"
      }), "가 됩니다."]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "setCount"
      }), " setter는 ", jsx(_components.code, {
        children: "Setter<number>"
      }), " 타입이며, 대략 ", jsx(_components.code, {
        children: "(value?: number | ((prev?: number) => number)) => number"
      }), " 에 해당하는 복잡한 타입입니다.\n", jsx(_components.code, {
        children: "number"
      }), " 타입, 혹은 이전 값을 받아서 숫자를 반환하는 함수를 인수로 사용해 ", jsx(_components.code, {
        children: "setCount"
      }), "를 호출할 수 있습니다."]
    }), "\n", jsxs(_components.p, {
      children: ["실제 ", jsx(_components.code, {
        children: "Setter"
      }), " 타입은 더 복잡합니다.\n새 값을 결정하기 위해 함수를 호출하는 대신 시그널을 해당 함수 값으로 설정하고 싶은 경우, 실수로 함수를 setter에 전달하는 것을 감지합니다.\n", jsx(_components.code, {
        children: "setCount(value)"
      }), "를 호출할 때 \"Argument ... is not assignable to parameter\"라는 타입스크립트 에러가 표시된다면, setter 인수를 래핑해 ", jsx(_components.code, {
        children: "setCount(() => value)"
      }), " 처럼 호출을 해서 ", jsx(_components.code, {
        children: "value"
      }), "가 호출되지 않도록 해보세요."]
    }), "\n", jsxs(_components.h5, {
      id: "디폴트-값",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#디폴트-값",
        children: "#"
      }), "디폴트 값"]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "createSignal"
      }), "을 호출할 때 디폴트 값을 제공하게 되면 명시적으로 시그널 타입을 지정하지 않아도 되며, 타입에서 ", jsx(_components.code, {
        children: "| undefined"
      }), "를 제거할 수 있습니다:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-ts",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [count, setCount] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-number",
          children: "0"
        }), ");\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [name, setName] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "''"
        }), ");\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["이 경우, 타입스크립트는 시그널 타입을 ", jsx(_components.code, {
        children: "number"
      }), ", ", jsx(_components.code, {
        children: "string"
      }), "으로 추론합니다.\n따라서, ", jsx(_components.code, {
        children: "count"
      }), "는 ", jsx(_components.code, {
        children: "Accessor<number>"
      }), " 타입이 되며, ", jsx(_components.code, {
        children: "name"
      }), "는 ", jsx(_components.code, {
        children: "Accessor<string>"
      }), " 타입을 얻게 됩니다(", jsx(_components.code, {
        children: "| undefined"
      }), " 타입 없음)."]
    }), "\n", jsxs(_components.h3, {
      id: "context",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#context",
        children: "#"
      }), "Context"]
    }), "\n", jsxs(_components.p, {
      children: ["시그널과 유사하게 ", jsx(_components.a, {
        href: "https://www.solidjs.com/docs/latest/api#createcontext",
        children: jsx(_components.code, {
          children: "createContext<T>"
        })
      }), "는 컨텍스트 값 타입 ", jsx(_components.code, {
        children: "T"
      }), "로 파라미터화 됩니다.\n다음과 같이 타입을 명시할 수 있습니다:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-ts",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "type"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Data"
        }), " = {", jsx(_components.span, {
          className: "hljs-attr",
          children: "count"
        }), ": ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "number"
        }), ", ", jsx(_components.span, {
          className: "hljs-attr",
          children: "name"
        }), ": ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "string"
        }), "};\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " dataContext = createContext<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Data"
        }), ">();\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["이 경우, ", jsx(_components.code, {
        children: "dataContext"
      }), "는 ", jsx(_components.code, {
        children: "Context<Data | undefined>"
      }), " 타입이며, ", jsx(_components.code, {
        children: "useContext(dataContext)"
      }), "는 ", jsx(_components.code, {
        children: "Data | undefined"
      }), " 타입을 반환합니다.\n", jsx(_components.code, {
        children: "| undefined"
      }), "가 붙은 이유는, 현재 컴포넌트의 부모에서 컨텍스트를 제공하지 않은 경우 ", jsx(_components.code, {
        children: "useContext"
      }), "가 ", jsx(_components.code, {
        children: "undefined"
      }), "를 반환하기 때문입니다."]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "createContext"
      }), "에 디폴트 값을 제공하게 되면 ", jsx(_components.code, {
        children: "| undefined"
      }), " 타입을 제거할 수 있으며, ", jsx(_components.code, {
        children: "createContext"
      }), "의 타입을 명시적으로 지정하지 않아도 됩니다:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-ts",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " dataContext = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createContext"
        }), "({", jsx(_components.span, {
          className: "hljs-attr",
          children: "count"
        }), ": ", jsx(_components.span, {
          className: "hljs-number",
          children: "0"
        }), ", ", jsx(_components.span, {
          className: "hljs-attr",
          children: "name"
        }), ": ", jsx(_components.span, {
          className: "hljs-string",
          children: "''"
        }), "});\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["이 경우, 타입스크립트는 ", jsx(_components.code, {
        children: "dataContext"
      }), " 타입을 ", jsx(_components.code, {
        children: "Context<{count: number, name: string}>"
      }), "으로 추론하며, ", jsx(_components.code, {
        children: "Context<Data>"
      }), "와 동일합니다(", jsx(_components.code, {
        children: "| undefined"
      }), " 타입 없음)."]
    }), "\n", jsxs(_components.p, {
      children: ["다른 일반적인 패턴은 컨텍스트에 대한 값을 생성하는 팩토리 함수를 정의하는 것입니다.\n타입스크립트의 ", jsx(_components.a, {
        href: "https://www.typescriptlang.org/docs/handbook/utility-types.html#returntypetype",
        children: jsx(_components.code, {
          children: "ReturnType"
        })
      }), " 유틸리티 타입을 사용해 함수의 리턴 타입을 가져와 컨텍스트 타입으로 사용할 수 있습니다:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-ts",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "export"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "makeCountNameContext"
        }), " = (", jsxs(_components.span, {
          className: "hljs-params",
          children: ["initialCount = ", jsx(_components.span, {
            className: "hljs-number",
            children: "0"
          }), ", initialName = ", jsx(_components.span, {
            className: "hljs-string",
            children: "''"
          })]
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [count, setCount] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(initialCount);\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [name, setName] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(initialName);\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " [{count, name}, {setCount, setName}] ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "as"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), ";\n    ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// `as const` 는 튜플 타입으로 추론하도록 합니다."
        }), "\n};\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "type"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "CountNameContextType"
        }), " = ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "ReturnType"
        }), "<", jsx(_components.span, {
          className: "hljs-keyword",
          children: "typeof"
        }), " makeCountNameContext>;\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "export"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "CountNameContext"
        }), " = createContext<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "CountNameContextType"
        }), ">();\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "export"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "useCountNameContext"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "useContext"
        }), "(", jsx(_components.span, {
          className: "hljs-title class_",
          children: "CountNameContext"
        }), ");\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["이 예제에서 ", jsx(_components.code, {
        children: "CountNameContextType"
      }), " 는 ", jsx(_components.code, {
        children: "makeCountNameContext"
      }), "의 반환 타입에 해당합니다:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-ts",
        children: ["[\n  {", jsx(_components.span, {
          className: "hljs-keyword",
          children: "readonly"
        }), " ", jsx(_components.span, {
          className: "hljs-attr",
          children: "count"
        }), ": ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Accessor"
        }), "<", jsx(_components.span, {
          className: "hljs-built_in",
          children: "number"
        }), ">, ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "readonly"
        }), " ", jsx(_components.span, {
          className: "hljs-attr",
          children: "name"
        }), ": ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Accessor"
        }), "<", jsx(_components.span, {
          className: "hljs-built_in",
          children: "string"
        }), ">},\n  {", jsx(_components.span, {
          className: "hljs-keyword",
          children: "readonly"
        }), " ", jsx(_components.span, {
          className: "hljs-attr",
          children: "setCount"
        }), ": ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Setter"
        }), "<", jsx(_components.span, {
          className: "hljs-built_in",
          children: "number"
        }), ">, ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "readonly"
        }), " ", jsx(_components.span, {
          className: "hljs-attr",
          children: "setName"
        }), ": ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Setter"
        }), "<", jsx(_components.span, {
          className: "hljs-built_in",
          children: "string"
        }), ">}\n]\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "useCountNameContext"
      }), "는 ", jsx(_components.code, {
        children: "() => CountNameContextType | undefined"
      }), " 타입을 가집니다."]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "undefined"
      }), " 발생 가능성을 피하고자 한다면, 항상 컨텍스트가 제공된다고 지정할 수 있습니다:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-ts",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "export"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "useCountNameContext"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "useContext"
        }), "(", jsx(_components.span, {
          className: "hljs-title class_",
          children: "CountNameContext"
        }), ")!;\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["이렇게 가정하는 것은 위험하며, 항상 컨텍스트가 정의되도록 ", jsx(_components.code, {
        children: "createContext"
      }), "에 기본값을 지정하는 것이 더 안전합니다."]
    }), "\n", jsxs(_components.h2, {
      id: "컴포넌트-타입",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#컴포넌트-타입",
        children: "#"
      }), "컴포넌트 타입"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-ts",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "type"
        }), " { ", jsx(_components.span, {
          className: "hljs-variable constant_",
          children: "JSX"
        }), ", ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Component"
        }), " } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "'solid-js'"
        }), ";\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "type"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Component"
        }), "<P = {}> = ", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "props: P"
          }), ") =>"]
        }), " ", jsx(_components.span, {
          className: "hljs-variable constant_",
          children: "JSX"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "Element"
        }), ";\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["기본 컴포넌트 함수의 타입을 지정하려면, ", jsx(_components.code, {
        children: "Component<P>"
      }), " 타입을 사용합니다.\n여기서 ", jsx(_components.code, {
        children: "P"
      }), "는 ", jsx(_components.code, {
        children: "props"
      }), "의 타입이며, ", jsx(_components.a, {
        href: "https://www.typescriptlang.org/docs/handbook/2/objects.html",
        children: "object 타입"
      }), "이어야 합니다.\n이런식으로 알맞은 타입의 props와 속성이 전달되며, Solid에서 렌더링 할 수 있는 값이 반환됩니다: ", jsx(_components.code, {
        children: "JSX.Element"
      }), "는 DOM 노드, ", jsx(_components.code, {
        children: "JSX.Element"
      }), " 배열, ", jsx(_components.code, {
        children: "JSX.Element"
      }), "를 반환하는 함수, boolean, ", jsx(_components.code, {
        children: "undefined"
      }), "/", jsx(_components.code, {
        children: "null"
      }), " 등과 같은 값이 될 수 있습니다.\n여기 몇 가지 예제가 있습니다:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-tsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Counter"
        }), ": ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Component"
        }), " = ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [count, setCount] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-number",
          children: "0"
        }), ");\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\n    ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "button"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "onClick"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{()"
            }), " =>"]
          }), " setCount((c) => c+1)}>\n      {count()}\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "button"
            }), ">"]
          })]
        }), "\n  );\n};\n\n", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Counter"
            }), "/>"]
          })
        }), ";              ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// OK"
        }), "\n", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Counter"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "initial"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{5}/"
            }), ">"]
          })
        }), ";  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// 타입 에러: initial prop이 존재하지 않음"
        }), "\n", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Counter"
            }), ">"]
          }), "hi", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Counter"
            }), ">"]
          })]
        }), "    ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// 타입 에러: children prop이 존재하지 않음"
        }), "\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "InitCounter"
        }), ": ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Component"
        }), "<{", jsx(_components.span, {
          className: "hljs-attr",
          children: "initial"
        }), ": ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "number"
        }), "}> = ", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "props"
          }), ") =>"]
        }), " {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [count, setCount] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(props.", jsx(_components.span, {
          className: "hljs-property",
          children: "initial"
        }), ");\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\n    ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "button"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "onClick"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{()"
            }), " =>"]
          }), " setCount((c) => c+1)}>\n      {count()}\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "button"
            }), ">"]
          })]
        }), "\n  );\n};\n\n", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "InitCounter"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "initial"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{5}/"
            }), ">"]
          })
        }), ";  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// OK"
        }), "\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["컴포넌트가 JSX 자식을 가지려면, ", jsx(_components.code, {
        children: "P"
      }), "에 명시적으로 ", jsx(_components.code, {
        children: "children"
      }), " 타입을 추가하거나, 자동으로 ", jsx(_components.code, {
        children: "children?: JSX.Element"
      }), "를 추가하는 ", jsx(_components.code, {
        children: "ParentComponent"
      }), " 타입을 사용할 수 있습니다.\n또는 컴포넌트를 ", jsx(_components.code, {
        children: "const"
      }), " 대신 ", jsx(_components.code, {
        children: "function"
      }), "으로 선언하려면, ", jsx(_components.code, {
        children: "ParentProps"
      }), " 헬퍼를 사용해 ", jsx(_components.code, {
        children: "props"
      }), " 타입을 설정할 수 있습니다.\n예를 들자면:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-tsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { ", jsx(_components.span, {
          className: "hljs-variable constant_",
          children: "JSX"
        }), ", ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "ParentComponent"
        }), ", ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "ParentProps"
        }), " } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "'solid-js'"
        }), ";\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "type"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "ParentProps"
        }), "<P = {}> = P & { children?: ", jsx(_components.span, {
          className: "hljs-variable constant_",
          children: "JSX"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "Element"
        }), " };\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "type"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "ParentComponent"
        }), "<P = {}> = ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Component"
        }), "<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "ParentProps"
        }), "<P>>;\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// 다음은 이와 동일한 타입입니다:"
        }), "\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "//const CustomCounter: Component<{children?: JSX.Element}> = ..."
        }), "\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "//function CustomCounter(props: ParentProps): JSX.Element { ..."
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "CustomCounter"
        }), ": ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "ParentComponent"
        }), " = ", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "props"
          }), ") =>"]
        }), " {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [count, setCount] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-number",
          children: "0"
        }), ");\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\n    ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "button"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "onClick"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{()"
            }), " =>"]
          }), " setCount((c) => c+1)}>\n      {count()}\n      {props.children}\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "button"
            }), ">"]
          })]
        }), "\n  );\n};\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// 다음은 이와 동일한 타입입니다:"
        }), "\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "//const CustomInitCounter: Component<{initial: number, children?: JSX.Element}> = ..."
        }), "\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "//function CustomInitCounter(props: ParentProps<{initial: number}>): JSX.Element { ..."
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "CustomInitCounter"
        }), ": ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "ParentComponent"
        }), "<{", jsx(_components.span, {
          className: "hljs-attr",
          children: "initial"
        }), ": ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "number"
        }), "}> = ", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "props"
          }), ") =>"]
        }), " {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [count, setCount] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(props.", jsx(_components.span, {
          className: "hljs-property",
          children: "initial"
        }), ");\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\n    ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "button"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "onClick"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{()"
            }), " =>"]
          }), " setCount((c) => c+1)}>\n      {count()}\n      {props.children}\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "button"
            }), ">"]
          })]
        }), "\n  );\n};\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["후자의 경우, ", jsx(_components.code, {
        children: "props"
      }), " 파라미터는 자동으로 ", jsx(_components.code, {
        children: "props: ParentProps<{initial: number}>"
      }), " 타입이 되며, 이는 ", jsx(_components.code, {
        children: "props: {initial: number, children?: JSX.Element}"
      }), "와 동일합니다.\n(Solid 1.4 이전에는, ", jsx(_components.code, {
        children: "Component"
      }), "는 ", jsx(_components.code, {
        children: "ParentComponent"
      }), "와 동일했습니다.)"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid는 ", jsx(_components.code, {
        children: "children"
      }), "을 처리하기 위해 두 가지 다른 ", jsx(_components.code, {
        children: "Component"
      }), " 서브 타입을 제공합니다:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-ts",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " {", jsx(_components.span, {
          className: "hljs-variable constant_",
          children: "JSX"
        }), ", ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "FlowComponent"
        }), ", ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "FlowProps"
        }), ", ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "VoidComponent"
        }), ", ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "VoidProps"
        }), "} ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "'solid-js'"
        }), ";\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "type"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "FlowProps"
        }), "<P = {}, C = ", jsx(_components.span, {
          className: "hljs-variable constant_",
          children: "JSX"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "Element"
        }), "> = P & { ", jsx(_components.span, {
          className: "hljs-attr",
          children: "children"
        }), ": C };\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "type"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "FlowComponent"
        }), "<P = {}, C = ", jsx(_components.span, {
          className: "hljs-variable constant_",
          children: "JSX"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "Element"
        }), "> = ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Component"
        }), "<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "FlowProps"
        }), "<P, C>>;\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "type"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "VoidProps"
        }), "<P = {}> = P & { children?: ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "never"
        }), " };\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "type"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "VoidComponent"
        }), "<P = {}> = ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Component"
        }), "<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "VoidProps"
        }), "<P>>;\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "VoidComponent"
      }), "는 ", jsx(_components.code, {
        children: "children"
      }), "을 지원하지 않는 컴포넌트입니다.\n", jsx(_components.code, {
        children: "P"
      }), "가 ", jsx(_components.code, {
        children: "children"
      }), " 타입을 제공하지 않는 경우, ", jsx(_components.code, {
        children: "VoidComponent<P>"
      }), "는 ", jsx(_components.code, {
        children: "Component<P>"
      }), "와 동일합니다."]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "FlowComponent"
      }), "는 Solid의 ", jsx(_components.code, {
        children: "<Show>"
      }), "와 ", jsx(_components.code, {
        children: "<For>"
      }), "와 같은 \"흐름 제어\" 컴포넌트를 위한 것입니다.\n이런 컴포넌트는 일반적으로 ", jsx(_components.code, {
        children: "children"
      }), "이 의미가 있어야 하며, 때로는 ", jsx(_components.code, {
        children: "children"
      }), "이 단일 함수여야 한다는 것과 같은 특정 타입이 있습니다.\n예를 들자면:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-tsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "CallMeMaybe"
        }), ": ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "FlowComponent"
        }), "<{", jsx(_components.span, {
          className: "hljs-attr",
          children: "when"
        }), ": ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "boolean"
        }), "}, ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "void"
        }), "> = ", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "props"
          }), ") =>"]
        }), " {\n  ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createEffect"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "if"
        }), " (props.", jsx(_components.span, {
          className: "hljs-property",
          children: "when"
        }), ")\n      props.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "children"
        }), "();\n  });\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsxs(_components.span, {
          className: "xml",
          children: [jsx(_components.span, {
            className: "hljs-tag",
            children: "<>"
          }), "{props.when ? 'Calling' : 'Not Calling'}", jsx(_components.span, {
            className: "hljs-tag",
            children: "</>"
          })]
        }), ";\n};\n\n", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "CallMeMaybe"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "when"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{true}/"
            }), ">"]
          })
        }), ";  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// 타입 에러: children 미지정"
        }), "\n", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "CallMeMaybe"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "when"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{true}"
            }), ">"]
          }), "hi", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "CallMeMaybe"
            }), ">"]
          })]
        }), ";  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// 타입 에러: children"
        }), "\n", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "CallMeMaybe"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "when"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{true}"
            }), ">"]
          }), "\n  {() => console.log(\"Here's my number\")}\n", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "CallMeMaybe"
            }), ">"]
          })]
        }), ";              ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// OK"
        }), "\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "이벤트-핸들러",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#이벤트-핸들러",
        children: "#"
      }), "이벤트 핸들러"]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "JSX"
      }), " 네임스페이스는 HTML DOM 작업에 유용한 타입 모음을 제공합니다.\n제공되는 모든 타입들은 ", jsx(_components.a, {
        href: "https://github.com/ryansolid/dom-expressions/blob/main/packages/dom-expressions/src/jsx.d.ts",
        children: "dom-expressions의 JSX 정의"
      }), "를 참고하세요."]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "JSX"
      }), " 네임스페이스의 유용한 헬퍼 타입 중 하나인 ", jsx(_components.code, {
        children: "JSX.EventHandler<T, E>"
      }), "는 DOM 엘리먼트 타입 ", jsx(_components.code, {
        children: "T"
      }), "와 이벤트 타입 ", jsx(_components.code, {
        children: "E"
      }), "에 대한 단일 인수 이벤트 핸들러를 나타냅니다.\n이를 사용해 JSX 외부에서 정의한 이벤트 핸들러 타입을 지정할 수 있습니다.\n예를 들어:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-tsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "type"
        }), " { ", jsx(_components.span, {
          className: "hljs-variable constant_",
          children: "JSX"
        }), " } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "'solid-js'"
        }), ";\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-attr",
          children: "onInput"
        }), ": ", jsx(_components.span, {
          className: "hljs-variable constant_",
          children: "JSX"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "EventHandler"
        }), "<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "HTMLInputElement"
        }), ", ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "InputEvent"
        }), "> = ", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "event"
          }), ") =>"]
        }), " {\n  ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "console"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "log"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "'input changed to'"
        }), ", event.", jsx(_components.span, {
          className: "hljs-property",
          children: "currentTarget"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "value"
        }), ");\n};\n\n", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "input"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "onInput"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{onInput}/"
            }), ">"]
          })
        }), "\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: [jsxs(_components.a, {
        href: "https://www.solidjs.com/docs/latest/api#on___",
        children: [jsx(_components.code, {
          children: "on___"
        }), " JSX 속성"]
      }), "(내장 이벤트 타입) 안에 인라인으로 정의된 핸들러는 자동으로 적절한 ", jsx(_components.code, {
        children: "JSX.EventHandler"
      }), " 타입으로 지정됩니다."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-tsx",
        children: ["<input onInput={", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "event"
          }), ") =>"]
        }), " {\n  ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "console"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "log"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "'input changed to'"
        }), ", event.", jsx(_components.span, {
          className: "hljs-property",
          children: "currentTarget"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "value"
        }), ");\n}}/>;\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "JSX.EventHandler<T>"
      }), "는 이벤트의 ", jsxs(_components.a, {
        href: "https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget",
        children: [jsx(_components.code, {
          children: "currentTarget"
        }), " 속성"]
      }), "을 ", jsx(_components.code, {
        children: "T"
      }), "타입으로 제한합니다(위 코드에서 ", jsx(_components.code, {
        children: "event.currentTarget"
      }), "은 ", jsx(_components.code, {
        children: "HTMLInputEvent"
      }), "타입이며, 여기에는 ", jsx(_components.code, {
        children: "value"
      }), " 속성이 있습니다).\n하지만, 이벤트의 ", jsxs(_components.a, {
        href: "https://developer.mozilla.org/en-US/docs/Web/API/Event/target",
        children: [jsx(_components.code, {
          children: "target"
        }), " 속성"]
      }), "은 모든 ", jsx(_components.code, {
        children: "DOMElement"
      }), "가 될 수 있습니다.\n", jsx(_components.code, {
        children: "currentTarget"
      }), "은 이벤트 핸들러가 연결된 엘리먼트이므로 타입을 알 수 있지만, ", jsx(_components.code, {
        children: "target"
      }), "은 사용자 인터랙션으로 인해 버블된 이벤트이거나, 이벤트 핸들러에 의해 캡처된 이벤트이기 때문에 모든 DOM 엘리먼트가 될 수 있습니다."]
    }), "\n", jsxs(_components.h2, {
      id: "ref-속성",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#ref-속성",
        children: "#"
      }), "ref 속성"]
    }), "\n", jsxs(_components.p, {
      children: ["변수와 함께 ", jsx(_components.code, {
        children: "ref"
      }), " 속성을 사용는 경우, Solid는 엘리먼트가 렌더링되면 해당 DOM 엘리먼트를 변수에 할당합니다. 타입스크립트를 사용하지 않는 경우 다음과 같습니다:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "let"
        }), " divRef;\n\n", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "console"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "log"
        }), "(divRef); ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// undefined"
        }), "\n\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "onMount"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n  ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "console"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "log"
        }), "(divRef); ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// <div> 엘리먼트"
        }), "\n})\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\n  ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "ref"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{divRef}/"
            }), ">"]
          })
        }), "\n)\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["이 경우 변수의 타입을 정하기 힘든 문제가 있습니다. ", jsx(_components.code, {
        children: "divRef"
      }), "는 렌더링 후에만 ", jsx(_components.code, {
        children: "HTMLDivElement"
      }), "로 설정되는데, 이를 ", jsx(_components.code, {
        children: "HTMLDivElement"
      }), " 타입으로 해야 할까요? (여기서는 타입스크립트의 ", jsx(_components.code, {
        children: "strictNullChecks"
      }), " 모드가 활성화되어 있다고 가정합니다. 그렇지 않으면, 타입스크립트는 ", jsx(_components.code, {
        children: "undefined"
      }), "가 될 수 있는 변수를 무시합니다.)"]
    }), "\n", jsxs(_components.p, {
      children: ["타입스크립트에서 가장 안전한 패턴은 ", jsx(_components.code, {
        children: "divRef"
      }), "가 일정 기간동안 ", jsx(_components.code, {
        children: "undefined"
      }), "라는 것을 알고, 사용시에 확인하는 것입니다:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-tsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "let"
        }), " ", jsx(_components.span, {
          className: "hljs-attr",
          children: "divRef"
        }), ": ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "HTMLDivElement"
        }), " | ", jsx(_components.span, {
          className: "hljs-literal",
          children: "undefined"
        }), ";\n\ndivRef.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "focus"
        }), "();  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// 컴파일시 에러 발생"
        }), "\n\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "onMount"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "if"
        }), " (!divRef) ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), ";\n  divRef.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "focus"
        }), "();  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// 허용됨"
        }), "\n});\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "ref"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{divRef!}"
            }), ">"]
          }), "\n    ...\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), "\n);\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["또는 ", jsx(_components.code, {
        children: "div"
      }), " 엘리먼트가 렌더링된 후에만 ", jsx(_components.code, {
        children: "onMount"
      }), "가 호출된다는 것을 알고 있기 때문에, ", jsx(_components.code, {
        children: "onMount"
      }), " 내에서 ", jsx(_components.code, {
        children: "divRef"
      }), "에 액세스할 때 ", jsxs(_components.a, {
        href: "https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#non-null-assertion-operator-postfix-",
        children: ["non-null assertion (", jsx(_components.code, {
          children: "!"
        }), ")"]
      }), "을 사용할 수 있습니다."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-tsx",
        children: [jsx(_components.span, {
          className: "hljs-title function_",
          children: "onMount"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n  divRef!.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "focus"
        }), "();\n});\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["또 다른 안전한 패턴은 ", jsx(_components.code, {
        children: "divRef"
      }), " 타입에서 ", jsx(_components.code, {
        children: "undefined"
      }), "를 생략하고, ", jsx(_components.code, {
        children: "ref"
      }), " 속성에\n", jsxs(_components.a, {
        href: "https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html#definite-assignment-assertions",
        children: ["definite assignment assertion (", jsx(_components.code, {
          children: "!"
        }), ")"]
      }), "을 사용하는 것입니다."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-tsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "let"
        }), " ", jsx(_components.span, {
          className: "hljs-attr",
          children: "divRef"
        }), ": ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "HTMLDivElement"
        }), ";\n\ndivRef.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "focus"
        }), "();  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// 컴파일시 에러 발생"
        }), "\n\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "onMount"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n  divRef.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "focus"
        }), "();  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// 허용됨"
        }), "\n});\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "ref"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{divRef!}"
            }), ">"]
          }), "\n    ...\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), "\n);\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["타입스크립트는 ", jsx(_components.code, {
        children: "ref"
      }), " 속성이 ", jsx(_components.code, {
        children: "divRef"
      }), " 변수로 설정되고, ", jsx(_components.code, {
        children: "divRef"
      }), "가 이미 할당되어 있다고 가정하기 때문에 ", jsx(_components.code, {
        children: "ref={divRef!}"
      }), "를 사용해야 합니다.\nSolid에서는 그 반대입니다: ", jsx(_components.code, {
        children: "divRef"
      }), "는 ", jsx(_components.code, {
        children: "ref"
      }), " 속성에 의해 할당됩니다.\n", jsx(_components.code, {
        children: "divRef!"
      }), " 어설션을 사용한 할당 덕분에 타입스크립트는 이 라인 뒤에서 ", jsx(_components.code, {
        children: "divRef"
      }), "가 할당되었다고 확신하게 됩니다."]
    }), "\n", jsxs(_components.p, {
      children: ["이 패턴을 사용하면, 타입스크립트는 함수 내에서 정의된 ref를 정의된 JSX 블럭 이전에 사용하는 경우 올바르게 플래그를 지정합니다.\n하지만 타입스크립트는 중첩된 함수 내에서 ", jsx(_components.code, {
        children: "undefined"
      }), " 일 수 있는 변수의 사용에 대해서는 플래그를 설정하지 않습니다.\nSolid의 컨텍스트에서, ", jsx(_components.code, {
        children: "createMemo"
      }), ", ", jsx(_components.code, {
        children: "createRenderEffect"
      }), ", ", jsx(_components.code, {
        children: "createComputed"
      }), " 내부(ref가 정의된 JSX 블럭 이전)에서는 ref를 사용하지 않도록 주의해야 합니다.\n이 함수들은 즉시 실행되기 때문에, 아직 ref가 생성되지 않은 상태이기 때문입니다. 타입스크립트는 이를 에러로 표시하지 않습니다.\n반면에 이전 패턴은 이러한 에러를 잡아냅니다."]
    }), "\n", jsx(_components.p, {
      children: "또 다른 일반적이지만 덜 안전한 패턴은, 변수 선언 시점에 할당 어설션을 사용하는 것입니다."
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-tsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "let"
        }), " divRef!: ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "HTMLDivElement"
        }), ";\n\ndivRef.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "focus"
        }), "();  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// 컴파일은 성공하지만 에러 발생"
        }), "\n\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "onMount"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n  divRef.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "focus"
        }), "();  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// OK"
        }), "\n});\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "ref"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{divRef}"
            }), ">"]
          }), "\n    ...\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), "\n);\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "이 접근 방식은 해당 변수에 대한 할당 검사를 하지 않기 때문에, 쉬운 해결 방법이기는 하지만 추가적으로 주의가 필요합니다.\n특히 이전 패턴과 달리, 중첩된 함수 외부에서도 변수가 할당되기 전에 미리 사용하는 잘못된 사용을 허용합니다."
    }), "\n", jsxs(_components.h2, {
      id: "제어-흐름-좁히기",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#제어-흐름-좁히기",
        children: "#"
      }), "제어 흐름 좁히기"]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.a, {
        href: "https://www.solidjs.com/docs/latest/api#%3Cshow%3E",
        children: jsx(_components.code, {
          children: "<Show>"
        })
      }), "를 사용해 데이터가 정의된 경우에만 데이터를 표시하는게 일반적인 패턴입니다:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-tsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [name, setName] = createSignal<", jsx(_components.span, {
          className: "hljs-built_in",
          children: "string"
        }), ">();\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Show"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "when"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{name()}"
            }), ">"]
          }), "\n    Hello {name().replace(/\\s+/g, '\\xa0')}!\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Show"
            }), ">"]
          })]
        }), "\n);\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["이 경우, 타입스크립트는 2번의 ", jsx(_components.code, {
        children: "name()"
      }), " 함수 호출이 동일한 값을 반환하는지를 알 수 없기 때문에, 첫 번째 호출이 truthy 값을 반환하는 경우에만 두 번째 호출이 일어난다고 결정할 수 없습니다. 따라서 ", jsx(_components.code, {
        children: ".replace()"
      }), "를 호출하려고 할 때, ", jsx(_components.code, {
        children: "name()"
      }), " 값이 ", jsx(_components.code, {
        children: "undefined"
      }), "일 수도 있다고 에러를 냅니다."]
    }), "\n", jsx(_components.p, {
      children: "이 문제를 해결할 수 있는 2가지 방법이 있습니다:"
    }), "\n", jsxs(_components.ol, {
      children: ["\n", jsxs(_components.li, {
        children: ["\n", jsxs(_components.p, {
          children: ["타입스크립트 ", jsxs(_components.a, {
            href: "https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#non-null-assertion-operator-postfix-",
            children: ["non-null assertion 연산자 ", jsx(_components.code, {
              children: "!"
            })]
          }), "를 사용해 직접 ", jsx(_components.code, {
            children: "name()"
          }), "이 not-null 값을 반환한다고 어설션을 합니다:"]
        }), "\n", jsx(_components.pre, {
          children: jsxs(_components.code, {
            className: "hljs language-tsx",
            children: [jsx(_components.span, {
              className: "hljs-keyword",
              children: "return"
            }), " (\n  ", jsxs(_components.span, {
              className: "xml",
              children: [jsxs(_components.span, {
                className: "hljs-tag",
                children: ["<", jsx(_components.span, {
                  className: "hljs-name",
                  children: "Show"
                }), " ", jsx(_components.span, {
                  className: "hljs-attr",
                  children: "when"
                }), "=", jsx(_components.span, {
                  className: "hljs-string",
                  children: "{name()}"
                }), ">"]
              }), "\n    Hello {name()!.replace(/\\s+/g, '\\xa0')}!\n  ", jsxs(_components.span, {
                className: "hljs-tag",
                children: ["</", jsx(_components.span, {
                  className: "hljs-name",
                  children: "Show"
                }), ">"]
              })]
            }), "\n);\n"]
          })
        }), "\n"]
      }), "\n", jsxs(_components.li, {
        children: ["\n", jsxs(_components.p, {
          children: [jsx(_components.code, {
            children: "when"
          }), " prop의 값이 truthy인 경우 이 값을 전달하는 하는 ", jsx(_components.code, {
            children: "<Show>"
          }), "의 콜백 형식을 사용합니다:"]
        }), "\n", jsx(_components.pre, {
          children: jsxs(_components.code, {
            className: "hljs language-tsx",
            children: [jsx(_components.span, {
              className: "hljs-keyword",
              children: "return"
            }), " (\n  ", jsxs(_components.span, {
              className: "xml",
              children: [jsxs(_components.span, {
                className: "hljs-tag",
                children: ["<", jsx(_components.span, {
                  className: "hljs-name",
                  children: "Show"
                }), " ", jsx(_components.span, {
                  className: "hljs-attr",
                  children: "when"
                }), "=", jsx(_components.span, {
                  className: "hljs-string",
                  children: "{name()}"
                }), ">"]
              }), "\n    {(n) =>\n      ", jsx(_components.span, {
                className: "hljs-tag",
                children: "<>"
              }), "Hello {n.replace(/\\s+/g, '\\xa0')}!", jsx(_components.span, {
                className: "hljs-tag",
                children: "</>"
              })]
            }), "\n    }\n  </", jsx(_components.span, {
              className: "hljs-title class_",
              children: "Show"
            }), ">\n);\n"]
          })
        }), "\n", jsxs(_components.p, {
          children: ["이 경우, ", jsx(_components.code, {
            children: "Show"
          }), " 컴포넌트 타입은 ", jsx(_components.code, {
            children: "n"
          }), " 값이 truthy 라고 타입스크립트에 알려주기 때문에, ", jsx(_components.code, {
            children: "undefined"
          }), "(또는 ", jsx(_components.code, {
            children: "null"
          }), ", ", jsx(_components.code, {
            children: "false"
          }), ") 값이 될 수 없습니다."]
        }), "\n", jsxs(_components.p, {
          children: ["하지만, 이 형식의 ", jsx(_components.code, {
            children: "<Show>"
          }), "는 ", jsx(_components.code, {
            children: "name()"
          }), "이 falsy 에서 truthy 로 변경될 때만 수행하는 것이 아니라 ", jsx(_components.code, {
            children: "name()"
          }), "이 변경될 때마다 자식 전체를 처음부터 다시 렌더링합니다.\n이는 자식 컴포넌트가 세밀한 반응성(변경되지 않는 부분은 재사용하고 변경된 부분만 업데이트)을 충분히 누리지 못하고 있음을 의미합니다."]
        }), "\n"]
      }), "\n"]
    }), "\n", jsxs(_components.h2, {
      id: "특수-jsx-속성-및-디렉티브",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#특수-jsx-속성-및-디렉티브",
        children: "#"
      }), "특수 JSX 속성 및 디렉티브"]
    }), "\n", jsxs(_components.h3, {
      id: "on___oncapture___",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#on___oncapture___",
        children: "#"
      }), jsx(_components.code, {
        children: "on:___"
      }), "/", jsx(_components.code, {
        children: "oncapture:___"
      })]
    }), "\n", jsxs(_components.p, {
      children: ["Solid의 ", jsxs(_components.a, {
        href: "https://www.solidjs.com/docs/latest/api#on%3A___%2Foncapture%3A___",
        children: [jsx(_components.code, {
          children: "on:___"
        }), "/", jsx(_components.code, {
          children: "oncapture:___"
        }), " 속성"]
      }), "을 통해 커스텀 핸들러를 사용한다면, ", jsx(_components.code, {
        children: "\"solid-js\""
      }), "의 ", jsx(_components.code, {
        children: "JSX"
      }), " 네임스페이스 내에서 ", jsx(_components.code, {
        children: "CustomEvents"
      }), " 와 ", jsx(_components.code, {
        children: "CustomCaptureEvents"
      }), " 인터페이스를 오버라이딩하여 결과 ", jsx(_components.code, {
        children: "Event"
      }), " 객체에 해당하는 타입을 정의해야 합니다."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-tsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "class"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "NameEvent"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "extends"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_ inherited__",
          children: "CustomEvent"
        }), " {\n  ", jsx(_components.span, {
          className: "hljs-attr",
          children: "type"
        }), ": ", jsx(_components.span, {
          className: "hljs-string",
          children: "'Name'"
        }), ";\n  ", jsx(_components.span, {
          className: "hljs-attr",
          children: "detail"
        }), ": {", jsx(_components.span, {
          className: "hljs-attr",
          children: "name"
        }), ": ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "string"
        }), "};\n\n  ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "constructor"
        }), "(", jsxs(_components.span, {
          className: "hljs-params",
          children: ["name: ", jsx(_components.span, {
            className: "hljs-built_in",
            children: "string"
          })]
        }), ") {\n    ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "super"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "'Name'"
        }), ", {", jsx(_components.span, {
          className: "hljs-attr",
          children: "detail"
        }), ": {name}});\n  }\n}\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "declare"
        }), " ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "module"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-js\""
        }), " {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "namespace"
        }), " JSX {\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "interface"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "CustomEvents"
        }), " { ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// on:Name"
        }), "\n      ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Name\""
        }), ": ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "NameEvent"
        }), ";\n    }\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "interface"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "CustomCaptureEvents"
        }), " { ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// oncapture:Name"
        }), "\n      ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Name\""
        }), ": ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "NameEvent"
        }), ";\n    }\n  }\n}\n\n<div ", jsx(_components.span, {
          className: "hljs-attr",
          children: "on"
        }), ":", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Name"
        }), "={", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "event"
          }), ") =>"]
        }), " ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "console"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "log"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "'name is'"
        }), ", event.", jsx(_components.span, {
          className: "hljs-property",
          children: "detail"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "name"
        }), ")}/>\n"]
      })
    }), "\n", jsxs(_components.h3, {
      id: "prop___attr___",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#prop___attr___",
        children: "#"
      }), jsx(_components.code, {
        children: "prop:___"
      }), "/", jsx(_components.code, {
        children: "attr:___"
      })]
    }), "\n", jsxs(_components.p, {
      children: ["Solid의 ", jsxs(_components.a, {
        href: "https://www.solidjs.com/docs/latest/api#prop%3A___",
        children: [jsx(_components.code, {
          children: "prop:___"
        }), " 속성"]
      }), "을 통해 강제된 프로퍼티를 사용하거나, Solid의 ", jsxs(_components.a, {
        href: "https://www.solidjs.com/docs/latest/api#attr%3A___",
        children: [jsx(_components.code, {
          children: "attr:___"
        }), " 속성"]
      }), "을 통해 커스텀 속성을 사용하는 경우, ", jsx(_components.code, {
        children: "ExplicitProperties"
      }), " 와 ", jsx(_components.code, {
        children: "ExplicitAttributes"
      }), " 인터페이스에서 각각의 타입을 정의할 수 있습니다:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-tsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "declare"
        }), " ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "module"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-js\""
        }), " {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "namespace"
        }), " JSX {\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "interface"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "ExplicitProperties"
        }), " { ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// prop:___"
        }), "\n      ", jsx(_components.span, {
          className: "hljs-attr",
          children: "count"
        }), ": ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "number"
        }), ";\n      ", jsx(_components.span, {
          className: "hljs-attr",
          children: "name"
        }), ": ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "string"
        }), ";\n    }\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "interface"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "ExplicitAttributes"
        }), " { ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// attr:___"
        }), "\n      ", jsx(_components.span, {
          className: "hljs-attr",
          children: "count"
        }), ": ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "number"
        }), ";\n      ", jsx(_components.span, {
          className: "hljs-attr",
          children: "name"
        }), ": ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "string"
        }), ";\n    }\n  }\n}\n\n<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Input"
        }), " ", jsx(_components.span, {
          className: "hljs-attr",
          children: "prop"
        }), ":name={", jsx(_components.span, {
          className: "hljs-title function_",
          children: "name"
        }), "()} ", jsx(_components.span, {
          className: "hljs-attr",
          children: "prop"
        }), ":count={", jsx(_components.span, {
          className: "hljs-title function_",
          children: "count"
        }), "()}/>\n", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "my-web-component"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "attr:name"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{name()}"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "attr:count"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{count()}/"
            }), ">"]
          })
        }), "\n"]
      })
    }), "\n", jsxs(_components.h3, {
      id: "use___",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#use___",
        children: "#"
      }), jsx(_components.code, {
        children: "use:___"
      })]
    }), "\n", jsxs(_components.p, {
      children: ["Solid의 ", jsxs(_components.a, {
        href: "https://www.solidjs.com/docs/latest/api#use%3A___",
        children: [jsx(_components.code, {
          children: "use:___"
        }), " 속성"]
      }), "에 대한 커스텀 디렉티브를 정의하는 경우, ", jsx(_components.code, {
        children: "Directives"
      }), " 인터페이스에 다음과 같이 타입을 정의할 수 있습니다:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-tsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "model"
        }), "(", jsxs(_components.span, {
          className: "hljs-params",
          children: ["element: HTMLInputElement, value: Accessor<Signal<", jsx(_components.span, {
            className: "hljs-built_in",
            children: "string"
          }), ">>"]
        }), ") {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [field, setField] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "value"
        }), "();\n  ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createRenderEffect"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " (element.", jsx(_components.span, {
          className: "hljs-property",
          children: "value"
        }), " = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "field"
        }), "()));\n  element.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "addEventListener"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"input\""
        }), ", ", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "e"
          }), ") =>"]
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setField"
        }), "(e.", jsx(_components.span, {
          className: "hljs-property",
          children: "target"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "value"
        }), "));\n}\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "declare"
        }), " ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "module"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-js\""
        }), " {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "namespace"
        }), " JSX {\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "interface"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Directives"
        }), " {  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// use:model"
        }), "\n      ", jsx(_components.span, {
          className: "hljs-attr",
          children: "model"
        }), ": ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Signal"
        }), "<", jsx(_components.span, {
          className: "hljs-built_in",
          children: "string"
        }), ">;\n    }\n  }\n}\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "let"
        }), " [name, setName] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "''"
        }), ");\n\n", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "input"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "type"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"text\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "use:model"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{[name,"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "setName"
            }), "]} />"]
          })
        }), ";\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["다른 모듈에 있는 ", jsx(_components.code, {
        children: "d"
      }), " 디렉티브를 ", jsx(_components.code, {
        children: "import"
      }), "하고, ", jsx(_components.code, {
        children: "d"
      }), "가 ", jsx(_components.code, {
        children: "use:d"
      }), " 디렉티브 형식으로만 사용된다고 하면, 타입스크립트(정확히는 ", jsx(_components.a, {
        href: "https://babeljs.io/docs/en/babel-preset-typescript",
        children: jsx(_components.code, {
          children: "babel-preset-typescript"
        })
      }), ")는 기본적으로 ", jsx(_components.code, {
        children: "d"
      }), "를 ", jsx(_components.code, {
        children: "import"
      }), "하는 것을 삭제합니다.\n이는 ", jsx(_components.code, {
        children: "d"
      }), "가 타입일 가능성 때문에 타입스크립트가 ", jsx(_components.code, {
        children: "use:d"
      }), "를 ", jsx(_components.code, {
        children: "d"
      }), "에 대한 참조로 확신하지 못하기 때문입니다.\n이 문제를 해결하는 방법은 2 가지가 있습니다:"]
    }), "\n", jsxs(_components.ol, {
      children: ["\n", jsxs(_components.li, {
        children: [jsxs(_components.a, {
          href: "https://babeljs.io/docs/en/babel-preset-typescript#onlyremovetypeimports",
          children: [jsx(_components.code, {
            children: "babel-preset-typescript"
          }), "의 ", jsx(_components.code, {
            children: "onlyRemoveTypeImports: true"
          })]
        }), " 설정 옵션을 사용하게 되면 ", jsx(_components.code, {
          children: "import type ..."
        }), " 으로 타입을 임포트하는 것을 제외한 모든 ", jsx(_components.code, {
          children: "import"
        }), "를 제거하지 않습니다.\n", jsx(_components.code, {
          children: "vite-plugin-solid"
        }), "를 사용하는 경우, ", jsx(_components.code, {
          children: "vite.config.ts"
        }), " 파일에서 ", jsx(_components.code, {
          children: "solidPlugin({ typescript: { onlyRemoveTypeImports: true } })"
        }), " 을 사용해 이 옵션을 설정할 수 있습니다."]
      }), "\n"]
    }), "\n", jsxs(_components.p, {
      children: ["코드 베이스 전체에서 ", jsx(_components.code, {
        children: "export type"
      }), ", ", jsx(_components.code, {
        children: "import type"
      }), "을 주의깊게 사용하지 않으면 이 옵션이 문제가 될 수 있습니다."]
    }), "\n", jsxs(_components.ol, {
      start: "2",
      children: ["\n", jsxs(_components.li, {
        children: [jsx(_components.code, {
          children: "d"
        }), " 디렉티브를 ", jsx(_components.code, {
          children: "import"
        }), "하는 모든 모듈에서 ", jsx(_components.code, {
          children: "false && d;"
        }), " 처럼 페이크 액세스를 추가합니다.\n이렇게 하면 타입스크립트가 ", jsx(_components.code, {
          children: "d"
        }), " ", jsx(_components.code, {
          children: "import"
        }), "를 제거하는 것을 방지하고, ", jsx(_components.a, {
          href: "https://terser.org/",
          children: "Terser"
        }), "를 사용해 트리 쉐이킹을 한다고 가정하면, 코드는 최종 코드 번들에서 빠지게 됩니다."]
      }), "\n"]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "d;"
      }), " 처럼 보다 간단한 페이크 액세스를 추가하더라도 ", jsx(_components.code, {
        children: "import"
      }), "가 제거되는 것을 방지하지만, 트리 쉐이킹에서 제거되지 않기 때문에 최종 코드 번들에는 포함됩니다."]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=typescript-5978994d.js.map
