var Component=(()=>{var m=Object.create;var c=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var g=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),u=(a,e)=>{for(var n in e)c(a,n,{get:e[n],enumerable:!0})},r=(a,e,n,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of p(e))!j.call(a,l)&&l!==n&&c(a,l,{get:()=>e[l],enumerable:!(i=o(e,l))||i.enumerable});return a};var v=(a,e,n)=>(n=a!=null?m(N(a)):{},r(e||!a||!a.__esModule?c(n,"default",{value:a,enumerable:!0}):n,a)),M=a=>r(c({},"__esModule",{value:!0}),a);var d=g((y,h)=>{h.exports=_jsx_runtime});var f={};u(f,{default:()=>_,frontmatter:()=>w});var s=v(d()),w={title:"\uB9AC\uC561\uD2B8 \uCD5C\uC801\uD654 \uD558\uAE30",date:new Date(16720128e5),summary:"React.Memo\uB97C \uC0AC\uC6A9\uD558\uC5EC \uC5B4\uB5BB\uAC8C \uCD5C\uC801\uD654\uB97C \uC2DC\uD0AC\uC218 \uC788\uC744\uAE4C?",tags:["react","\uCD5C\uC801\uD654","react.memo"]};function t(a){let e=Object.assign({p:"p",code:"code",h1:"h1",a:"a",span:"span",h2:"h2",pre:"pre",h3:"h3",ol:"ol",li:"li"},a.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(e.p,{children:["\uB9AC\uC561\uD2B8\uB97C \uC0AC\uC6A9\uD558\uB294 \uAC1C\uBC1C\uC790\uAC00 \uD560 \uC218 \uC788\uB294 \uCD5C\uC801\uD654\uC5D4 \uBB34\uC5C7\uC774 \uC788\uC744\uAE4C? \uBC14\uB85C ",(0,s.jsx)(e.code,{children:"\uAE30\uC874 \uCEF4\uD3EC\uB10C\uD2B8\uC758 UI\uB97C \uC7AC\uC0AC\uC6A9\uD560 \uC9C0 \uD655\uC778\uD558\uB294 \uBD80\uBD84"}),"\uACFC ",(0,s.jsx)(e.code,{children:"\uC0C8\uB85C\uC6B4 Virtual DOM\uC744 \uC0DD\uC131\uD558\uB294 \uBD80\uBD84"}),"\uC774\uB2E4."]}),` `,(0,s.jsxs)(e.p,{children:[(0,s.jsx)(e.code,{children:"\uAE30\uC874 \uCEF4\uD3EC\uB10C\uD2B8\uC758 UI\uB97C \uC7AC\uC0AC\uC6A9\uD560 \uC9C0 \uD655\uC778\uD558\uB294 \uBD80\uBD84"})," \uC758 \uACBD\uC6B0\uB294 \uB9AC\uB80C\uB354\uB9C1\uC774 \uB420 \uCEF4\uD3EC\uB10C\uD2B8\uC758 UI\uAC00 \uC774\uC804\uC758 UI\uC640 \uB3D9\uC77C\uD558\uB2E4\uACE0 \uD310\uB2E8\uB418\uB294 \uACBD\uC6B0 \uC0C8\uB86D\uAC8C \uCEF4\uD3EC\uB10C\uD2B8 \uD568\uC218\uB97C \uD638\uCD9C\uD558\uC9C0 \uC54A\uACE0 \uC774\uC804\uC758 \uACB0\uACFC\uAC12\uC744 \uADF8\uB300\uB85C \uC0AC\uC6A9\uD558\uB3C4\uB85D \uD568\uC73C\uB85C \uCD5C\uC801\uD654\uB97C \uC218\uD589\uD55C\uB2E4."]}),` `,(0,s.jsxs)(e.p,{children:[(0,s.jsx)(e.code,{children:"\uC0C8\uB85C\uC6B4 Virtual DOM\uC744 \uC0DD\uC131\uD558\uB294 \uBD80\uBD84"})," \uC758 \uACBD\uC6B0\uB294 \uCEF4\uD3EC\uB10C\uD2B8 \uD568\uC218\uAC00 \uD638\uCD9C\uB418\uBA74\uC11C \uB9CC\uB4E4\uC5B4\uC9C8 Virtual DOM\uC758 \uD615\uD0DC\uB97C \uBE44\uAD50\uC801 \uCC28\uC774\uAC00 \uC801\uC740 \uD615\uD0DC\uB85C \uB9CC\uB4E4\uC5B4\uC9C0\uB3C4\uB85D \uD558\uB294 \uAC83\uC774\uB2E4."]}),` `,(0,s.jsxs)(e.h1,{id:"reactmemo",children:[(0,s.jsx)(e.a,{className:"anchor",href:"#reactmemo",children:(0,s.jsx)(e.span,{className:"icon icon-link"})}),"React.Memo"]}),` `,(0,s.jsx)(e.p,{children:"\uB9AC\uC561\uD2B8\uB294 state\uAC00 \uBCC0\uD560 \uACBD\uC6B0 \uD574\uB2F9 \uCEF4\uD3EC\uB10C\uD2B8\uC640 \uD558\uC704\uC758 \uCEF4\uD3EC\uB10C\uD2B8 \uBAA8\uB450 \uB9AC\uB80C\uB354\uB9C1\uC744 \uD55C\uB2E4. \uADF8\uB7F0\uB370 state\uAC00 \uBCC0\uD55C \uCEF4\uD3EC\uB10C\uD2B8\uC758 \uACBD\uC6B0 \uB2F9\uC5F0\uD788 UI\uC758 \uBCC0\uD654\uAC00 \uC788\uC744 \uAC83\uC774\uAE30\uC5D0 \uB9AC\uB80C\uB354\uB9C1\uC744 \uD574\uC57C \uD558\uC9C0\uB9CC, \uD558\uC704 \uCEF4\uD3EC\uB10C\uD2B8\uC758 \uACBD\uC6B0\uC5D0\uB294 props\uAC00 \uBCC0\uD558\uC9C0 \uC54A\uC558\uB2E4\uBA74 \uD574\uB2F9 \uD558\uC704 \uCEF4\uD3EC\uB10C\uD2B8\uB294 \uBCC0\uD654\uAC00 \uC5C6\uC744 \uC218\uB3C4 \uC788\uB2E4. \uC774\uB7F0 \uACBD\uC6B0\uC5D0\uB294 \uAD73\uC774 \uC0C8\uB85C\uC6B4 \uCEF4\uD3EC\uB10C\uD2B8 \uD568\uC218\uB97C \uD638\uCD9C\uD560 \uD544\uC694 \uC5C6\uC774 \uC774\uC804\uC5D0 \uC800\uC7A5\uB418\uC5B4 \uC788\uB358 \uACB0\uACFC\uB97C \uADF8\uB300\uB85C \uC0AC\uC6A9\uD558\uB294 \uAC83\uC774 \uD6A8\uACFC\uC801\uC774\uB2E4."}),` `,(0,s.jsxs)(e.p,{children:["\uD558\uC9C0\uB9CC UI\uAC00 \uBCC0\uD654\uD588\uB294\uC9C0 \uB9E4\uBC88 \uB9AC\uC561\uD2B8\uAC00 \uB80C\uB354\uB9C1 \uACFC\uC815\uC5D0\uC11C \uBAA8\uB4E0 \uCEF4\uD3EC\uB10C\uD2B8 \uD2B8\uB9AC\uB97C \uC21C\uD68C\uD558\uBA74\uC11C \uAC80\uC0AC\uD558\uB294 \uAC83\uC740 \uBE44\uD6A8\uC728\uC801\uC774\uB2E4. \uADF8\uB798\uC11C \uB9AC\uC561\uD2B8\uC5D0\uC11C\uB294 \uCEF4\uD3EC\uB10C\uD2B8\uAC00 \uB9AC\uB80C\uB354\uB9C1 \uB418\uC5B4\uC57C \uD560 \uD544\uC694\uAC00 \uC788\uB294\uC9C0 \uD310\uB2E8\uD560 \uC218 \uC788\uB294 ",(0,s.jsx)(e.code,{children:"React.memo"})," \uD568\uC218\uB97C \uC81C\uACF5\uD574\uC900\uB2E4."]}),` `,(0,s.jsxs)(e.h2,{id:"reactmemo\uB780",children:[(0,s.jsx)(e.a,{className:"anchor",href:"#reactmemo\uB780",children:(0,s.jsx)(e.span,{className:"icon icon-link"})}),"React.Memo()\uB780?"]}),` `,(0,s.jsx)(e.p,{children:"React.Memo\uB294 \uACE0\uCC28 \uCEF4\uD3EC\uB10C\uD2B8(HOC, Higher-Order Component)\uC774\uB2E4. \uCEF4\uD3EC\uB10C\uD2B8\uB97C \uC778\uC790\uB85C \uBC1B\uC544, \uCEF4\uD3EC\uB10C\uD2B8\uB4E4 \uB9AC\uD134\uD574\uC900\uB2E4."}),` `,(0,s.jsx)(e.pre,{children:(0,s.jsxs)(e.code,{className:"hljs language-jsx",children:[(0,s.jsx)(e.span,{className:"hljs-keyword",children:"export"})," ",(0,s.jsx)(e.span,{className:"hljs-keyword",children:"function"})," ",(0,s.jsx)(e.span,{className:"hljs-title function_",children:"Movie"}),"(",(0,s.jsx)(e.span,{className:"hljs-params",children:"{ title, releaseDate }"}),`) { `,(0,s.jsx)(e.span,{className:"hljs-keyword",children:"return"}),` ( `,(0,s.jsxs)(e.span,{className:"xml",children:[(0,s.jsxs)(e.span,{className:"hljs-tag",children:["<",(0,s.jsx)(e.span,{className:"hljs-name",children:"div"}),">"]}),` `,(0,s.jsxs)(e.span,{className:"hljs-tag",children:["<",(0,s.jsx)(e.span,{className:"hljs-name",children:"div"}),">"]}),"Movie title: {title}",(0,s.jsxs)(e.span,{className:"hljs-tag",children:[""]}),` `,(0,s.jsxs)(e.span,{className:"hljs-tag",children:["<",(0,s.jsx)(e.span,{className:"hljs-name",children:"div"}),">"]}),"Release date: {releaseDate}",(0,s.jsxs)(e.span,{className:"hljs-tag",children:[""]}),` `,(0,s.jsxs)(e.span,{className:"hljs-tag",children:[""]})]}),` ); } `,(0,s.jsx)(e.span,{className:"hljs-keyword",children:"export"})," ",(0,s.jsx)(e.span,{className:"hljs-keyword",children:"const"})," ",(0,s.jsx)(e.span,{className:"hljs-title class_",children:"MemoizedMovie"})," = ",(0,s.jsx)(e.span,{className:"hljs-title class_",children:"React"}),".",(0,s.jsx)(e.span,{className:"hljs-title function_",children:"memo"}),"(",(0,s.jsx)(e.span,{className:"hljs-title class_",children:"Movie"}),`); `]})}),` `,(0,s.jsxs)(e.p,{children:[(0,s.jsx)(e.code,{children:"MemoizedMovie"})," \uC758 \uB80C\uB354\uB9C1 \uACB0\uACFC\uB294 \uBA54\uBAA8\uC774\uC9D5 \uB418\uC5B4\uC788\uB2E4. \uB9CC\uC57D ",(0,s.jsx)(e.code,{children:"title"}),"\uC774\uB098 ",(0,s.jsx)(e.code,{children:"releaseDate"})," \uAC19\uC740 ",(0,s.jsx)(e.code,{children:"props"}),"\uAC00 \uBCC0\uACBD \uB418\uC9C0 \uC54A\uB294\uB2E4\uBA74 \uB2E4\uC74C \uB80C\uB354\uB9C1 \uB54C \uBA54\uBAA8\uC774\uC9D5 \uB41C \uB0B4\uC6A9\uC744 \uADF8\uB300\uB85C \uC0AC\uC6A9\uD558\uAC8C \uB41C\uB2E4."]}),` `,(0,s.jsx)(e.p,{children:"\uBA54\uBAA8\uC774\uC9D5 \uD55C \uACB0\uACFC\uB97C \uC7AC\uC0AC\uC6A9 \uD568\uC73C\uB85C\uC368, \uB9AC\uC561\uD2B8\uC5D0\uC11C \uB9AC\uB80C\uB354\uB9C1\uC744 \uD560 \uB54C \uAC00\uC0C1 DOM\uC5D0\uC11C \uB2EC\uB77C\uC9C4 \uBD80\uBD84\uC744 \uD655\uC778\uD558\uC9C0 \uC54A\uC544 \uC131\uB2A5\uC0C1\uC758 \uC774\uC810\uC744 \uB204\uB9B4 \uC218 \uC788\uB2E4."}),` `,(0,s.jsx)(e.pre,{children:(0,s.jsxs)(e.code,{className:"hljs language-jsx",children:[(0,s.jsx)(e.span,{className:"hljs-comment",children:"// \uCCAB \uB80C\uB354\uC774\uB2E4. React\uB294 MemoizedMovie \uD568\uC218\uB97C \uD638\uCD9C\uD55C\uB2E4."}),` <`,(0,s.jsx)(e.span,{className:"hljs-title class_",children:"MemoizedMovie"}),` movieTitle=`,(0,s.jsx)(e.span,{className:"hljs-string",children:'"Heat"'}),` releaseDate=`,(0,s.jsx)(e.span,{className:"hljs-string",children:'"December 15, 1995"'}),` /> `,(0,s.jsx)(e.span,{className:"hljs-comment",children:"// \uB2E4\uC2DC \uB80C\uB354\uB9C1 \uD560 \uB54C React\uB294 MemoizedMovie \uD568\uC218\uB97C \uD638\uCD9C\uD558\uC9C0 \uC54A\uB294\uB2E4."}),` `,(0,s.jsx)(e.span,{className:"hljs-comment",children:"// \uB9AC\uB80C\uB354\uB9C1\uC744 \uB9C9\uB294\uB2E4."}),` `,(0,s.jsx)(e.span,{className:"xml",children:(0,s.jsxs)(e.span,{className:"hljs-tag",children:["<",(0,s.jsx)(e.span,{className:"hljs-name",children:"MemoizedMovie"}),` `,(0,s.jsx)(e.span,{className:"hljs-attr",children:"movieTitle"}),"=",(0,s.jsx)(e.span,{className:"hljs-string",children:'"Heat"'}),` `,(0,s.jsx)(e.span,{className:"hljs-attr",children:"releaseDate"}),"=",(0,s.jsx)(e.span,{className:"hljs-string",children:'"December 15, 1995"'}),` />`]})}),` `]})}),` `,(0,s.jsxs)(e.p,{children:["React.Memo\uB294 props \uD639\uC740 props\uC758 \uAC1D\uCCB4\uB97C \uBE44\uAD50\uD560 \uB54C \uC595\uC740(shallow) \uBE44\uAD50\uB97C \uD55C\uB2E4. \uBE44\uAD50 \uBC29\uC2DD\uC744 \uC218\uC815\uD558\uACE0 \uC2F6\uB2E4\uBA74 ",(0,s.jsx)(e.code,{children:"React.Memo()"})," \uB450 \uBC88\uC9F8 \uB9E4\uAC1C\uBCC0\uC218\uB85C \uBE44\uAD50\uD568\uC218\uB97C \uB9CC\uB4E4\uC5B4 \uB118\uACA8\uC8FC\uBA74 \uB41C\uB2E4."]}),` `,(0,s.jsx)(e.pre,{children:(0,s.jsxs)(e.code,{className:"hljs language-jsx",children:[(0,s.jsx)(e.span,{className:"hljs-keyword",children:"function"})," ",(0,s.jsx)(e.span,{className:"hljs-title function_",children:"moviePropsAreEqual"}),"(",(0,s.jsx)(e.span,{className:"hljs-params",children:"prevMovie, nextMovie"}),`) { `,(0,s.jsx)(e.span,{className:"hljs-keyword",children:"return"})," prevMovie.",(0,s.jsx)(e.span,{className:"hljs-property",children:"title"})," === nextMovie.",(0,s.jsx)(e.span,{className:"hljs-property",children:"title"})," && prevMovie.",(0,s.jsx)(e.span,{className:"hljs-property",children:"releaseDate"})," === nextMovie.",(0,s.jsx)(e.span,{className:"hljs-property",children:"releaseDate"}),`; } `,(0,s.jsx)(e.span,{className:"hljs-keyword",children:"const"})," ",(0,s.jsx)(e.span,{className:"hljs-title class_",children:"MemoizedMovie2"})," = ",(0,s.jsx)(e.span,{className:"hljs-title class_",children:"React"}),".",(0,s.jsx)(e.span,{className:"hljs-title function_",children:"memo"}),"(",(0,s.jsx)(e.span,{className:"hljs-title class_",children:"Movie"}),`, moviePropsAreEqual); `]})}),` `,(0,s.jsxs)(e.p,{children:[(0,s.jsx)(e.code,{children:"moviePropsAreEqual()"}),"\uD568\uC218\uB294 \uC774\uC804\xA0",(0,s.jsx)(e.code,{children:"props"}),"\uC640 \uD604\uC7AC\xA0",(0,s.jsx)(e.code,{children:"props"}),"\uAC00 \uAC19\uB2E4\uBA74\xA0",(0,s.jsx)(e.code,{children:"true"}),"\uB97C \uBC18\uD658\uD560 \uAC83\uC774\uB2E4."]}),` `,(0,s.jsxs)(e.h3,{id:"props\uB85C-\uCF5C\uBC31-\uD568\uC218\uAC00-\uB118\uC5B4\uAC00\uB294-\uACBD\uC6B0",children:[(0,s.jsx)(e.a,{className:"anchor",href:"#props\uB85C-\uCF5C\uBC31-\uD568\uC218\uAC00-\uB118\uC5B4\uAC00\uB294-\uACBD\uC6B0",children:(0,s.jsx)(e.span,{className:"icon icon-link"})}),"Props\uB85C \uCF5C\uBC31 \uD568\uC218\uAC00 \uB118\uC5B4\uAC00\uB294 \uACBD\uC6B0"]}),` `,(0,s.jsx)(e.p,{children:"\uD568\uC218 \uAC1D\uCCB4\uB294 \uC77C\uBC18 \uAC1D\uCCB4\uC640 \uB3D9\uC77C\uD55C \uBE44\uAD50 \uC6D0\uCE59\uC744 \uB530\uB978\uB2E4. \uD568\uC218 \uAC1D\uCCB4\uB294 \uC624\uC9C1 \uC790\uC2E0\uC5D0\uAC8C\uB9CC \uB3D9\uC77C\uD558\uB2E4."}),` `,(0,s.jsx)(e.p,{children:"\uADF8\uB807\uAE30 \uB54C\uBB38\uC5D0 \uBD80\uBAA8 \uCEF4\uD3EC\uB10C\uD2B8\uAC00 \uC790\uC2DD \uCEF4\uD3EC\uB10C\uD2B8\uC758 \uCF5C\uBC31 \uD568\uC218\uB97C \uC815\uC758\uD55C\uB2E4\uBA74, \uC0C8 \uD568\uC218\uAC00 \uC554\uC2DC\uC801\uC73C\uB85C \uC0DD\uC131\uB420 \uC218 \uC788\uB2E4. \uC774\uAC83\uC774 \uBA54\uBAA8\uC774\uC81C\uC774\uC158\uC744 \uB9C9\uC744 \uC218 \uC788\uB2E4."}),` `,(0,s.jsx)(e.pre,{children:(0,s.jsxs)(e.code,{className:"hljs language-jsx",children:[(0,s.jsx)(e.span,{className:"hljs-keyword",children:"function"})," ",(0,s.jsx)(e.span,{className:"hljs-title function_",children:"Logout"}),"(",(0,s.jsx)(e.span,{className:"hljs-params",children:"{ username, onLogout }"}),`) { `,(0,s.jsx)(e.span,{className:"hljs-comment",children:"//\uBD80\uBAA8 \uCEF4\uD3EC\uB10C\uD2B8\uB85C\uBD80\uD130 onLogout\uC774\uB77C\uB294 \uCF5C\uBC31 \uD568\uC218\uB97C props\uB85C \uBC1B\uB294\uB2E4."}),` `,(0,s.jsx)(e.span,{className:"hljs-keyword",children:"return"})," ",(0,s.jsxs)(e.span,{className:"xml",children:[(0,s.jsxs)(e.span,{className:"hljs-tag",children:["<",(0,s.jsx)(e.span,{className:"hljs-name",children:"div"})," ",(0,s.jsx)(e.span,{className:"hljs-attr",children:"onClick"}),"=",(0,s.jsx)(e.span,{className:"hljs-string",children:"{onLogout}"}),">"]}),"Logout {username}",(0,s.jsxs)(e.span,{className:"hljs-tag",children:[""]})]}),`; } `,(0,s.jsx)(e.span,{className:"hljs-keyword",children:"const"})," ",(0,s.jsx)(e.span,{className:"hljs-title class_",children:"MemoizedLogout"})," = ",(0,s.jsx)(e.span,{className:"hljs-title class_",children:"React"}),".",(0,s.jsx)(e.span,{className:"hljs-title function_",children:"memo"}),"(",(0,s.jsx)(e.span,{className:"hljs-title class_",children:"Logout"}),`); `]})}),` `,(0,s.jsx)(e.p,{children:"\uC774 \uACBD\uC6B0 \uB9AC\uB80C\uB354\uB9C1\uC774 \uB420 \uB54C \uB9C8\uB2E4 \uBD80\uBAA8 \uD568\uC218\uAC00 \uB2E4\uB978 \uCF5C\uBC31 \uD568\uC218\uC758 \uC778\uC2A4\uD134\uC2A4\uB97C \uB118\uAE38 \uAC00\uB2A5\uC131\uC774 \uC788\uB2E4."}),` `,(0,s.jsx)(e.pre,{children:(0,s.jsxs)(e.code,{className:"hljs language-jsx",children:[(0,s.jsx)(e.span,{className:"hljs-keyword",children:"function"})," ",(0,s.jsx)(e.span,{className:"hljs-title function_",children:"MyApp"}),"(",(0,s.jsx)(e.span,{className:"hljs-params",children:"{ store, cookies }"}),`) { `,(0,s.jsx)(e.span,{className:"hljs-keyword",children:"return"}),` ( `,(0,s.jsxs)(e.span,{className:"xml",children:[(0,s.jsxs)(e.span,{className:"hljs-tag",children:["<",(0,s.jsx)(e.span,{className:"hljs-name",children:"div"})," ",(0,s.jsx)(e.span,{className:"hljs-attr",children:"className"}),"=",(0,s.jsx)(e.span,{className:"hljs-string",children:'"main"'}),">"]}),` `,(0,s.jsxs)(e.span,{className:"hljs-tag",children:["<",(0,s.jsx)(e.span,{className:"hljs-name",children:"header"}),">"]}),` `,(0,s.jsxs)(e.span,{className:"hljs-tag",children:["<",(0,s.jsx)(e.span,{className:"hljs-name",children:"MemoizedLogout"})," ",(0,s.jsx)(e.span,{className:"hljs-attr",children:"username"}),"=",(0,s.jsx)(e.span,{className:"hljs-string",children:"{store.username}"})," ",(0,s.jsx)(e.span,{className:"hljs-attr",children:"onLogout"}),"=",(0,s.jsx)(e.span,{className:"hljs-string",children:"{()"})," =>"]}),` cookies.clear()} /> `,(0,s.jsxs)(e.span,{className:"hljs-tag",children:[""]}),` {store.content} `,(0,s.jsxs)(e.span,{className:"hljs-tag",children:[""]})]}),` ); } `]})}),` `,(0,s.jsxs)(e.p,{children:["\uBA54\uBAA8\uC774\uC9D5 \uB41C \uCEF4\uD3EC\uB10C\uD2B8\uC5D0 \uB3D9\uC77C\uD55C ",(0,s.jsx)(e.code,{children:"username"}),"\uAC12\uC774 \uB118\uC5B4\uAC00\uB354\uB77C\uB3C4 ",(0,s.jsx)(e.code,{children:"onLogout"})," \uCF5C\uBC31 \uB54C\uBB38\uC5D0 \uB9AC\uB80C\uB354\uB9C1\uC744 \uD558\uAC8C \uB41C\uB2E4. \uADF8\uB807\uAE30 \uB54C\uBB38\uC5D0 \uCF5C\uBC31 \uC778\uC2A4\uD134\uC2A4\uB97C \uBCF4\uC874\uC2DC\uCF1C\uC904 \uC218 \uC788\uB294 ",(0,s.jsx)(e.code,{children:"useCallback()"}),"\uC744 \uC0AC\uC6A9\uD574\uC918\uC57C \uD55C\uB2E4."]}),` `,(0,s.jsx)(e.pre,{children:(0,s.jsxs)(e.code,{className:"hljs language-jsx",children:[(0,s.jsx)(e.span,{className:"hljs-keyword",children:"const"})," ",(0,s.jsx)(e.span,{className:"hljs-title class_",children:"MemoizedLogout"})," = ",(0,s.jsx)(e.span,{className:"hljs-title class_",children:"React"}),".",(0,s.jsx)(e.span,{className:"hljs-title function_",children:"memo"}),"(",(0,s.jsx)(e.span,{className:"hljs-title class_",children:"Logout"}),`); `,(0,s.jsx)(e.span,{className:"hljs-keyword",children:"function"})," ",(0,s.jsx)(e.span,{className:"hljs-title function_",children:"MyApp"}),"(",(0,s.jsx)(e.span,{className:"hljs-params",children:"{ store, cookies }"}),`) { `,(0,s.jsx)(e.span,{className:"hljs-keyword",children:"const"})," onLogout = ",(0,s.jsx)(e.span,{className:"hljs-title function_",children:"useCallback"}),"(",(0,s.jsx)(e.span,{className:"hljs-function",children:"() =>"}),` { cookies.`,(0,s.jsx)(e.span,{className:"hljs-title function_",children:"clear"}),`(); }, []); `,(0,s.jsx)(e.span,{className:"hljs-keyword",children:"return"}),` ( `,(0,s.jsxs)(e.span,{className:"xml",children:[(0,s.jsxs)(e.span,{className:"hljs-tag",children:["<",(0,s.jsx)(e.span,{className:"hljs-name",children:"div"})," ",(0,s.jsx)(e.span,{className:"hljs-attr",children:"className"}),"=",(0,s.jsx)(e.span,{className:"hljs-string",children:'"main"'}),">"]}),` `,(0,s.jsxs)(e.span,{className:"hljs-tag",children:["<",(0,s.jsx)(e.span,{className:"hljs-name",children:"header"}),">"]}),` `,(0,s.jsxs)(e.span,{className:"hljs-tag",children:["<",(0,s.jsx)(e.span,{className:"hljs-name",children:"MemoizedLogout"})," ",(0,s.jsx)(e.span,{className:"hljs-attr",children:"username"}),"=",(0,s.jsx)(e.span,{className:"hljs-string",children:"{store.username}"})," ",(0,s.jsx)(e.span,{className:"hljs-attr",children:"onLogout"}),"=",(0,s.jsx)(e.span,{className:"hljs-string",children:"{onLogout}"})," />"]}),` `,(0,s.jsxs)(e.span,{className:"hljs-tag",children:[""]}),` {store.content} `,(0,s.jsxs)(e.span,{className:"hljs-tag",children:[""]})]}),` ); } `]})}),` `,(0,s.jsx)(e.p,{children:"\uBA54\uBAA8\uC774\uC81C\uC774\uC158 \uB41C \uCF5C\uBC31 \uD568\uC218\uB294 \uD56D\uC0C1 \uAC19\uC740 \uD568\uC218 \uC778\uC2A4\uD134\uC2A4\uB97C \uBC18\uD658\uD55C\uB2E4. \uC774\uB807\uAC8C \uD574\uC900\uB2E4\uBA74 \uBA54\uBAA8\uC774\uC81C\uC774\uC158\uC774 \uC815\uC0C1\uC801\uC73C\uB85C \uB3D9\uC791\uD560 \uAC83\uC774\uB2E4."}),` `,(0,s.jsxs)(e.h2,{id:"reactmemo\uB97C-\uC5B8\uC81C-\uC0AC\uC6A9\uD560\uAE4C",children:[(0,s.jsx)(e.a,{className:"anchor",href:"#reactmemo\uB97C-\uC5B8\uC81C-\uC0AC\uC6A9\uD560\uAE4C",children:(0,s.jsx)(e.span,{className:"icon icon-link"})}),"React.Memo()\uB97C \uC5B8\uC81C \uC0AC\uC6A9\uD560\uAE4C?"]}),` `,(0,s.jsxs)(e.p,{children:[(0,s.jsx)(e.code,{children:"React.Memo()"})," \uB294 \uD568\uC218\uD615 \uCEF4\uD3EC\uB10C\uD2B8\uC5D0 \uC801\uC6A9\uB418\uC5B4 \uAC19\uC740 props\uC5D0 \uAC19\uC740 \uB80C\uB354\uB9C1 \uACB0\uACFC\uB97C \uC81C\uACF5\uD558\uAE30 \uB54C\uBB38\uC5D0, \uC0AC\uC6A9\uD558\uAE30 \uAC00\uC7A5 \uC88B\uC740 \uCF00\uC774\uC2A4\uB294 \uD568\uC218\uD615 \uCEF4\uD3EC\uB10C\uD2B8\uAC00 \uAC19\uC740 ",(0,s.jsx)(e.code,{children:"props"}),"\uB85C \uC790\uC8FC \uB80C\uB354\uB9C1 \uB420\uAC70\uB77C \uC608\uC0C1\uB420 \uB54C\uB2E4."]}),` `,(0,s.jsxs)(e.p,{children:["\uC5EC\uAE30 ",(0,s.jsx)(e.code,{children:"Movie"}),"\uC758 \uBD80\uBAA8 \uCEF4\uD3EC\uB10C\uD2B8\uC778 \uC2E4\uC2DC\uAC04\uC73C\uB85C \uC5C5\uB370\uC774\uD2B8 \uB418\uB294 \uC601\uD654 \uC870\uD68C\uC218\uB97C \uB098\uD0C0\uB0B4\uB294 ",(0,s.jsx)(e.code,{children:"MovieViewsRealtime"})," \uCEF4\uD3EC\uB10C\uD2B8\uAC00 \uC788\uB2E4. \uC774 \uC560\uD50C\uB9AC\uCF00\uC774\uC158\uC740 \uC8FC\uAE30\uC801\uC73C\uB85C \uC11C\uBC84\uC5D0\uC11C \uB370\uC774\uD130\uB97C \uD3F4\uB9C1\uD574\uC11C ",(0,s.jsx)(e.code,{children:"MovieViewsRealtime"})," \uCEF4\uD3EC\uB10C\uD2B8\uC758 ",(0,s.jsx)(e.code,{children:"views"})," \uB97C \uC5C5\uB370\uC774\uD2B8\uD55C\uB2E4."]}),` `,(0,s.jsx)(e.pre,{children:(0,s.jsxs)(e.code,{className:"hljs language-jsx",children:[(0,s.jsx)(e.span,{className:"hljs-keyword",children:"function"})," ",(0,s.jsx)(e.span,{className:"hljs-title function_",children:"MovieViewsRealtime"}),"(",(0,s.jsx)(e.span,{className:"hljs-params",children:"{ title, releaseDate, views }"}),`) { `,(0,s.jsx)(e.span,{className:"hljs-keyword",children:"return"}),` ( `,(0,s.jsxs)(e.span,{className:"xml",children:[(0,s.jsxs)(e.span,{className:"hljs-tag",children:["<",(0,s.jsx)(e.span,{className:"hljs-name",children:"div"}),">"]}),` `,(0,s.jsxs)(e.span,{className:"hljs-tag",children:["<",(0,s.jsx)(e.span,{className:"hljs-name",children:"Movie"})," ",(0,s.jsx)(e.span,{className:"hljs-attr",children:"title"}),"=",(0,s.jsx)(e.span,{className:"hljs-string",children:"{title}"})," ",(0,s.jsx)(e.span,{className:"hljs-attr",children:"releaseDate"}),"=",(0,s.jsx)(e.span,{className:"hljs-string",children:"{releaseDate}"})," />"]}),` Movie views: {views} `,(0,s.jsxs)(e.span,{className:"hljs-tag",children:[""]})]}),` ); } `]})}),` `,(0,s.jsxs)(e.p,{children:[(0,s.jsx)(e.code,{children:"views"})," \uAC00 \uC0C8\uB85C\uC6B4 \uC22B\uC790\uB85C \uC5C5\uB370\uC774\uD2B8 \uB420 \uB54C \uB9C8\uB2E4 ",(0,s.jsx)(e.code,{children:"MovieViewsRealtime"})," \uCEF4\uD3EC\uB10C\uD2B8 \uB610\uD55C \uB9AC\uB80C\uB354\uB9C1 \uB41C\uB2E4. \uC774\uB54C ",(0,s.jsx)(e.code,{children:"Movie"})," \uCEF4\uD3EC\uB10C\uD2B8 \uB610\uD55C ",(0,s.jsx)(e.code,{children:"title"}),"\uC774\uB098 ",(0,s.jsx)(e.code,{children:"releaseDate"})," \uAC12\uC774 \uBC14\uB00C\uC9C0 \uC54A\uC558\uC74C\uC5D0\uB3C4 \uBD88\uAD6C\uD558\uACE0 \uB9AC\uB80C\uB354\uB9C1 \uB41C\uB2E4. \uC774\uB7F0 \uACBD\uC6B0\uC5D0 ",(0,s.jsx)(e.code,{children:"Movie"})," \uCEF4\uD3EC\uB10C\uD2B8\uC5D0 \uBA54\uBAA8\uC774\uC81C\uC774\uC158\uC744 \uD65C\uC6A9\uD558\uB294 \uAC83\uC774 \uC801\uC808\uD55C \uCF00\uC774\uC2A4\uB2E4."]}),` `,(0,s.jsx)(e.pre,{children:(0,s.jsxs)(e.code,{className:"hljs language-jsx",children:[(0,s.jsx)(e.span,{className:"hljs-keyword",children:"function"})," ",(0,s.jsx)(e.span,{className:"hljs-title function_",children:"MovieViewsRealtime"}),"(",(0,s.jsx)(e.span,{className:"hljs-params",children:"{ title, releaseDate, views }"}),`) { `,(0,s.jsx)(e.span,{className:"hljs-keyword",children:"return"}),` ( `,(0,s.jsxs)(e.span,{className:"xml",children:[(0,s.jsxs)(e.span,{className:"hljs-tag",children:["<",(0,s.jsx)(e.span,{className:"hljs-name",children:"div"}),">"]}),` `,(0,s.jsxs)(e.span,{className:"hljs-tag",children:["<",(0,s.jsx)(e.span,{className:"hljs-name",children:"MemoizedMovie"})," ",(0,s.jsx)(e.span,{className:"hljs-attr",children:"title"}),"=",(0,s.jsx)(e.span,{className:"hljs-string",children:"{title}"})," ",(0,s.jsx)(e.span,{className:"hljs-attr",children:"releaseDate"}),"=",(0,s.jsx)(e.span,{className:"hljs-string",children:"{releaseDate}"})," />"]}),` Movie views: {views} `,(0,s.jsxs)(e.span,{className:"hljs-tag",children:[""]})]}),` ); } `]})}),` `,(0,s.jsxs)(e.h2,{id:"reactmemo\uB97C-\uC5B8\uC81C-\uC0AC\uC6A9\uD558\uC9C0-\uB9D0\uC544\uC57C-\uD560\uAE4C",children:[(0,s.jsx)(e.a,{className:"anchor",href:"#reactmemo\uB97C-\uC5B8\uC81C-\uC0AC\uC6A9\uD558\uC9C0-\uB9D0\uC544\uC57C-\uD560\uAE4C",children:(0,s.jsx)(e.span,{className:"icon icon-link"})}),"React.Memo()\uB97C \uC5B8\uC81C \uC0AC\uC6A9\uD558\uC9C0 \uB9D0\uC544\uC57C \uD560\uAE4C?"]}),` `,(0,s.jsx)(e.p,{children:"\uC704\uC758 \uC0C1\uD669\uC774 \uC544\uB2C8\uB77C\uBA74 \uC0AC\uC6A9\uD560 \uD544\uC694\uAC00 \uC5C6\uC744 \uAC00\uB2A5\uC131\uC774 \uB192\uB2E4. \uC131\uB2A5\uC801\uC778 \uC774\uC810\uC744 \uC5BB\uC9C0 \uBABB\uD55C\uB2E4\uBA74 \uBA54\uBAA8\uC774\uC81C\uC774\uC158\uC774 \uC624\uD788\uB824 \uC545\uC601\uD5A5\uC744 \uB07C\uCE60 \uC218 \uC788\uB2E4."}),` `,(0,s.jsx)(e.p,{children:"\uB80C\uB354\uB9C1\uB420 \uB54C props\uAC00 \uB2E4\uB978 \uACBD\uC6B0\uAC00 \uB300\uBD80\uBD84\uC778 \uCEF4\uD3EC\uB10C\uD2B8\uB77C\uBA74 \uBA54\uBAA8\uC774\uC81C\uC774\uC158 \uAE30\uBC95\uC758 \uC774\uC810\uC744 \uC5BB\uAE30 \uD798\uB4E4\uB2E4."}),` `,(0,s.jsxs)(e.ol,{children:[` `,(0,s.jsx)(e.li,{children:"\uC774\uC804 props\uC640 \uB2E4\uC74C props\uC758 \uB3D9\uB4F1 \uBE44\uAD50\uB97C \uC704\uD574 \uBE44\uAD50 \uD568\uC218\uB97C \uC218\uD589\uD55C\uB2E4."}),` `,(0,s.jsx)(e.li,{children:"props\uAC00 \uB2E4\uB978 \uACBD\uC6B0\uAC00 \uB300\uBD80\uBD84\uC774\uB77C\uBA74 \uBE44\uAD50 \uD568\uC218\uB294 \uAC70\uC758 false\uB97C \uBC18\uD658\uD558\uAE30 \uB54C\uBB38\uC5D0 \uB9AC\uC561\uD2B8\uB294 \uC774\uC804 \uB80C\uB354\uB9C1 \uB0B4\uC6A9\uACFC \uB2E4\uC74C \uB80C\uB354\uB9C1 \uB0B4\uC6A9\uC744 \uBE44\uAD50\uD560 \uAC83\uC774\uB2E4."}),` `]}),` `,(0,s.jsx)(e.p,{children:"\uC774 \uACBD\uC6B0\uC5D0\uB294 props \uBE44\uAD50\uAC00 \uBD88\uD544\uC694\uD558\uAC8C \uB41C\uB2E4."})]})}function k(a={}){let{wrapper:e}=a.components||{};return e?(0,s.jsx)(e,Object.assign({},a,{children:(0,s.jsx)(t,a)})):t(a)}var _=k;return M(f);})(); ;return Component;

react.memo

리액트 최적화 하기