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: [jsx(_components.code, {
        children: "lazy"
      }), "와 ", jsx(_components.code, {
        children: "createResource"
      }), "를 단독으로 사용할 수 있지만, Solid는 여러 비동기 이벤트 표시를 조정하는 메커니즘도 제공합니다. ", jsx(_components.code, {
        children: "Suspense"
      }), "는 이러한 비동기 이벤트가 완료될 때까지 일부 로드된 컨텐츠 대신 폴백 플레이스홀더를 표시할 수 있는 경계 역할을 합니다."]
    }), "\n", jsxs(_components.p, {
      children: ["이렇게 하면 대량의 로딩 상태로 인한 버벅거림을 제거하여 사용자 경험을 개선할 수 있습니다. ", jsx(_components.code, {
        children: "Suspense"
      }), "는 하위 비동기 읽기를 자동으로 감지하고 그에 따라 작동합니다. 필요한 만큼의 ", jsx(_components.code, {
        children: "Suspense"
      }), " 컴포넌트를 중첩할 수 있으며, ", jsx(_components.code, {
        children: "loading"
      }), " 상태가 변경되면 가장 가까운 상위 항목만 ", jsx(_components.code, {
        children: "fallback"
      }), " 상태로 변환됩니다."]
    }), "\n", jsxs(_components.p, {
      children: ["지연 로딩 예제에 ", jsx(_components.code, {
        children: "Suspense"
      }), " 컴포넌트를 추가해 보겠습니다:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<>\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "h1"
            }), ">"]
          }), "Welcome", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "h1"
            }), ">"]
          })]
        }), "\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Suspense"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "fallback"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{"
            }), "<", jsx(_components.span, {
              className: "hljs-attr",
              children: "p"
            }), ">"]
          }), "Loading...", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "p"
            }), ">"]
          }), "}>\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Greeting"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "name"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"Jake\""
            }), " />"]
          }), "\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Suspense"
            }), ">"]
          })]
        }), "\n</>\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "이제 로딩 플레이스홀더가 생겼습니다."
    }), "\n", jsxs(_components.p, {
      children: ["비동기 fetch 자체가 아니라, ", jsx(_components.code, {
        children: "Suspense"
      }), "를 트리거하는 비동기 파생 값을 읽는다는 점에 유의하세요. ", jsx(_components.code, {
        children: "Suspense"
      }), " 경계 내에서 Resource 시그널(", jsx(_components.code, {
        children: "lazy"
      }), " 컴포넌트 포함)이 읽히지 않으면, 정지되지 않습니다."]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "Suspense"
      }), "는 두 브랜치를 모두 렌더링하는 ", jsx(_components.code, {
        children: "Show"
      }), " 컴포넌트일 뿐입니다. ", jsx(_components.code, {
        children: "Suspense"
      }), "는 비동기 서버 렌더링에 필수적이지만, 클라이언트 렌더링 코드에 바로 적용하려고 할 필요는 없습니다. Solid의 세분화된 렌더링은 이를 수동으로 분할하는데 추가 비용이 들지 않습니다."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "Deferred"
        }), "(", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [resume, setResume] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-literal",
          children: "false"
        }), ");\n  ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "setTimeout"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setResume"
        }), "(", jsx(_components.span, {
          className: "hljs-literal",
          children: "true"
        }), "), ", jsx(_components.span, {
          className: "hljs-number",
          children: "0"
        }), ");\n\n  ", 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: "Show"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "when"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{resume()}"
            }), ">"]
          }), "{props.children}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Show"
            }), ">"]
          })]
        }), ";\n}\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Solid의 모든 작업은 이미 독립적으로 대기열에 들어 있기 때문에 타임 슬라이싱과 같은 것은 필요하지 않습니다."
    })]
  });
}
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-1a802c09.js.map
