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",
    a: "a",
    blockquote: "blockquote"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.p, {
      children: [jsx(_components.em, {
        children: "시그널"
      }), " 은 Solid에서 반응성의 토대가 됩니다. 시그널은 시간이 지남에 따라 변경되는 값을 포함합니다; 시그널의 값을 변경하면 해당 시그널을 사용하는 모든 것이 자동으로 업데이트됩니다."]
    }), "\n", jsxs(_components.p, {
      children: ["시그널을 생성하려면, ", jsx(_components.code, {
        children: "solid-js"
      }), "에서 ", jsx(_components.code, {
        children: "createSignal"
      }), "을 임포트 한 다음 Counter 컴포넌트에서 다음과 같이 호출합니다:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [count, setCount] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-number",
          children: "0"
        }), ");\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["create 호출에 전달된 인수는 초기값이고, 리턴값은 getter와 setter의 두 함수를 가지는 배열입니다. ", jsx(_components.a, {
        href: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment",
        children: "디스트럭쳐링"
      }), "을 사용해, 함수의 이름을 원하는대로 지정할 수 있습니다. 이 경우에는 getter를 ", jsx(_components.code, {
        children: "count"
      }), ", setter를 ", jsx(_components.code, {
        children: "setCount"
      }), "로 이름을 지정합니다."]
    }), "\n", jsx(_components.p, {
      children: "첫 번째 반환값은 값 자체가 아니라 getter(현재 값을 반환하는 함수)라는 점에 유의해야 합니다. 이는 프레임워크가 시그널을 읽는 위치를 추적해서 그에 따라 업데이트해야 하기 때문입니다."
    }), "\n", jsxs(_components.p, {
      children: ["여기에서는 자바스크립트의 ", jsx(_components.code, {
        children: "setInterval"
      }), " 함수를 사용해 주기적으로 증가하는 카운터를 생성합니다. Counter 컴포넌트에 다음 코드를 추가하여 매초마다 ", jsx(_components.code, {
        children: "count"
      }), " 시그널을 업데이트할 수 있습니다:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-built_in",
          children: "setInterval"
        }), "(", 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-number",
          children: "1000"
        }), ");\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "매 틱마다 이전 카운트를 읽고, 1을 더한 다음, 새 값을 설정합니다."
    }), "\n", jsxs(_components.blockquote, {
      children: ["\n", jsx(_components.p, {
        children: "Solid의 시그널은 이전 값을 사용해 다음 값을 설정할 수 있는 함수 형식을 허용합니다."
      }), "\n", jsx(_components.pre, {
        children: jsxs(_components.code, {
          className: "hljs language-jsx",
          children: [jsx(_components.span, {
            className: "hljs-title function_",
            children: "setCount"
          }), "(", jsxs(_components.span, {
            className: "hljs-function",
            children: [jsx(_components.span, {
              className: "hljs-params",
              children: "c"
            }), " =>"]
          }), " c + ", jsx(_components.span, {
            className: "hljs-number",
            children: "1"
          }), ");\n"]
        })
      }), "\n"]
    }), "\n", jsx(_components.p, {
      children: "마지막으로, JSX 코드에서 시그널 값을 사용합니다:"
    }), "\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: {count()}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\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-d97fe656.js.map
