var Component=(()=>{var d=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var k=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),g=(e,n)=>{for(var s in n)l(e,s,{get:n[s],enumerable:!0})},i=(e,n,s,t)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of u(n))!N.call(e,c)&&c!==s&&l(e,c,{get:()=>n[c],enumerable:!(t=m(n,c))||t.enumerable});return e};var f=(e,n,s)=>(s=e!=null?d(h(e)):{},i(n||!e||!e.__esModule?l(s,"default",{value:e,enumerable:!0}):s,e)),w=e=>i(l({},"__esModule",{value:!0}),e);var p=k((v,o)=>{o.exports=_jsx_runtime});var j={};g(j,{default:()=>b,frontmatter:()=>x});var a=f(p()),x={type:"Post",title:"React Suspense Surfing",date:new Date(16734816e5),description:"Suspense\uAC00 \uD574\uACB0\uD558\uB824\uB294 \uBB38\uC81C\uC810\uACFC \uAC04\uB2E8\uD55C \uC608\uC2DC"};function r(e){let n=Object.assign({p:"p",strong:"strong",h2:"h2",a:"a",span:"span",blockquote:"blockquote",code:"code",pre:"pre",br:"br",ul:"ul",li:"li",img:"img"},e.components);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(n.p,{children:[`React v18\uC774 \uBC1C\uD45C\uB41C\uC9C0 \uAF64\uB098 \uC2DC\uAC04\uC774 \uD758\uB800\uB2E4. \uC791\uB144\uC5D0 18 \uBC84\uC804\uC774 \uB098\uC624\uB09C \uD6C4 \uD68C\uC0AC\uC5D0\uC11C \uC720\uC9C0\uBCF4\uC218\uD558\uB294 \uD504\uB85C\uC81D\uD2B8\uC5D0 \uC801\uC6A9\uD574\uBCF4\uB824\uACE0 \uD588\uC73C\uB098, \uC0AC\uC6A9\uC911\uC778 \uB77C\uC774\uBE0C\uB7EC\uB9AC\uB4E4\uC758 \uD638\uD658\uC131 \uB54C\uBB38\uC5D0 \uC7A0\uC2DC \uBBF8\uB8F0\uC218 \uBC16\uC5D0 \uC5C6\uC5C8\uB2E4. \uADF8\uB7EC\uB2E4 \uC5EC\uC720\uAC00 \uC870\uAE08 \uB0A0\uB54C \uC2DC\uAC04\uC744 \uB4E4\uC5EC 18 \uBC84\uC804\uC73C\uB85C \uB9C8\uC774\uADF8\uB808\uC774\uC158\uC5D0 \uC131\uACF5\uD588\uACE0 18\uBC84\uC804\uC5D0 \uC0C8\uB86D\uAC8C \uCD9C\uC2DC\uB41C \uAE30\uB2A5\uB4E4\uC744 \uD558\uB098\uC529 \uC0AC\uC6A9\uD574\uBCF4\uB824\uACE0 \uD558\uB2E4\uAC00 \uB9E8 \uCC98\uC74C \uC801\uC6A9\uC2DC\uCF1C\uBCF4\uACE0 \uC2F6\uC5C8\uB358\uAC8C `,(0,a.jsx)(n.strong,{children:"Suspense"})," \uAE30\uB2A5\uC774\uC600\uB2E4."]}),` `,(0,a.jsxs)(n.h2,{id:"suspense-of-react",children:[(0,a.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#suspense-of-react",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"Suspense of React"]}),` `,(0,a.jsx)(n.p,{children:"\uBA3C\uC800 React beta docs\uC5D0\uC11C Suspense\uAC00 \uC5B4\uB5A4 \uAE30\uB2A5\uC744 \uD558\uB294\uC9C0 \uD655\uC778\uD574\uBCF4\uBA74,"}),` `,(0,a.jsxs)(n.blockquote,{children:[` `,(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:""})," lets you display a fallback until its children have finished loading."]}),` `]}),` `,(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.strong,{children:"children"})," \uCEF4\uD3EC\uB10C\uD2B8\uAC00 \uB85C\uB529 \uC0C1\uD0DC\uC77C\uB3D9\uC548 ",(0,a.jsx)(n.code,{children:"fallback"}),`\uC744 \uBCF4\uC5EC\uC900\uB2E4\uACE0 \uC124\uBA85\uC774 \uB418\uC5B4\uC788\uB2E4. Suspense\uC758 \uC0AC\uC6A9\uBC95\uC740 \uC544\uB798\uC640 \uAC19\uB2E4.`]}),` `,(0,a.jsx)(n.pre,{className:"language-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Suspense"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"fallback"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Loading"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"SomeComponent"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]})]})}),` `,(0,a.jsx)(n.p,{children:`React 18\uBC84\uC804\uC758 \uC18C\uAC1C \uC601\uC0C1\uC774\uB098 \uAE30\uC220 \uBE14\uB85C\uADF8\uC5D0\uC11C\uB3C4 \uC624\uBA70\uAC00\uBA70 \uB9CE\uC774 \uBCF4\uC558\uAE30 \uB54C\uBB38\uC5D0 \uC0AC\uC6A9\uBC95 \uC790\uCCB4\uB294 \uB418\uAC8C \uCE5C\uC219\uD588\uB2E4. \uADF8\uB798\uC11C \uBA3C\uC800 \uAC04\uB2E8\uD558\uAC8C \uAC80\uC99D\uC744 \uD574\uBCF4\uB824\uACE0 \uAC04\uB2E8\uD55C Todo \uD504\uB85C\uC81D\uD2B8\uB97C \uB9CC\uB4E4\uC5C8\uB2E4.`}),` `,(0,a.jsx)(n.pre,{className:"language-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token function-variable function",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"User"})})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsxs)(n.span,{className:"token parameter",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," userId ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"isLoading",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," setIsLoading",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token boolean",children:"true"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"user",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," setUser",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"useEffect"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"setIsLoading"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token boolean",children:"true"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"getUser"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"userId",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"then"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"res"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"setUser"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"res",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"setIsLoading"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token boolean",children:"false"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"userId",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"if"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"isLoading",(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"span"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"User Loading..."}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"UserProfile"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"user"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"user",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Todos"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"userId"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"userId",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token function-variable function",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"App"})})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"User"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"userId"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token number",children:"1"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,a.jsxs)(n.p,{children:["\uC544\uC8FC \uD074\uB798\uC2DD\uD55C \uB9AC\uC561\uD2B8\uC5D0\uC11C \uC11C\uBC84\uC758 \uBE44\uB3D9\uAE30 \uB370\uC774\uD130\uB97C \uB2E4\uB8E8\uB294 \uBC29\uC2DD\uC774\uB2E4.",(0,a.jsx)(n.br,{}),` `,"\uC774 \uCF54\uB4DC\uB97C Suspense\uB85C \uC801\uC6A9\uC2DC\uCF1C\uBCF4\uBA74..."]}),` `,(0,a.jsx)(n.pre,{className:"language-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token function-variable function",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"User"})})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsxs)(n.span,{className:"token parameter",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," userId ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"user",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," setUser",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"useEffect"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"getUser"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"userId",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"then"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"res"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"setUser"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"res",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"userId",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"UserProfile"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"user"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"user",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Todos"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"userId"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"userId",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token function-variable function",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"App"})})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Suspense"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"fallback"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"span"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"User Loading..."}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"User"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"userId"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token number",children:"1"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,a.jsxs)(n.p,{children:['"\uC774\uAC8C \uC815\uB9D0 \uB41C\uB2E4\uACE0...?" \uB77C\uB294 \uC0DD\uAC01\uC744 \uAC00\uC9C0\uBA70 \uC77C\uB2E8 \uC2E4\uD589\uC2DC\uCF1C \uBCF4\uC558\uC73C\uB098',(0,a.jsx)(n.br,{}),` `,"\uB2F9\uC5F0\uD788 \uACB0\uACFC\uB294 \uC2E4\uD328, \uC560\uCD08\uC5D0 \uC9C0\uAE08 \uCF54\uB4DC\uB85C\uB294 ",(0,a.jsx)(n.code,{children:"Suspense"}),`\uAC00 children\uC758 \uB85C\uB529 \uC0C1\uD0DC\uB97C \uC804\uD600 \uC54C \uC218\uAC00 \uC5C6\uB2E4. \uBD84\uBA85\uD788 `,(0,a.jsx)(n.code,{children:"children"}),"\uC5D0\uC11C ",(0,a.jsx)(n.code,{children:"Suspense"}),`\uC5D0\uAC8C loading, success\uC640 \uAC19\uC740 \uC0C1\uD0DC\uAC12\uC744 \uC54C\uB824\uC918\uC57C \uD560\uD150\uB370 \uC5B4\uB5BB\uAC8C \uAD6C\uD604\uC744 \uD574\uC57C\uD560\uAE4C? \uAD81\uAE08\uD574\uD558\uBA70 \uC774\uAC83\uC800\uAC83 \uCC3E\uC544\uBCF4\uC558\uB294\uB370 react beta docs\uC758 `,(0,a.jsx)(n.a,{href:"https://beta.reactjs.org/reference/react/Suspense#usage",children:"Usage"}),"\uC5D0\uC11C \uD78C\uD2B8\uB97C \uCC3E\uC558\uB2E4."]}),` `,(0,a.jsx)(n.pre,{className:"language-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token comment",children:"// ... in React beta docs"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Albums"})}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsxs)(n.span,{className:"token parameter",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," artistId ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," albums ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"use"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token function",children:"fetchData"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsxs)(n.span,{className:"token template-string",children:[(0,a.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,a.jsx)(n.span,{className:"token string",children:"/"}),(0,a.jsxs)(n.span,{className:"token interpolation",children:[(0,a.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"${"}),"artistId",(0,a.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token string",children:"/albums"}),(0,a.jsx)(n.span,{className:"token template-punctuation string",children:"`"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"ul"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"albums",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"map"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"album"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"li"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"key"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"album",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"id"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"album",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"title"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token plain-text",children:" ("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"album",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"year"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token plain-text",children:`) `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token comment",children:"// This is a workaround for a bug to get the demo running."}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token comment",children:"// TODO: replace with real implementation when the bug is fixed."}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:"use"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"promise"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"if"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"promise",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"status"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"==="})," ",(0,a.jsx)(n.span,{className:"token string",children:"'fulfilled'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," promise",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"value"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"else"})," ",(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"if"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"promise",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"status"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"==="})," ",(0,a.jsx)(n.span,{className:"token string",children:"'rejected'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"throw"})," promise",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"reason"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"else"})," ",(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"if"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"promise",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"status"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"==="})," ",(0,a.jsx)(n.span,{className:"token string",children:"'pending'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"throw"})," promise",(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"else"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" promise",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"status"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token string",children:"'pending'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" promise",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"then"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token parameter",children:"result"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" promise",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"status"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token string",children:"'fulfilled'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" promise",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"value"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," result",(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token parameter",children:"reason"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" promise",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"status"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token string",children:"'rejected'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" promise",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"reason"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," reason",(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"throw"})," promise",(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"use"})," \uD568\uC218\uB97C \uBCF4\uBA74 promise\uC758 \uC0C1\uD0DC\uAC00 ",(0,a.jsx)(n.strong,{children:"fulfilled"}),`\uC774\uB77C\uBA74 \uACB0\uACFC\uAC12\uC744 \uB9AC\uD134\uD558\uC9C0\uB9CC, `,(0,a.jsx)(n.strong,{children:"rejected"}),", ",(0,a.jsx)(n.strong,{children:"pending"}),`\uC77C \uACBD\uC6B0\uC5D0\uB294 promise\uB97C Throw\uD558\uACE0 \uC788\uB2E4. \uC544\uB9C8 `,(0,a.jsx)(n.code,{children:"Suspense"}),"\uC5D0\uC11C ",(0,a.jsx)(n.code,{children:"promise.state"}),"\uAC00 ",(0,a.jsx)(n.strong,{children:"pending"}),"\uC77C\uB54C fallback\uC744 \uB80C\uB354\uB9C1\uD558\uB294 \uAC83 \uAC19\uB2E4."]}),` `,(0,a.jsxs)(n.h2,{id:"\uAE30\uC874legacy\uBC29\uC2DD\uACFC-suspense-\uBC29\uC2DD-\uBE44\uAD50",children:[(0,a.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#\uAE30\uC874legacy\uBC29\uC2DD\uACFC-suspense-\uBC29\uC2DD-\uBE44\uAD50",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"\uAE30\uC874(Legacy)\uBC29\uC2DD\uACFC Suspense \uBC29\uC2DD \uBE44\uAD50"]}),` `,(0,a.jsxs)(n.p,{children:[`\uB4DC\uB514\uC5B4 Suspense\uB97C \uC5B4\uB5BB\uAC8C \uC0AC\uC6A9\uD558\uB294\uC9C0 \uC880 \uC54C\uAC8C \uB418\uC5C8\uACE0 \uADF8\uB798\uC11C Suspense\uAC00 \uAE30\uC874 \uBC29\uC2DD\uACFC\uB294 \uC5B4\uB5A4 \uC810\uC774 \uB2E4\uB978\uC9C0 \uBE44\uAD50\uD558\uAE30 \uC704\uD574 \uC608\uC81C\uB97C \uBCF8\uACA9\uC801\uC73C\uB85C \uB9CC\uB4E4\uC5B4 \uBCF4\uC558\uB2E4. (`,(0,a.jsx)(n.a,{href:"https://github.com/june6723/react-suspense",children:"\uC608\uC81C github repo"}),")"]}),` `,(0,a.jsxs)(n.p,{children:["\uAE30\uC874\uC758 \uBB38\uC81C\uC810\uC740 \uB9CC\uC57D ",(0,a.jsx)(n.code,{children:"Todos"})," \uCEF4\uD3EC\uB10C\uD2B8\uC5D0 \uBE44\uB3D9\uAE30 \uC694\uCCAD \uB85C\uC9C1\uC774 \uD3EC\uD568\uB418\uC5B4 \uC788\uB2E4\uBA74 ",(0,a.jsx)(n.code,{children:"User"}),` \uCEF4\uD3EC\uB10C\uD2B8\uC758 \uB85C\uB529\uC774 \uB05D\uB098\uAE30 \uC804\uAE4C\uC9C0\uB294 `,(0,a.jsx)(n.code,{children:"Todos"}),"\uC758 \uBE44\uB3D9\uAE30 \uD568\uC218\uAC00 \uC2E4\uD589\uB420 \uC218 \uC5C6\uB2E4\uB294 \uAC83\uC774\uB2E4."]}),` `,(0,a.jsx)(n.pre,{className:"language-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token comment",children:"// ...\uAE30\uC874 \uBC29\uC2DD"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"if"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"isLoading",(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"span"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"User Loading..."}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"UserProfile"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"user"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"user",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Todos"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"userId"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"userId",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,a.jsxs)(n.p,{children:["\uD558\uC9C0\uB9CC Suspense\uB97C \uC0AC\uC6A9\uD558\uAC8C \uB418\uBA74 ",(0,a.jsx)(n.code,{children:"User"}),", ",(0,a.jsx)(n.code,{children:"Todos"})," \uCEF4\uD3EC\uB10C\uD2B8\uB294 \uADF8\uB300\uB85C \uC2E4\uD589\uB418\uACE0 ",(0,a.jsx)(n.strong,{children:"Promise"}),` \uC0C1\uD0DC\uC5D0 \uB530\uB77C Suspense\uC5D0\uC11C fallback\uC744 \uCC98\uB9AC\uD574\uC8FC\uB2C8 `,(0,a.jsx)(n.code,{children:"Todos"})," \uCEF4\uD3EC\uB10C\uD2B8\uC758 \uBE44\uB3D9\uAE30 \uC694\uCCAD\uB3C4 ",(0,a.jsx)(n.code,{children:"User"}),"\uC758 pending \uC0C1\uD0DC\uB97C \uAE30\uB2E4\uB9AC\uC9C0 \uC54A\uACE0 \uBC14\uB85C \uBCF4\uB0BC \uC218 \uC788\uAC8C \uB41C\uB2E4."]}),` `,(0,a.jsx)(n.pre,{className:"language-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token comment",children:"// ...Suspense \uBC29\uC2DD"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"UserProfile"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"user"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"user",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Suspense"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Todos"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"userId"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"userId",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,a.jsx)(n.p,{children:"\uC2E4\uC81C\uB85C \uCEF4\uD3EC\uB10C\uD2B8\uC5D0 console.log \uBA85\uB839\uC5B4\uB97C \uD1B5\uD574 Legacy, Suspense \uB450 \uBC29\uC2DD \uAC01\uAC01 \uC5B4\uB5BB\uAC8C \uB80C\uB354\uB9C1\uACFC \uB370\uC774\uD130 \uC694\uCCAD\uC774 \uAC00\uB294\uC9C0 \uD655\uC778\uD574\uBD24\uB2E4."}),` `,(0,a.jsxs)(n.ul,{children:[` `,(0,a.jsxs)(n.li,{children:[`Legacy \uBC29\uC2DD `,(0,a.jsx)(n.img,{src:"/Legacy_async.png",alt:"Legacy_async"})]}),` `,(0,a.jsxs)(n.li,{children:[`Suspense \uBC29\uC2DD `,(0,a.jsx)(n.img,{src:"/Suspense_async.png",alt:"Suspense_async"}),` `,(0,a.jsx)(n.img,{src:"/suspense_compare.gif",alt:"suspense_compare"})]}),` `]}),` `,(0,a.jsxs)(n.p,{children:["Legacy \uBC29\uC2DD\uC5D0\uC11C \uBCFC \uC218 \uC788\uB4EF\uC774 \uBD80\uBAA8 \uCEF4\uD3EC\uB10C\uD2B8\uAC00 \uADF8\uB824\uC9C0\uAE30\uC804\uAE4C\uC9C0 \uC790\uC2DD \uCEF4\uD3EC\uB10C\uD2B8\uC758 \uB80C\uB354\uB9C1\uC774 \uB9C9\uD600\uC788\uB294 \uBB38\uC81C\uB97C ",(0,a.jsx)(n.code,{children:"waterfall"}),` \uBB38\uC81C\uB77C\uACE0 \uBD80\uB974\uACE0 Suspense\uAC00 \uC774 \uBB38\uC81C\uC810\uC5D0 \uB300\uD574 \uD574\uACB0\uCC45\uC744 \uC81C\uC2DC\uD558\uACE0 \uC788\uB2E4. \uACB0\uAD6D `,(0,a.jsx)(n.strong,{children:"Promise"}),`\uB97C \uAC12\uC73C\uB85C\uC11C \uBD80\uBAA8 \uCEF4\uD3EC\uB10C\uD2B8\uC778 Suspense\uAC00 \uBC1B\uC744 \uC218 \uC788\uB3C4\uB85D \uCC98\uB9AC\uD55C \uC810\uC774 \uC778\uC0C1\uAE4A\uB2E4.`]})]})}function y(e={}){let{wrapper:n}=e.components||{};return n?(0,a.jsx)(n,Object.assign({},e,{children:(0,a.jsx)(r,e)})):r(e)}var b=y;return w(j);})(); ;return Component;

최근 게시물