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",
    em: "em"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsx(_components.p, {
      children: "JSX에서 시그널에 액세스하는 경우 해당 시그널이 변경되면 뷰가 자동으로 업데이트되는 것을 보았습니다. 하지만 컴포넌트 함수 자체는 한 번만 실행됩니다."
    }), "\n", jsx(_components.p, {
      children: "시그널을 함수로 래핑하여 시그널에 의존하는 새로운 표현식을 생성할 수 있습니다. 시그널에 액세스하는 함수도 시그널입니다: 래핑된 시그널이 변경되면 시그널에 의존하는 다른 시그널도 업데이트합니다."
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "doubleCount"
      }), " 함수를 사용해 Counter의 카운트를 2씩 증가해보겠습니다:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "doubleCount"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "count"
        }), "() * ", jsx(_components.span, {
          className: "hljs-number",
          children: "2"
        }), ";\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["JSX에서 시그널처럼 ", jsx(_components.code, {
        children: "doubleCount"
      }), "를 호출할 수 있습니다:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "Count: {doubleCount()}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["이러한 ", jsx(_components.em, {
        children: "파생된 시그널"
      }), " 을 호출하는 이유는, 액세스하는 시그널에서 반응성을 얻기 때문입니다. 파생된 시그널은 자체에 값을 저장하지 않습니다(파생된 시그널을 생성하고 호출하지 않으면, Solid는 미사용 함수처럼 결과물에서 제외합니다). 하지만 의존하는 모든 Effect를 업데이트하고, 뷰에 포함된 경우 렌더링을 트리거합니다."]
    })]
  });
}
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-5d5c87da.js.map
