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",
    pre: "pre",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.p, {
      children: ["컴포넌트 내부의 ref를 부모에게 노출하고 싶은 경우가 많이 있는데, Solid에서는 ", jsx(_components.code, {
        children: "ref"
      }), " 속성을 사용합니다.\n외부에서 컴포넌트에 ", jsx(_components.code, {
        children: "ref"
      }), "를 사용하는 것은 네이티브 엘리먼트에서 ", jsx(_components.code, {
        children: "ref"
      }), "를 사용하는 것과 매우 유사하게 작동하는데, 할당할 변수나 콜백 함수를 전달할 수 있습니다."]
    }), "\n", jsxs(_components.p, {
      children: ["하지만, 컴포넌트 작성자는 해당 ", jsx(_components.code, {
        children: "ref"
      }), "를 내부 엘리먼트에 연결하여 다시 전달해야 하며, ref 전달을 위해 ", jsx(_components.code, {
        children: "props.ref"
      }), "를 활용할 수 있습니다.\n", jsx(_components.code, {
        children: "ref"
      }), "의 타입이 제공되는 경우 콜백 형식이지만, 대부분의 경우 해당 컴포넌트의 JSX에 있는 엘리먼트나 컴포넌트의 ", jsx(_components.code, {
        children: "ref"
      }), " 속성에 직접 할당할 가능성이 높기 떄문에, 이러한 세부 정보는 대부분 숨겨져 있습니다."]
    }), "\n", jsxs(_components.p, {
      children: ["로고에 애니메이션을 다시 적용하려면, ref를 ", jsx(_components.code, {
        children: "canvas.tsx"
      }), "에 전달해야 합니다:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<canvas ref={props.", jsx(_components.span, {
          className: "hljs-property",
          children: "ref"
        }), "} width=", jsx(_components.span, {
          className: "hljs-string",
          children: "\"256\""
        }), " height=", jsx(_components.span, {
          className: "hljs-string",
          children: "\"256\""
        }), " />\n"]
      })
    })]
  });
}
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-eef0f37e.js.map
