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=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),b=(a,e)=>{for(var s in e)l(a,s,{get:e[s],enumerable:!0})},i=(a,e,s,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let c of u(e))!N.call(a,c)&&c!==s&&l(a,c,{get:()=>e[c],enumerable:!(t=m(e,c))||t.enumerable});return a};var y=(a,e,s)=>(s=a!=null?d(h(a)):{},i(e||!a||!a.__esModule?l(s,"default",{value:a,enumerable:!0}):s,a)),g=a=>i(l({},"__esModule",{value:!0}),a);var p=k((j,o)=>{o.exports=_jsx_runtime});var T={};b(T,{default:()=>x,frontmatter:()=>w});var n=y(p()),w={title:"Hook \uC5C6\uC774 React \uAC1C\uBC1C\uC744 \uD55C\uB2E4\uBA74?",description:"Hook\uC758 \uB4F1\uC7A5\uBC30\uACBD\uACFC Hook\uC5D0 \uB300\uD55C \uC5EC\uB7EC \uB17C\uC7C1",date:new Date(17299008e5),tag:"react"};function r(a){let e=Object.assign({p:"p",h2:"h2",img:"img",strong:"strong",h3:"h3",pre:"pre",code:"code",span:"span",a:"a",ul:"ul",li:"li"},a.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("br",{}),` `,(0,n.jsx)(e.p,{children:"\uC624\uB298\uC740 React \uAC1C\uBC1C\uC5D0 \uBE7C\uB193\uC744 \uC218 \uC5C6\uB294 Hook\uC5D0 \uB300\uD55C \uC774\uC57C\uAE30\uB97C \uD574\uBCF4\uB824\uACE0 \uD569\uB2C8\uB2E4. \uC774\uB860\uC801\uC778 \uC774\uC57C\uAE30\uC5D0\uC11C \uBC97\uC5B4\uB098, Hook\uC774 \uC5C6\uC5C8\uB2E4\uBA74 \uC5B4\uB5BB\uAC8C \uAC1C\uBC1C\uC744 \uD588\uC744\uC9C0."}),` `,(0,n.jsx)(e.p,{children:"\uADF8\uB9AC\uACE0 \uC5B4\uCA4C\uB2E4 React\uB294 hook\uC744 \uB3C4\uC785\uD558\uAC8C \uB418\uC5C8\uB294\uC9C0\uC5D0 \uB300\uD574 \uC54C\uC544\uBCF4\uACA0\uC2B5\uB2C8\uB2E4."}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)(e.h2,{children:"1. Hook\uC758 \uB4F1\uC7A5 \uBC30\uACBD"}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:"https://github.com/user-attachments/assets/beec8d07-8592-4de0-9dd4-9b49c7a98f7d",alt:"\u1109\u1173\u110F\u1173\u1105\u1175\u11AB\u1109\u1163\u11BA 2024-10-26 \u110B\u1169\u1112\u116E 8.30.56.png"})}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)(e.p,{children:"Hook\uC740 React Conf 2018\uC5D0\uC11C \uBC1C\uD45C\uB418\uC5C8\uC73C\uBA70, React 16.8\uBD80\uD130 \uC0C8\uB86D\uAC8C \uCD94\uAC00\uB41C \uAE30\uB2A5\uC785\uB2C8\uB2E4."}),` `,(0,n.jsx)(e.p,{children:"\uADF8\uB807\uB2E4\uBA74 Hook\uC740 \uC5B4\uB5A4 \uC774\uC720\uB85C \uB4F1\uC7A5\uD558\uAC8C \uB418\uC5C8\uC744\uAE4C\uC694?"}),` `,(0,n.jsx)("br",{}),` `," ",` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:"https://github.com/user-attachments/assets/8873b0ad-70c7-4e76-9c92-5eb2880e210b",alt:"\u1109\u1173\u110F\u1173\u1105\u1175\u11AB\u1109\u1163\u11BA 2024-10-26 \u110B\u1169\u1112\u116E 8.30.56.png"})}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)(e.p,{children:`React\uB294 Hook\uC774 \uB4F1\uC7A5\uD558\uAE30 \uC804\uC758 \uBB38\uC81C\uC810\uC744 3\uAC00\uC9C0\uB85C \uC81C\uC2DC\uD558\uB294\uB370\uC694. \uAC01\uAC01\uC758 \uBB38\uC81C\uC810\uC744 \uD568\uAED8 \uBCF4\uBA74\uC11C \uB4F1\uC7A5 \uBC30\uACBD\uC744 \uC0B4\uD3B4\uBCF4\uACA0\uC2B5\uB2C8\uB2E4.`}),` `,(0,n.jsxs)(e.p,{children:["\u2757\uFE0F \uCC38\uACE0\uB85C \uC774\uBC88 \uAE00\uC740 TODO \uC571 \uCF54\uB4DC\uB97C \uC608\uC2DC\uB85C \uB4DC\uB294\uB370\uC694. \uD06C\uAC8C ",(0,n.jsx)(e.strong,{children:"Hook\uC774 \uC5C6\uB294 class \uCEF4\uD3EC\uB10C\uD2B8"})," vs ",(0,n.jsx)(e.strong,{children:"Hook\uC744 \uD65C\uC6A9\uD55C \uD568\uC218\uD615 \uCEF4\uD3EC\uB10C\uD2B8"}),"\uC73C\uB85C \uB098\uB220 \uAD6C\uD604 \uCF54\uB4DC\uB97C \uBE44\uAD50\uD574\uBCF4\uACA0\uC2B5\uB2C8\uB2E4."]}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)("br",{}),` `," ",` `,(0,n.jsx)(e.h3,{children:"1. \uCEF4\uD3EC\uB10C\uD2B8 \uC0AC\uC774\uC758 \uB85C\uC9C1\uC744 \uD30C\uC545\uD558\uAE30 \uC5B4\uB824\uC6B4 HOC \uD328\uD134"}),` `,(0,n.jsx)(e.p,{children:"\uC774\uC804\uC5D0, React\uB294 \uCEF4\uD3EC\uB10C\uD2B8 \uAC04\uC758 \uC7AC\uC0AC\uC6A9\uD560 \uC218 \uC788\uB294 \uB85C\uC9C1\uC744 \uC81C\uACF5\uD558\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4. \uADF8\uB798\uC11C \uAE30\uC874\uC5D0 \uAC1C\uBC1C\uC790\uB294 render props\uB098, \uACE0\uCC28 \uCEF4\uD3EC\uB10C\uD2B8\uC640 \uAC19\uC740 HOC \uD328\uD134\uC744 \uD1B5\uD574 \uBB38\uC81C\uB97C \uD574\uACB0\uD574\uC57C \uD588\uC2B5\uB2C8\uB2E4."}),` `,(0,n.jsx)(e.p,{children:"\uADF8\uB807\uB2E4\uBA74 HOC\uC640 \uD074\uB798\uC2A4 \uCEF4\uD3EC\uB10C\uD2B8\uB97C \uD65C\uC6A9\uD55C \uCF54\uB4DC\uB97C \uBCF4\uACA0\uC2B5\uB2C8\uB2E4."}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)(e.pre,{className:"language-jsx",children:(0,n.jsxs)(e.code,{className:"language-jsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token function-variable function",children:"withToast"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"WrappedComponent"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"2",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"class"})," ",(0,n.jsx)(e.span,{className:"token class-name",children:"extends"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"React"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Component"})})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"3",children:[" state ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"toasts"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"4",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"5",children:[" ",(0,n.jsx)(e.span,{className:"token function-variable function",children:"addToast"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"text"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"6",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," newToast ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"id"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token known-class-name class-name",children:"Date"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"now"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," text",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"isPopup"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token boolean",children:"true"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"7",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"setState"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"prevState"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"8",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"toasts"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token spread operator",children:"..."}),"prevState",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"toasts"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," newToast",(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"9",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"10",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"11",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"setTimeout"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"12",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"setState"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"prevState"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"13",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"toasts"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," prevState",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"toasts"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"filter"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"toast"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," toast",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"id"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"!=="})," newToast",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"id"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"14",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"15",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"3000"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"16",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"17",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"18",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"render"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"19",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"20",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"WrappedComponent"})]}),` `]})]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"21",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"toasts"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"state"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"toasts"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"22",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"addToast"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"addToast"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"23",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsxs)(e.span,{className:"token spread",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token spread operator",children:"..."}),(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"props"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"24",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"25",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"26",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"27",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"28",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,n.jsx)(e.pre,{className:"language-jsx",children:(0,n.jsxs)(e.code,{className:"language-jsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token function-variable function",children:"withTasks"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"WrappedComponent"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"2",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"class"})," ",(0,n.jsx)(e.span,{className:"token class-name",children:"extends"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"React"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Component"})})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"3",children:[" state ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"tasks"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"4",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"5",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"componentDidMount"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"6",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"fetchTasks"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"7",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"8",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"9",children:[" ",(0,n.jsx)(e.span,{className:"token function-variable function",children:"fetchTasks"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"async"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"10",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," response ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"await"})," ",(0,n.jsx)(e.span,{className:"token function",children:"getTasks"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"11",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"setState"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"12",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"tasks"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," response",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"sort"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsxs)(e.span,{className:"token parameter",children:["a",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," b"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," b",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"createdDate"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," a",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"createdDate"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"13",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"14",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"15",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"16",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"render"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"17",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"18",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"WrappedComponent"})]}),` `]})]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"19",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"tasks"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"state"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"tasks"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"20",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"fetchTasks"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"fetchTasks"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"21",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsxs)(e.span,{className:"token spread",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token spread operator",children:"..."}),(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"props"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"22",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"23",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"24",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"25",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"26",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,n.jsx)(e.pre,{className:"language-jsx",children:(0,n.jsxs)(e.code,{className:"language-jsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"class"})," ",(0,n.jsx)(e.span,{className:"token class-name",children:"Home"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"extends"})," ",(0,n.jsxs)(e.span,{className:"token class-name",children:["React",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),"Component"]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"2",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"render"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"3",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," tasks",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," toasts",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," addToast ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"props"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"4",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"5",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"6",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"tasks",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"map"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"task"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"7",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"Task"})]}),` `]})]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"8",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"key"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"task",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"id"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"9",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"task"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"task",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"10",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"isSelected"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"selectedTodo ",(0,n.jsx)(e.span,{className:"token operator",children:"==="})," task",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"id"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"11",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"onClick"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"handleTodoClick",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"12",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"onUpdate"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"handleTodoUpdate"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"13",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"onDelete"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"handleTodoDelete"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"14",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"addToast"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"addToast",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"15",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"16",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"17",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"toasts",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"map"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"toast"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"18",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"Toast"})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"key"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"toast",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"id"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"type"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"toast",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"text"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"19",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"20",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"21",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"22",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"23",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsxs)(e.p,{children:[`\uC704 \uCF54\uB4DC\uB97C \uBCF4\uACA0\uC2B5\uB2C8\uB2E4. \uD22C\uB450 \uB9AC\uC2A4\uD2B8 \uD648\uD398\uC774\uC9C0\uC5D0\uC11C Toast\uB97C \uB744\uC6B0\uACE0, Task\uB97C \uBD88\uB7EC\uC624\uB294 \uB85C\uC9C1\uC740 \uC5EC\uB7EC \uBC88 \uC0AC\uC6A9\uB420 \uC218 \uC788\uC2B5\uB2C8\uB2E4. \uADF8\uB807\uAE30 \uB54C\uBB38\uC5D0 1) `,(0,n.jsx)(e.strong,{children:"withToast"}),"\uC640 2) ",(0,n.jsx)(e.strong,{children:"withTasks"}),` \uC758 \uB85C\uC9C1\uC744 \uC7AC\uC0AC\uC6A9\uD560 \uC218 \uC788\uB3C4\uB85D \uCEF4\uD3EC\uB10C\uD2B8\uB85C \uB9CC\uB4ED\uB2C8\uB2E4.`]}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)(e.pre,{className:"language-jsx",children:(0,n.jsx)(e.code,{className:"language-jsx code-highlight",children:(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[" ",(0,n.jsx)(e.span,{className:"token keyword module",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"default"})," ",(0,n.jsx)(e.span,{className:"token function",children:"withTasks"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token function",children:"withToast"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Home"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})})}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsxs)(e.p,{children:["\uCD5C\uC885\uC801\uC73C\uB85C Wrapper \uD615\uD0DC\uB85C \uB9CC\uB4E4\uACE0, \uC800\uD76C\uB294 ",(0,n.jsx)(e.strong,{children:"Home"}),"\uC5D0 \uB450 \uAC00\uC9C0 \uB85C\uC9C1\uC744 \uD65C\uC6A9\uD560 \uC218 \uC788\uAC8C \uB418\uC5C8\uC2B5\uB2C8\uB2E4."]}),` `,(0,n.jsx)(e.p,{children:"\uC704\uC5D0\uC11C \uC0AC\uC6A9\uD55C HOC \uD328\uD134\uC774\uB780, \uD2B9\uC815 \uCEF4\uD3EC\uB10C\uD2B8\uC758 \uB85C\uC9C1\uC774 \uC5EC\uB7EC \uCEF4\uD3EC\uB10C\uD2B8\uC5D0\uC11C \uC0AC\uC6A9\uB420 \uACBD\uC6B0\uB97C \uB300\uBE44\uD574\uC11C \uB85C\uC9C1\uC744 \uBD84\uB9AC\uD55C \uB4A4, Wrapper \uD615\uD0DC\uB85C \uAC10\uC2F8 \uD558\uB098\uC758 \uD398\uC774\uC9C0 \uCEF4\uD3EC\uB10C\uD2B8\uB97C \uAD6C\uCD95\uD558\uB294 \uAC83\uC744 \uB9D0\uD569\uB2C8\uB2E4."}),` `,(0,n.jsx)(e.p,{children:"\uD558\uC9C0\uB9CC, \uBC18\uBCF5\uB418\uB294 \uB85C\uC9C1\uC744 \uC5EC\uB7EC \uACC4\uCE35\uC744 \uD1B5\uD574 \uC804\uB2EC\uD558\uB294 \uC774\uB7EC\uD55C \uBC29\uBC95\uC5D4 \uBB38\uC81C\uAC00 \uC874\uC7AC\uD558\uB294\uB370\uC694. \uBC14\uB85C \uB798\uD37C \uC9C0\uC625 (Wrapper Hell)\uC785\uB2C8\uB2E4. \uC7AC\uC0AC\uC6A9\uB418\uB294 \uB85C\uC9C1\uC744 Wrapper \uD615\uD0DC\uB85C \uB458\uB7EC\uC2F8\uB294\uB370, \uB9CC\uC57D \uC774 \uAC1C\uC218\uAC00 \uB298\uC5B4\uB098\uB294 \uACBD\uC6B0 \uC544\uB798\uC640 \uAC19\uC740 \uCD5C\uC545\uC758 \uC911\uCCA9 \uD615\uD0DC\uAC00 \uB420 \uC218\uB3C4 \uC788\uC2B5\uB2C8\uB2E4."}),` `,(0,n.jsx)(e.p,{children:"\uC774\uB294 \uD558\uB098\uC758 \uD398\uC774\uC9C0\uC5D0\uC11C \uC0AC\uC6A9\uB41C \uB85C\uC9C1\uC744 \uCC3E\uAE30 \uC704\uD574 \uC218 \uB9CE\uC740 \uACC4\uCE35\uC744 \uAC80\uC0C9\uD574\uC57C\uD558\uAE30 \uB54C\uBB38\uC5D0, \uAC00\uB3C5\uC131\uC774 \uB9E4\uC6B0 \uC548 \uC88B\uC2B5\uB2C8\uB2E4. \uB610\uD55C \uC720\uC9C0\uBCF4\uC218\uC801\uC778 \uCE21\uBA74\uC5D0\uC11C\uB3C4 \uB85C\uC9C1\uC744 \uD30C\uC545\uD560 \uC218 \uC5B4\uB824\uC6B8 \uC218 \uC788\uACA0\uB124\uC694."}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:"https://github.com/user-attachments/assets/314c6fd7-23d3-41a1-a7a9-02569dcfb08f",alt:"\u1109\u1173\u110F\u1173\u1105\u1175\u11AB\u1109\u1163\u11BA 2024-10-26 \u110B\u1169\u1112\u116E 8.30.56.png"})}),` `,(0,n.jsx)("br",{}),` `," ",` `,(0,n.jsx)(e.p,{children:"\uC774\uB7EC\uD55C \uBCF5\uC7A1\uD55C \uD615\uD0DC\uC758 \uC7AC\uC0AC\uC6A9 \uAD6C\uC870\uB97C \uD574\uACB0\uD558\uAE30 \uC704\uD574, \uC7AC\uC0AC\uC6A9\uB418\uB294 \uB85C\uC9C1\uC744 \uC0C1\uD0DC\uB85C \uCD94\uC0C1\uD654\uD558\uB294 Hook\uC774 \uB4F1\uC7A5\uD558\uAC8C \uB418\uC5C8\uC2B5\uB2C8\uB2E4. \uC774\uB97C \uD1B5\uD574 \uC5EC\uB7EC \uACC4\uCE35\uC5D0 \uAC78\uCE5C \uBCF5\uC7A1\uD55C \uBCC0\uD654 \uC5C6\uC774 \uC0C1\uD0DC \uAD00\uB828 \uB85C\uC9C1\uC744 \uC7AC\uC0AC\uC6A9\uD560 \uC218 \uC788\uAC8C \uB418\uC5C8\uC2B5\uB2C8\uB2E4."}),` `,(0,n.jsx)(e.pre,{className:"language-jsx",children:(0,n.jsxs)(e.code,{className:"language-jsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token function-variable function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Home"})})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"2",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),"todoList",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," setTodoList",(0,n.jsx)(e.span,{className:"token punctuation",children:"]"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"useState"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"3",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),"toastPopup",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," setToastPopup",(0,n.jsx)(e.span,{className:"token punctuation",children:"]"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"useState"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"4",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"5",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," fetchTasks ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"useCallback"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token keyword",children:"async"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"6",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," response ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"await"})," ",(0,n.jsx)(e.span,{className:"token function",children:"getTasks"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"7",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"setTodoList"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"response",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"sort"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsxs)(e.span,{className:"token parameter",children:["a",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," b"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," b",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"createdDate"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," a",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"createdDate"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"8",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"9",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"10",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"useEffect"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"11",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"fetchTasks"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"12",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),"fetchTasks",(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"13",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"14",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," addToast ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"useCallback"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"text"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"15",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," newToast ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"id"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token known-class-name class-name",children:"Date"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"now"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," text",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"isPopup"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token boolean",children:"true"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"16",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"setToastPopup"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"prevPopups"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token spread operator",children:"..."}),"prevPopups",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," newToast",(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"17",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"18",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"// 3\uCD08 \uD6C4\uC5D0 \uD574\uB2F9 \uD1A0\uC2A4\uD2B8\uB97C \uC81C\uAC70"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"19",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"setTimeout"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"20",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"setToastPopup"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"prevPopups"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"21",children:[" prevPopups",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"filter"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"popup"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," popup",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"id"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"!=="})," newToast",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"id"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"22",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"23",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"3000"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"24",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"25",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"26",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"27",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"28",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"29",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"todoList",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"map"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"todo"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"30",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"Todo"})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"key"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"todo",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"id"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"task"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"todo",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"31",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"32",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"33",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"34",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"toastPopup",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"map"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsxs)(e.span,{className:"token parameter",children:["toast",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," index"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"35",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"Toast"})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"toastType"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"toast",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"text"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"key"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"index",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"onClick"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"addToast",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"36",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"37",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"38",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"39",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"40",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"41",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"42",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"default"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Home"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,n.jsx)(e.p,{children:"\uC704 \uCF54\uB4DC\uB294 \uD6C5\uC744 \uC774\uC6A9\uD55C \uC775\uC219\uD55C \uD615\uD0DC\uC758 \uAD6C\uC870\uC785\uB2C8\uB2E4. \uC704\uC758 HOC \uD328\uD134\uACFC \uB2E4\uB974\uAC8C \uB85C\uC9C1\uC744 \uD558\uB098\uC758 \uD30C\uC77C \uC548\uC5D0 \uAD00\uB9AC\uD568\uC73C\uB85C\uC368, \uCF54\uB4DC \uAC1C\uBCC4\uC758 \uC0C1\uD0DC\uB97C \uD30C\uC545\uD558\uAE30 \uB354 \uC26C\uC6CC\uC84C\uB124\uC694."}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)(e.h3,{children:"2. \uBCF5\uC7A1\uD55C \uC0DD\uBA85 \uC8FC\uAE30 \uBA54\uC11C\uB4DC"}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:"https://github.com/user-attachments/assets/b80b208d-5f31-4a50-81ee-fc57dd8ce197",alt:"\u1109\u1173\u110F\u1173\u1105\u1175\u11AB\u1109\u1163\u11BA 2024-10-26 \u110B\u1169\u1112\u116E 8.30.33.png"})}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)(e.p,{children:"\uC6B0\uB9AC\uB294 \uB54C\uB85C \uC0AC\uC774\uB4DC \uC774\uD399\uD2B8\uB97C \uC77C\uC73C\uD0A4\uB294, \uC989 \uB2E4\uB978 \uCEF4\uD3EC\uB10C\uD2B8\uC5D0 \uC601\uD5A5\uC744 \uC8FC\uB294 \uB370\uC774\uD130\uB97C \uB85C\uB529\uD558\uACE0 DOM\uC744 \uC870\uC791\uD558\uB294 \uC791\uC5C5\uC744 \uD558\uAC8C \uB429\uB2C8\uB2E4. \uC774\uB7EC\uD55C \uC791\uC5C5\uC744 \uC0DD\uBA85 \uC8FC\uAE30 \uBA54\uC11C\uB4DC\uB97C \uD1B5\uD574 \uAD00\uB9AC\uD558\uB294\uB370\uC694."}),` `,(0,n.jsx)(e.p,{children:"Hook\uC774 \uD0C4\uC0DD\uD558\uAE30 \uC774\uC804\uC5D0\uB294 3\uAC00\uC9C0 \uC0DD\uBA85 \uC8FC\uAE30 \uBA54\uC11C\uB4DC\uB97C \uD65C\uC6A9\uD574 \uC0AC\uC774\uB4DC \uC774\uD399\uD2B8\uB97C \uAD00\uB9AC\uD588\uC2B5\uB2C8\uB2E4. \uC544\uB798 \uCF54\uB4DC\uCC98\uB7FC \uB9D0\uC774\uC8E0."}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)(e.pre,{className:"language-jsx",children:(0,n.jsxs)(e.code,{className:"language-jsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"class"})," ",(0,n.jsx)(e.span,{className:"token class-name",children:"ComplexComponent"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"extends"})," ",(0,n.jsxs)(e.span,{className:"token class-name",children:["React",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),"Component"]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"2",children:[" state ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"user"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token keyword null nil",children:"null"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"posts"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"3",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"4",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"componentDidMount"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"5",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"fetchUser"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"6",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"fetchPosts"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"7",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"8",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"9",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"componentDidUpdate"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"prevProps"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"10",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"if"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"props"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"userId"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"!=="})," prevProps",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"userId"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"11",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"fetchUser"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"12",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"fetchPosts"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"13",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"14",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"15",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"16",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"fetchUser"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"17",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"// \uC0AC\uC6A9\uC790 \uB370\uC774\uD130 \uAC00\uC838\uC624\uAE30"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"18",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"19",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"20",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"fetchPosts"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"21",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"// \uAC8C\uC2DC\uBB3C \uB370\uC774\uD130 \uAC00\uC838\uC624\uAE30"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"22",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"23",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"24",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"render"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"25",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"// \uB80C\uB354\uB9C1 \uB85C\uC9C1"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"26",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"27",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsxs)(e.p,{children:["\uC704\uB294 \uCEF4\uD3EC\uB10C\uD2B8\uAC00 ",(0,n.jsx)(e.code,{children:"\uC0DD\uC131(componentDidMount)"}),"\uB418\uACE0, ",(0,n.jsx)(e.code,{children:"\uC5C5\uB370\uC774\uD2B8(componentDidUpdate)"}),` \uB418\uACE0, `,(0,n.jsx)(e.code,{children:"\uC81C\uAC70(componentWillUnmount)"}),`\uD560 \uB54C \uD2B9\uC815\uD55C \uB85C\uC9C1\uC744 \uC218\uD589\uD558\uAC8C \uD558\uAE30 \uC704\uD574 \uC0DD\uBA85 \uC8FC\uAE30\uB97C \uD65C\uC6A9\uD55C \uCF54\uB4DC \uC785\uB2C8\uB2E4.`]}),` `,(0,n.jsxs)(e.p,{children:["\uD558\uC9C0\uB9CC \uC5EC\uAE30\uC11C ",(0,n.jsx)(e.strong,{children:"\uC0AC\uC6A9\uC790\uC758 \uB370\uC774\uD130\uB97C \uAC00\uC838\uC624\uACE0(fetchUser)"}),", ",(0,n.jsx)(e.strong,{children:"\uAC8C\uC2DC\uBB3C\uC744 \uAC00\uC838\uC624\uB294 \uB85C\uC9C1(fetchPosts)"})," \uC774 \uACF5\uD1B5\uB41C \uC0DD\uBA85 \uC8FC\uAE30 \uC548\uC5D0\uC11C \uAD00\uB9AC\uB418\uAE30 \uB54C\uBB38\uC5D0, \uAD00\uB828 \uC5C6\uB294 \uCF54\uB4DC\uAC00 \uC11E\uC774\uB294 \uBB38\uC81C\uB97C \uBC1C\uACAC\uD560 \uC218 \uC788\uC8E0."]}),` `,(0,n.jsx)(e.p,{children:"\uADF8\uB807\uB2E4\uBA74, useEffect Hook\uC744 \uC0AC\uC6A9\uD574 \uAD00\uC2EC\uC0AC\uB97C \uBD84\uB9AC\uD574\uBCF4\uACA0\uC2B5\uB2C8\uB2E4."}),` `,(0,n.jsx)("br",{}),` `," ",` `,(0,n.jsx)(e.pre,{className:"language-jsx",children:(0,n.jsxs)(e.code,{className:"language-jsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"function"})," ",(0,n.jsx)(e.span,{className:"token function",children:"useUser"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"userId"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"2",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),"user",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," setUser",(0,n.jsx)(e.span,{className:"token punctuation",children:"]"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"useState"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token keyword null nil",children:"null"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"3",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"useEffect"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"4",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"// \uC0AC\uC6A9\uC790 \uB370\uC774\uD130 \uAC00\uC838\uC624\uAE30"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"5",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),"userId",(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"6",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," user",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"7",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"8",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"9",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"function"})," ",(0,n.jsx)(e.span,{className:"token function",children:"usePosts"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"userId"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"10",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),"posts",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," setPosts",(0,n.jsx)(e.span,{className:"token punctuation",children:"]"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"useState"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"11",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"useEffect"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"12",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"// \uAC8C\uC2DC\uBB3C \uB370\uC774\uD130 \uAC00\uC838\uC624\uAE30"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"13",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),"userId",(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"14",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," posts",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"15",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)(e.p,{children:"useEffect hook\uC744 \uD1B5\uD574 \uC0DD\uBA85 \uC8FC\uAE30 \uB2E8\uC704\uAC00 \uC544\uB2CC, \uAE30\uB2A5 \uBCC4\uB85C \uB80C\uB354\uB9C1 \uC8FC\uAE30\uB97C \uAD00\uB9AC\uD560 \uC218 \uC788\uAC8C \uB418\uC5C8\uC2B5\uB2C8\uB2E4. \uC774\uB85C\uC368 \uD558\uB098\uC758 \uD568\uC218 \uC548\uC5D0 \uD558\uB098\uC758 \uAE30\uB2A5\uC744 \uB2F4\uB2F9\uD558\uAC8C \uD558\uB294 \uBB34\uACB0\uC131\uC744 \uC9C0\uD0AC \uC218 \uC788\uAC8C \uB41C\uAC70\uC8E0!"}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)(e.h3,{children:"3. Class \uAC1C\uB150\uC740 \uBCF5\uC7A1\uD574"}),` `,(0,n.jsx)(e.p,{children:"class\uB97C \uD1B5\uD574 click \uC774\uBCA4\uD2B8\uB97C \uAC10\uC9C0\uD558\uB294 \uD568\uC218\uB97C \uB9CC\uB4E4\uC5B4 state\uB97C \uAD00\uB9AC\uD558\uB294 \uCF54\uB4DC\uB97C \uC9DC\uBCF4\uACA0\uC2B5\uB2C8\uB2E4."}),` `,(0,n.jsx)(e.pre,{className:"language-jsx",children:(0,n.jsxs)(e.code,{className:"language-jsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"class"})," ",(0,n.jsx)(e.span,{className:"token class-name",children:"Example"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"extends"})," ",(0,n.jsxs)(e.span,{className:"token class-name",children:["React",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),"Component"]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"2",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"handleClick"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"3",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"setState"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"clicked"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token boolean",children:"true"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"})," ",(0,n.jsx)(e.span,{className:"token comment",children:"// \uC624\uB958: Cannot read property 'setState' of undefined"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"4",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"5",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"6",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"render"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"7",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"button"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"onClick"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"handleClick"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:"Click me"}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"8",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"9",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,n.jsxs)(e.p,{children:["\uC704 \uCF54\uB4DC\uC5D0\uC11C ",(0,n.jsx)(e.code,{children:"handleClick"})," \uBA54\uC11C\uB4DC \uC548\uC5D0\uC11C this\uB97C \uD1B5\uD574 setState\uC5D0 \uC811\uADFC\uD558\uB824 \uD588\uC9C0\uB9CC \uC624\uB958\uAC00 \uB098\uB294 \uAC83\uC744 \uBCFC \uC218 \uC788\uB294\uB370\uC694. \uC774\uB294 \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC \uBA54\uC11C\uB4DC \uC548\uC5D0\uC11C this\uB97C \uD1B5\uD574 setState\uB97C \uC811\uADFC\uD560 \uC218 \uC5C6\uAE30 \uB54C\uBB38\uC778\uB370\uC694."]}),` `,(0,n.jsx)(e.p,{children:"this\uAC00 \uAC01\uAC01 \uC5B4\uB5BB\uAC8C \uBC14\uC778\uB529\uD558\uB294\uC9C0\uB97C \uC54C\uC544\uBCF4\uACA0\uC2B5\uB2C8\uB2E4."}),` `,(0,n.jsx)(e.p,{children:"class \uC548\uC758, \uC804\uC5ED \uC0C1\uD669\uC5D0\uC11C\uB294 this\uB294 class \uC790\uCCB4\uB97C \uBC14\uC778\uB529\uD558\uACE0 \uC788\uAE30 \uB54C\uBB38\uC5D0 setState\uC5D0 \uC811\uADFC\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4."}),` `,(0,n.jsx)("br",{}),` `," ",` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)(e.p,{children:"\uBC18\uBA74, \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC \uBA54\uC11C\uB4DC \uC548\uC5D0\uC11C\uB294 this\uB294 class \uC778\uC2A4\uD134\uC2A4\uAC00 \uC544\uB2CC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC\uB97C \uBC14\uC778\uB529\uD558\uACE0 \uC788\uAE30 \uB54C\uBB38\uC5D0 this\uB97C \uD1B5\uD574 class \uC778\uC2A4\uD134\uC2A4\uC778 setState\uC5D0 \uC811\uADFC\uD560 \uC218 \uC5C6\uAC8C \uB429\uB2C8\uB2E4."}),` `,(0,n.jsx)(e.p,{children:"\uC704 \uC624\uB958\uB97C \uD574\uACB0\uD558\uAE30 \uC704\uD574\uC11C\uB294 \uC9C1\uC811 \uC0DD\uC131\uC790\uC5D0\uC11C \uBA54\uC11C\uB4DC\uB97C \uBC14\uC778\uB529\uD574\uC8FC\uAC70\uB098 \uD654\uC0B4\uD45C \uD568\uC218\uB97C \uC0AC\uC6A9\uD574\uC57C\uD569\uB2C8\uB2E4. \uC544\uB798\uCC98\uB7FC \uB9D0\uC774\uC8E0."}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)(e.pre,{className:"language-jsx",children:(0,n.jsxs)(e.code,{className:"language-jsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"class"})," ",(0,n.jsx)(e.span,{className:"token class-name",children:"Example"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"extends"})," ",(0,n.jsxs)(e.span,{className:"token class-name",children:["React",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),"Component"]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"2",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"constructor"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"props"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"3",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"super"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"props",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"4",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"handleClick"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"handleClick"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"bind"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"5",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"6",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"handleClick"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"7",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"setState"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"clicked"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token boolean",children:"true"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"})," ",(0,n.jsx)(e.span,{className:"token comment",children:"// \uC815\uC0C1 \uC791\uB3D9"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"8",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"9",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"10",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"render"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"11",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"button"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"onClick"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"handleClick"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:"Click me"}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"12",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"13",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)(e.p,{children:"\uD558\uC9C0\uB9CC \uC774\uB807\uAC8C \uC9C1\uC811 \uBA54\uC11C\uB4DC\uB97C \uC0DD\uC131\uC790\uC5D0\uC11C \uBC14\uC778\uB529\uD558\uAC8C \uB418\uBA74, \uC544\uB798\uCC98\uB7FC \uBC29\uB300\uD55C \uC591\uC758 \uCF54\uB4DC\uB97C \uB9C8\uC8FC\uCE58\uAC8C \uB420 \uC218\uB3C4 \uC788\uC2B5\uB2C8\uB2E4. \uC0C1\uC0C1\uB9CC \uD574\uB3C4 \uC190\uAC00\uB77D\uC774 \uC544\uD504\uB124\uC694 \u{1F972}"}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)(e.pre,{className:"language-jsx",children:(0,n.jsxs)(e.code,{className:"language-jsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"class"})," ",(0,n.jsx)(e.span,{className:"token class-name",children:"ConfusingHome"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"extends"})," ",(0,n.jsxs)(e.span,{className:"token class-name",children:["React",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),"Component"]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"2",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"constructor"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"props"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"3",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"super"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"props",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"4",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"state"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"5",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"todoList"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"6",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"selectedTodo"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token keyword null nil",children:"null"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"7",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"isOldest"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token boolean",children:"true"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"8",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"toastPopup"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"9",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"10",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"handleInputComplete"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"handleInputComplete"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"bind"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"11",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"handleTodoClick"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"handleTodoClick"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"bind"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"12",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"handleTodoUpdate"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"handleTodoUpdate"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"bind"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"13",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"handleTodoDelete"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"handleTodoDelete"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"bind"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"14",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"handleTodoAllDelete"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"handleTodoAllDelete"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"bind"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"15",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"handleOrderChange"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"handleOrderChange"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"bind"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"16",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"addToast"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"addToast"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"bind"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token keyword",children:"this"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"17",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,n.jsx)(e.p,{children:"\uC774\uB7EC\uD55C \uD63C\uC7A1\uD55C Class\uC5D0\uC11C \uBC97\uC5B4\uB098, Hook\uC740 Class \uC5C6\uC774 React \uAE30\uB2A5\uC744 \uC0AC\uC6A9\uD558\uB294 \uBC29\uBC95\uC744 \uC81C\uC2DC\uD569\uB2C8\uB2E4. \uC624\uD788\uB824 \uD568\uC218\uC5D0 \uB354 \uAC00\uAE4C\uC6B4 React \uCEF4\uD3EC\uB10C\uD2B8\uB97C \uBA85\uB839\uD615 \uCF54\uB4DC\uB85C \uAC04\uACB0\uD558\uAC8C \uC0AC\uC6A9\uD560 \uC218 \uC788\uAC8C \uB418\uC5C8\uC2B5\uB2C8\uB2E4."}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)(e.h2,{children:"2. Hook\uC740 \uC644\uBCBD\uD560\uAE4C?"}),` `,(0,n.jsxs)(e.p,{children:["React 16.8\uC5D0 \uB3C4\uC785\uB41C \uC774\uD6C4\uB85C, Hook\uC740 \uD568\uC218\uD615 \uCEF4\uD3EC\uB10C\uD2B8\uC5D0\uC11C \uBE7C\uB193\uC744 \uC218 \uC5C6\uB294 \uC874\uC7AC\uAC00 \uB418\uC5C8\uC2B5\uB2C8\uB2E4. \uD558\uC9C0\uB9CC \uB9CE\uC740 \uAC1C\uBC1C\uC790 \uC0AC\uC774\uC5D0\uC11C Hook\uC740 \uB728\uAC70\uC6B4 \uAC10\uC790\uC778\uB370\uC694. ",(0,n.jsx)(e.a,{href:"https://ui.toast.com/posts/ko_20200922",children:"\uC544\uB798 \uAE00"}),"\uC744 \uD1B5\uD574\uC11C React\uAC00 \uC81C\uC2DC\uD55C 3\uAC00\uC9C0 \uBB38\uC81C\uC5D0 \uB300\uD55C Hook\uC758 \uC7A5\uC810\uC744 \uBC18\uBC15\uD558\uB294 \uB0B4\uC6A9\uC744 \uD655\uC778\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4."]}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.img,{src:"https://github.com/user-attachments/assets/67694891-9088-4f60-9186-8c8b3c17fdb9",alt:"\u1109\u1173\u110F\u1173\u1105\u1175\u11AB\u1109\u1163\u11BA 2024-10-26 \u110B\u1169\u1112\u116E 8.31.39.png"}),` \uB610\uD55C React Pain Point \uC124\uBB38\uC5D0\uC11C \uBCFC \uC218 \uC788\uB4EF\uC774, \uB9CE\uC740 \uC0AC\uB78C\uC774 useEffect, useCallback\uACFC \uAC19\uC740 Hook\uC5D0 \uBD88\uB9CC\uC744 \uAC00\uC9C0\uACE0 \uC788\uB294 \uAC78 \uC54C \uC218 \uC788\uB294\uB370\uC694.`]}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)(e.p,{children:"Hook\uC5D0 \uB300\uD574\uC11C \uC0DD\uAC01\uD574\uBCFC \uC810\uC740 \uB2E4\uC591\uD558\uAC8C \uC788\uC744 \uAC83 \uAC19\uC2B5\uB2C8\uB2E4."}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"useEffect\uB294 \uC0DD\uBA85 \uC8FC\uAE30\uB97C \uACFC\uB3C4\uD558\uAC8C \uCD94\uC0C1\uD654\uD558\uAE30 \uB54C\uBB38\uC5D0 \uC624\uD788\uB824 \uC0DD\uBA85 \uC8FC\uAE30\uC801\uC778 \uD750\uB984\uC744 \uD30C\uC545\uD558\uAE30 \uC5B4\uB824\uC6CC\uC84C\uB2E4\uB294 \uC810"}),` `,(0,n.jsx)(e.li,{children:"useEffect\uC758 \uACFC\uB3C4\uD55C \uB9AC\uB80C\uB354\uB9C1"}),` `,(0,n.jsx)(e.li,{children:"\uD544\uC694\uD558\uC9C0 \uC54A\uC740 api \uD639\uC740 Hook\uC758 \uADF8 \uC678 \uD568\uC218\uAE4C\uC9C0 \uBD88\uB7EC\uC640 \uC0AC\uC6A9\uD558\uAC8C \uB41C\uB2E4\uB294 \uC810"}),` `,(0,n.jsx)(e.li,{children:"\uC815\uB9BD\uB41C class \uAC1C\uB150\uC744 \uAE30\uD53C\uD558\uB294 \uC9C0\uB098\uCE5C \uD568\uC218\uD615 \uCEF4\uD3EC\uB10C\uD2B8 \uCD94\uAD6C"}),` `]}),` `,(0,n.jsx)(e.p,{children:"\uB2E4\uC591\uD55C \uC7C1\uC810\uC774 \uC5BD\uD600\uC788\uB294 \uBB38\uC81C\uC774\uC9C0\uB9CC, \uAC1C\uBC1C\uC790\uC758 \uC785\uC7A5\uC5D0\uC11C \uCD5C\uB300\uD55C \uD6A8\uC728\uC801\uC73C\uB85C \uAD6C\uD604\uD560 \uC218 \uC788\uB3C4\uB85D Hook\uC744 \uC798 \uD65C\uC6A9\uD558\uB294 \uAC83\uB3C4 \uD544\uC694\uD560 \uAC83 \uAC19\uC2B5\uB2C8\uB2E4."}),` `,(0,n.jsx)(e.p,{children:"\uADF8\uB7FC \uC774\uB807\uAC8C Hook\uC758 \uB4F1\uC7A5\uBC30\uACBD\uC5D0 \uAD00\uD55C \uAE00\uC744 \uB9C8\uCE58\uACA0\uC2B5\uB2C8\uB2E4."})]})}function f(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,Object.assign({},a,{children:(0,n.jsx)(r,a)})):r(a)}var x=f;return g(T);})(); ;return Component;