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",
    em: "em",
    code: "code",
    pre: "pre",
    span: "span",
    blockquote: "blockquote",
    a: "a"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.p, {
      children: ["시그널은 추적 가능한 값이지만, 방정식의 절반에 불과합니다. 이를 보완하기 위해 추적 가능한 값으로 업데이트할 수 있는 옵저버가 있습니다. ", jsx(_components.em, {
        children: "이펙트"
      }), " 는 옵저버 중 하나이며, 시그널에 의존하는 사이드 이펙트를 실행합니다."]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "solid-js"
      }), "에서 ", jsx(_components.code, {
        children: "createEffect"
      }), "를 임포트해 이펙트를 생성할 수 있습니다. 이펙트는 함수가 실행되는 동안 읽은 모든 시그널을 자동으로 구독하고, 시그널이 변경되면 다시 실행됩니다."]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "count"
      }), "가 변경될 때마다 다시 실행되는 이펙트를 만들어 보겠습니다:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-title function_",
          children: "createEffect"
        }), "(", 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"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"The count is now\""
        }), ", ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "count"
        }), "());\n});\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "count"
      }), " 시그널을 업데이트하기 위해, 버튼에 클릭 핸들러를 추가합니다:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<button onClick={", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setCount"
        }), "(", jsx(_components.span, {
          className: "hljs-title function_",
          children: "count"
        }), "() + ", jsx(_components.span, {
          className: "hljs-number",
          children: "1"
        }), ")}>", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Click"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Me"
        }), "</button>\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["이제 버튼을 클릭하면 콘솔에 메시지를 출력합니다. 비교적 간단한 예이지만, Solid의 작동 방식을 이해하려면 JSX의 모든 표현식이 의존성을 가진 시그널이 변경될 때마다 다시 실행되는 자체 이펙트라고 생각하면 됩니다. ", jsx(_components.em, {
        children: "Solid의 관점에서 모든 렌더링은 리액티브 시스템의 사이드 이펙트일 뿐입니다"
      }), " : 이것이 Solid에서 렌더링이 작동하는 방식입니다."]
    }), "\n", jsxs(_components.blockquote, {
      children: ["\n", jsxs(_components.p, {
        children: ["개발자가 ", jsx(_components.code, {
          children: "createEffect"
        }), "를 사용해 만드는 이펙트는 렌더링이 완료된 후 실행되며, 주로 DOM과 상호 작용하는 업데이트를 스케줄링하는 데 사용됩니다. DOM을 좀 더 일찍 수정하려면, ", jsx(_components.a, {
          href: "https://www.solidjs.com/docs/latest/api#createrendereffect",
          children: jsx(_components.code, {
            children: "createRenderEffect"
          })
        }), "를 사용하세요."]
      }), "\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-a29c7b51.js.map
