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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    code: "code",
    blockquote: "blockquote",
    pre: "pre",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.p, {
      children: ["Solid는 ", jsx(_components.code, {
        children: "use:"
      }), " 네임스페이스를 사용해 커스텀 디렉티브를 지원합니다. 이는 ", jsx(_components.code, {
        children: "ref"
      }), "에 대한 문법적 설탕일 뿐이지만, 일반적인 바인딩과 유사하고 동일한 엘리먼트에 충돌없이 여러 바인딩을 사용할 수 있다는 점에서 유용합니다. 이는 재사용 가능한 DOM 엘리먼트 동작을 위한 좋은 도구가 됩니다."]
    }), "\n", jsxs(_components.p, {
      children: ["커스텀 디렉티브는 단순히 ", jsx(_components.code, {
        children: "(element, valueAccesor)"
      }), " 인수를 사용하는 함수입니다. 여기서 ", jsx(_components.code, {
        children: "element"
      }), "는 ", jsx(_components.code, {
        children: "use:"
      }), " 속성이 있는 DOM 엘리먼트이고, ", jsx(_components.code, {
        children: "valueAccessor"
      }), "는 속성에 할당된 값에 대한 getter 함수입니다. 함수가 스코프 내에 임포트 되면 ", jsx(_components.code, {
        children: "use:"
      }), "와 함께 사용할 수 있습니다."]
    }), "\n", jsxs(_components.blockquote, {
      children: ["\n", jsxs(_components.p, {
        children: ["중요: 변환할 컴파일러에서 ", jsx(_components.code, {
          children: "use:"
        }), "를 감지하고, 함수가 스코프 내에 있어야 하므로, 스프레드 연산의 일부가 되거나 컴포넌트에 적용될 수 없습니다."]
      }), "\n"]
    }), "\n", jsxs(_components.p, {
      children: ["예제에서는 팝업이나 모달을 닫기 위한 click-outside 동작을 하는 기본적인 래퍼를 만들어 보겠습니다. 먼저 사용할 엘리먼트에 ", jsx(_components.code, {
        children: "clickOutside"
      }), " 디렉티브를 임포트해 사용합니다:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<div ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "class"
        }), "=", jsx(_components.span, {
          className: "hljs-string",
          children: "\"modal\""
        }), " ", jsx(_components.span, {
          className: "hljs-attr",
          children: "use"
        }), ":clickOutside={", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setShow"
        }), "(", jsx(_components.span, {
          className: "hljs-literal",
          children: "false"
        }), ")}>\n  ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Some"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Modal"
        }), "\n</div>\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["커스텀 디렉티브를 정의할 ", jsx(_components.code, {
        children: "click-outside.tsx"
      }), " 파일을 엽니다. 이 디렉티브는 body에 바인딩하고 때가 되면 정리하는 클릭 핸들러를 정의합니다:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "export"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "default"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "clickOutside"
        }), "(", jsx(_components.span, {
          className: "hljs-params",
          children: "el, accessor"
        }), ") {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "onClick"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "e"
        }), ") => !el.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "contains"
        }), "(e.", jsx(_components.span, {
          className: "hljs-property",
          children: "target"
        }), ") && ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "accessor"
        }), "()?.();\n  ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "document"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "body"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "addEventListener"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"click\""
        }), ", onClick);\n\n  ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "onCleanup"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "document"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "body"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "removeEventListener"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"click\""
        }), ", onClick));\n}\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "이제 모달을 열고 닫을 수 있게 되었습니다."
    })]
  });
}
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=lesson-2a75bbf1.js.map
