var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from 'solid-js/web';\nimport { createSignal, createEffect } from 'solid-js';\n\nfunction Counter() {\n  const [count, setCount] = createSignal(0);\n\n  return <button>Click Me</button>;\n}\n\nrender(() => <Counter />, document.getElementById('app'))\n"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render } from 'solid-js/web';\nimport { createSignal, createEffect } from 'solid-js';\n\nfunction Counter() {\n  const [count, setCount] = createSignal(0);\n  createEffect(() => {\n    console.log(\"The count is now\", count());\n  });\n\n  return <button onClick={() => setCount(count() + 1)}>Click Me</button>;\n}\n\nrender(() => <Counter />, document.getElementById('app'));\n"
		}
	]
};
var markdown = "Signal은 추적 가능한 값이지만, 방정식의 절반에 불과합니다. 이를 보완하기 위해 추적 가능한 값으로 업데이트할 수 있는 옵저버가 있습니다. _Effect_ 는 옵저버 중 하나이며, Signal에 의존하는 사이드 이펙트를 실행합니다.\n\n`solid-js`에서 `createEffect`를 임포트해 Effect를 생성할 수 있습니다. Effect는 함수가 실행되는 동안 읽은 모든 Signal을 자동으로 구독하고, Signal이 변경되면 다시 실행됩니다.\n\n`count`가 변경될 때마다 다시 실행되는 Effect를 만들어 보겠습니다:\n\n```jsx\ncreateEffect(() => {\n  console.log(\"The count is now\", count());\n});\n```\n\n`count` Signal을 업데이트하기 위해, 버튼에 클릭 핸들러를 추가합니다:\n\n```jsx\n<button onClick={() => setCount(count() + 1)}>Click Me</button>\n```\n\n이제 버튼을 클릭하면 콘솔에 메시지를 출력합니다. 비교적 간단한 예이지만, Solid의 작동 방식을 이해하려면 JSX의 모든 표현식이 의존성을 가진 Signal이 변경될 때마다 다시 실행되는 자체 Effect라고 생각하면 됩니다. *Solid의 관점에서 모든 렌더링은 리액티브 시스템의 사이드 이펙트일 뿐입니다* : 이것이 Solid에서 렌더링이 작동하는 방식입니다.\n\n> 개발자가 `createEffect`를 사용해 만드는 Effect는 렌더링이 완료된 후 실행되며, 주로 DOM과 상호 작용하는 업데이트를 스케줄링하는 데 사용됩니다. DOM을 좀 더 일찍 수정하려면, [`createRenderEffect`](https://www.solidjs.com/docs/latest/api#createrendereffect)를 사용하세요.\n";
var introduction_effects = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

export { introduction_effects as default, lesson, markdown, solved };
