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: [jsxs(_components.p, {
      children: ["Resource는 비동기 로딩을 처리하도록 특별히 설계된 특수 시그널입니다. 그 목적은 Solid의 분산 실행 모델과 쉽게 상호 작용할 수 있도록 비동기 값을 래핑하는 것입니다. 이는 ", jsx(_components.code, {
        children: "async"
      }), "/", jsx(_components.code, {
        children: "await"
      }), " 또는 순차 실행 모델을 제공하는 제너레이터와는 정반대입니다. 목표는 비동기 작업으로 실행을 중단하지 않고, 코드를 덧붙이지 않는 것입니다."]
    }), "\n", jsx(_components.p, {
      children: "Resource는 Promise를 반환하는 비동기 데이터 fetch 함수를 쿼리하는 소스 시그널에 의해 구동될 수 있습니다. fetch 함수의 내용은 무엇이든 가능합니다. 일반적인 REST 엔드포인트나 GraphQL 호출처럼 Promise를 생성하는 모든 것을 할 수 있습니다. Resource는 데이터 로딩 방법에 좌우되지 않으며, Promise에 의해서만 구동됩니다."
    }), "\n", jsxs(_components.p, {
      children: ["Resource 시그널의 결과에는 현재 상태를 기반으로 View를 쉽게 컨트롤할 수 있도록하는 반응형 ", jsx(_components.code, {
        children: "loading"
      }), "과 ", jsx(_components.code, {
        children: "error"
      }), " 프로퍼티도 포함됩니다."]
    }), "\n", jsx(_components.p, {
      children: "이제 시그널을 Resouce로 교체해 보겠습니다:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [user] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createResource"
        }), "(userId, fetchUser);\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "userId"
      }), " 시그널에 의해 구동되며, 변경 시에 ", jsx(_components.code, {
        children: "fetch"
      }), " 메서드를 호출합니다."]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "createResource"
      }), "에서 반환되는 2번째 값에는 내부 시그널을 직접 업데이트하는 ", jsx(_components.code, {
        children: "mutate"
      }), " 메서드와, 소스가 변경되지 않은 경우에도 현재 쿼리를 다시 로드하는 ", jsx(_components.code, {
        children: "refetch"
      }), " 메서드가 포함되어 있습니다."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [user, { mutate, refetch }] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createResource"
        }), "(userId, fetchUser);\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "lazy"
      }), "는 내부적으로 ", jsx(_components.code, {
        children: "createResource"
      }), "를 사용해 동적 임포트를 관리합니다."]
    })]
  });
}
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-f6f12375.js.map
