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: [jsx(_components.p, {
      children: "때로는 컴포넌트와 엘리먼트에서 다수의 속성을 받아서 아래쪽으로 전달할 때 하나씩 전달하기보다 객체로 전달하는 것이 합리적입니다.\n디자인 시스템을 만들 때 일반적인 관행인 컴포넌트 안에 DOM 엘리먼트를 래핑할 때 특히 그렇습니다."
    }), "\n", jsxs(_components.p, {
      children: ["이런 경우 스프레드 연산자(", jsx(_components.code, {
        children: "..."
      }), ")를 사용합니다."]
    }), "\n", jsx(_components.p, {
      children: "이렇게 하면 다수의 속성을 객체로 전달할 수 있습니다:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Info"
        }), " {...pkg} />\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-8b188099.js.map
