{"id":675,"date":"2025-01-20T15:42:00","date_gmt":"2025-01-20T06:42:00","guid":{"rendered":"https:\/\/blog.anchors-biz.com\/?p=675"},"modified":"2025-02-25T19:47:32","modified_gmt":"2025-02-25T10:47:32","slug":"react-hook-usememo-%ec%9d%b4%ed%95%b4%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/blog.anchors-biz.com\/?p=675","title":{"rendered":"React Hook &#8211; UseMemo \uc774\ud574\ud558\uae30"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"1024\" height=\"635\" src=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2025\/01\/useMemo.jpg\" alt=\"\" class=\"wp-image-676\" srcset=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2025\/01\/useMemo.jpg 1024w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2025\/01\/useMemo-300x186.jpg 300w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2025\/01\/useMemo-768x476.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>React\ub294 \ucef4\ud3ec\ub10c\ud2b8 \uae30\ubc18\uc758 UI \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c, \ud6a8\uc728\uc801\uc778 \ub80c\ub354\ub9c1\uc744 \uc704\ud574 \ub2e4\uc591\ud55c \ucd5c\uc801\ud654 \ub3c4\uad6c\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4. \uadf8\uc911 \ud558\ub098\uac00 \ubc14\ub85c <strong>useMemo<\/strong>\uc785\ub2c8\ub2e4. \uc774\ubc88 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c\ub294 useMemo\uc758 \ud2b9\uc9d5, \uc0ac\uc6a9 \uc2dc \uc8fc\uc758\ud560 \uc810, \uc5b8\uc81c \uc0ac\uc6a9\ud558\uba74 \uc88b\uc740\uc9c0, \uadf8\ub9ac\uace0 useState, useEffect\uc640\uc758 \ucc28\uc774\uc810\uae4c\uc9c0 \ud568\uaed8 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<div style=\"height:68px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2><strong>1. useMemo\ub780?<\/strong><\/h2>\n\n\n\n<p><code>useMemo<\/code>\ub294 React\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 \ud6c5(Hook)\uc73c\ub85c, \uac12\uc744 \uba54\ubaa8\uc774\uc81c\uc774\uc158(Memoization)\ud558\uc5ec \ubd88\ud544\uc694\ud55c \uacc4\uc0b0\uc744 \ubc29\uc9c0\ud558\uace0 \uc131\ub2a5\uc744 \ucd5c\uc801\ud654\ud558\ub294 \ub370 \uc0ac\uc6a9\ub429\ub2c8\ub2e4. \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub80c\ub354\ub9c1\ub420 \ub54c\ub9c8\ub2e4 \ub3d9\uc77c\ud55c \uacc4\uc0b0\uc744 \ubc18\ubcf5\ud558\uc9c0 \uc54a\uace0, \uc774\uc804\uc5d0 \uacc4\uc0b0\ub41c \uac12\uc744 \uc7ac\uc0ac\uc6a9\ud568\uc73c\ub85c\uc368 \uc131\ub2a5\uc744 \uac1c\uc120\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<h4><strong>\ud2b9\uc9d5<\/strong><\/h4>\n\n\n\n<ol><li><strong>\uba54\ubaa8\uc774\uc81c\uc774\uc158(Memoization):<\/strong> \ud2b9\uc815 \uac12\uc774 \ubcc0\uacbd\ub418\uc9c0 \uc54a\uc73c\uba74 \uc774\uc804\uc5d0 \uacc4\uc0b0\ub41c \uac12\uc744 \uc7ac\uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/li><li><strong>\uc758\uc874\uc131 \ubc30\uc5f4(Dependency Array):<\/strong> \ud2b9\uc815 \uac12\uc774 \ubcc0\uacbd\ub420 \ub54c\ub9cc \uacc4\uc0b0\uc744 \ub2e4\uc2dc \uc218\ud589\ud569\ub2c8\ub2e4.<\/li><li><strong>\ub80c\ub354\ub9c1 \ucd5c\uc801\ud654:<\/strong> \ubd88\ud544\uc694\ud55c \uc5f0\uc0b0\uc744 \uc904\uc5ec \ucef4\ud3ec\ub10c\ud2b8\uc758 \ub80c\ub354\ub9c1 \uc131\ub2a5\uc744 \ud5a5\uc0c1\uc2dc\ud0b5\ub2c8\ub2e4.<\/li><\/ol>\n\n\n\n<div style=\"height:68px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2><strong>2. useMemo \uc0ac\uc6a9\ubc95<\/strong><\/h2>\n\n\n\n<p><code><strong>useMemo<\/strong><\/code>\ub294 \ub450 \uac1c\uc758 \uc778\uc790\ub97c \ubc1b\uc2b5\ub2c8\ub2e4:<\/p>\n\n\n\n<ol><li><strong>\ucf5c\ubc31 \ud568\uc218:<\/strong> \uba54\ubaa8\uc774\uc81c\uc774\uc158\ud560 \uac12\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218.<\/li><li><strong>\uc758\uc874\uc131 \ubc30\uc5f4:<\/strong> \uac12\uc774 \ubcc0\uacbd\ub420 \ub54c\ub9cc \ucf5c\ubc31 \ud568\uc218\ub97c \ub2e4\uc2dc \uc2e4\ud589\ud569\ub2c8\ub2e4.<\/li><\/ol>\n\n\n\n<h3><strong>\uae30\ubcf8 \ubb38\ubc95<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>const memoizedValue = useMemo(() =&gt; {\n  return computeExpensiveValue(a, b);\n}, &#91;a, b]);<\/code><\/pre>\n\n\n\n<ul><li><code>computeExpensiveValue(a, b)<\/code>\ub294 \uc5f0\uc0b0 \ube44\uc6a9\uc774 \ud070 \ud568\uc218\uc785\ub2c8\ub2e4.<\/li><li><code>[a, b]<\/code>\ub294 \uc758\uc874\uc131 \ubc30\uc5f4\ub85c, <code>a<\/code>\ub098 <code>b<\/code>\uac00 \ubcc0\uacbd\ub420 \ub54c\ub9cc <code>computeExpensiveValue<\/code>\uac00 \ub2e4\uc2dc \uc2e4\ud589\ub429\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n<div style=\"height:68px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2>3. <strong>\uc5b8\uc81c useMemo\ub97c \uc0ac\uc6a9\ud574\uc57c \ud560\uae4c?<\/strong><\/h2>\n\n\n\n<p><strong>useMemo<\/strong>\ub294 React\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 Hook\uc73c\ub85c,&nbsp;<strong>\ucef4\ud3ec\ub10c\ud2b8\uc758 \uc131\ub2a5 \ucd5c\uc801\ud654<\/strong>\ub97c \uc704\ud574 \uc0ac\uc6a9\ub429\ub2c8\ub2e4. \uc8fc\ub85c **\ube44\uc2fc \uacc4\uc0b0(heavy computation)**\uc774\ub098&nbsp;<strong>\ubd88\ud544\uc694\ud55c \uc7ac\uacc4\uc0b0<\/strong>\uc744 \ubc29\uc9c0\ud558\uae30 \uc704\ud574 \uc0ac\uc6a9\ub418\uba70, \ud2b9\uc815 \uac12\uc774 \ubcc0\uacbd\ub420 \ub54c\ub9cc \uacc4\uc0b0\uc744 \ub2e4\uc2dc \uc218\ud589\ud558\ub3c4\ub85d \uc81c\uc5b4\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4>3.1.&nbsp;<strong>\ube44\uc2fc \uacc4\uc0b0(Heavy Computation)\uc744 \ucd5c\uc801\ud654\ud560 \ub54c<\/strong><\/h4>\n\n\n\n<ul><li>\ucef4\ud3ec\ub10c\ud2b8\uac00 \ub80c\ub354\ub9c1\ub420 \ub54c\ub9c8\ub2e4 \ub3d9\uc77c\ud55c \uacc4\uc0b0\uc744 \ubc18\ubcf5 \uc218\ud589\ud558\ub294 \uacbd\uc6b0, \uacc4\uc0b0 \ube44\uc6a9\uc774 \ub192\uc740 \uc791\uc5c5\uc740 \uc131\ub2a5\uc5d0 \uc601\ud5a5\uc744 \uc904 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><li><code>useMemo<\/code>\ub97c \uc0ac\uc6a9\ud558\uba74 \uc758\uc874\uc131 \uac12\uc774 \ubcc0\uacbd\ub418\uc9c0 \uc54a\ub294 \ud55c, \uc774\uc804\uc5d0 \uacc4\uc0b0\ub41c \uac12\uc744 \uc7ac\uc0ac\uc6a9\ud558\uc5ec \ubd88\ud544\uc694\ud55c \uacc4\uc0b0\uc744 \ubc29\uc9c0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n<h4>3.2. <strong>\ub9ac\ub80c\ub354\ub9c1 \uc2dc \ub3d9\uc77c\ud55c \uac12\uc744 \uc7ac\uc0ac\uc6a9\ud574\uc57c \ud560 \ub54c<\/strong><\/h4>\n\n\n\n<ul><li>\ucef4\ud3ec\ub10c\ud2b8\uac00 \ub9ac\ub80c\ub354\ub9c1\ub420 \ub54c\ub9c8\ub2e4 \ub3d9\uc77c\ud55c \uac12\uc744 \ub2e4\uc2dc \uacc4\uc0b0\ud558\ub294 \uacbd\uc6b0,&nbsp;<code>useMemo<\/code>\ub97c \uc0ac\uc6a9\ud574 \uc774\uc804 \uac12\uc744 \uc7ac\uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><li>\uc608: \ud544\ud130\ub9c1\ub41c \ub370\uc774\ud130, \uc815\ub82c\ub41c \ubc30\uc5f4 \ub4f1.<\/li><\/ul>\n\n\n\n<h4>3.3.<strong>&nbsp;\ucef4\ud3ec\ub10c\ud2b8\uac00 \uc790\uc8fc \ub9ac\ub80c\ub354\ub9c1\ub420 \ub54c<\/strong><\/h4>\n\n\n\n<ul><li>\ubd80\ubaa8 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub9ac\ub80c\ub354\ub9c1\ub420 \ub54c, \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub85c \uc804\ub2ec\ub418\ub294 \uac12\uc774 \ud56d\uc0c1 \uc0c8\ub85c \uc0dd\uc131\ub418\uba74 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub3c4 \ubd88\ud544\uc694\ud558\uac8c \ub9ac\ub80c\ub354\ub9c1\ub429\ub2c8\ub2e4.<\/li><li><code>useMemo<\/code>\ub97c \uc0ac\uc6a9\ud574 \ub3d9\uc77c\ud55c \uac12\uc744 \uba54\ubaa8\uc774\uc81c\uc774\uc158\ud558\uba74, \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\uc758 \ubd88\ud544\uc694\ud55c \ub9ac\ub80c\ub354\ub9c1\uc744 \ubc29\uc9c0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n<div style=\"height:68px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2>4. <strong>useMemo \uc0ac\uc6a9 \uc2dc \uc8fc\uc758\ud560 \uc810<\/strong><\/h2>\n\n\n\n<ol><li><strong>\ub0a8\uc6a9\ud558\uc9c0 \ub9d0 \uac83:<\/strong><ul><li><code>useMemo<\/code>\ub294 \ubaa8\ub4e0 \uacc4\uc0b0\uc5d0 \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \uc544\ub2c8\ub77c, <strong>\uc5f0\uc0b0 \ube44\uc6a9\uc774 \ud070 \uc791\uc5c5<\/strong>\uc5d0\ub9cc \uc0ac\uc6a9\ud574\uc57c \ud569\ub2c8\ub2e4. \ubd88\ud544\uc694\ud558\uac8c \uc0ac\uc6a9\ud558\uba74 \uc624\ud788\ub824 \ucf54\ub4dc \ubcf5\uc7a1\ub3c4\uac00 \uc99d\uac00\ud558\uace0 \uc131\ub2a5\uc774 \uc800\ud558\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><\/ul><\/li><li><strong>\uc758\uc874\uc131 \ubc30\uc5f4 \uad00\ub9ac:<\/strong><ul><li>\uc758\uc874\uc131 \ubc30\uc5f4\uc5d0 \ud3ec\ud568\ub41c \uac12\uc774 \uc815\ud655\ud558\uc9c0 \uc54a\uc73c\uba74, \uc608\uc0c1\uce58 \ubabb\ud55c \ub3d9\uc791\uc774 \ubc1c\uc0dd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud56d\uc0c1 \ud544\uc694\ud55c \uac12\uc744 \uc758\uc874\uc131 \ubc30\uc5f4\uc5d0 \ud3ec\ud568\ud558\uc138\uc694.<\/li><\/ul><\/li><li><strong>\uba54\ubaa8\ub9ac \uc0ac\uc6a9:<\/strong><ul><li>\uba54\ubaa8\uc774\uc81c\uc774\uc158\ub41c \uac12\uc740 \uba54\ubaa8\ub9ac\uc5d0 \uc800\uc7a5\ub418\ubbc0\ub85c, \uba54\ubaa8\ub9ac \uc0ac\uc6a9\ub7c9\uc774 \uc99d\uac00\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub530\ub77c\uc11c \uba54\ubaa8\ub9ac \uc0ac\uc6a9\ub7c9\uacfc \uc131\ub2a5 \ucd5c\uc801\ud654 \uac04\uc758 \uade0\ud615\uc744 \uace0\ub824\ud574\uc57c \ud569\ub2c8\ub2e4.<\/li><\/ul><\/li><\/ol>\n\n\n\n<div style=\"height:68px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2>5. <strong><code>useMemo<\/code>\uc640 <code>useState<\/code>, <code>useEffect<\/code>\uc758 \ucc28\uc774\uc810<\/strong><\/h2>\n\n\n\n<p>React\uc758 \uc8fc\uc694 \ud6c5\uc778 <code>useState<\/code>, <code>useEffect<\/code>\uc640 <code>useMemo<\/code>\ub294 \uac01\uac01 \ub2e4\ub978 \ubaa9\uc801\uacfc \uc2e4\ud589 \uc2dc\uc810\uc744 \uac00\uc9c0\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc544\ub798\uc5d0\uc11c \ucc28\uc774\uc810\uc744 \ube44\uad50\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<h4><strong>5.1. \uc2e4\ud589 \uc2dc\uc810<\/strong><\/h4>\n\n\n\n<ul><li><code>useState<\/code><strong>:<\/strong><ul><li>\ucef4\ud3ec\ub10c\ud2b8\uac00 \ub80c\ub354\ub9c1\ub420 \ub54c \uc0c1\ud0dc\ub97c \uc720\uc9c0\ud558\uace0, \uc0c1\ud0dc\uac00 \ubcc0\uacbd\ub418\uba74 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub2e4\uc2dc \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4.<\/li><li>\uc0c1\ud0dc \ubcc0\uacbd\uc740 \ube44\ub3d9\uae30\uc801\uc73c\ub85c \ucc98\ub9ac\ub429\ub2c8\ub2e4.<\/li><\/ul><\/li><li><code>useEffect<\/code><strong>:<\/strong><ul><li>\ucef4\ud3ec\ub10c\ud2b8\uac00 \ub80c\ub354\ub9c1\ub41c <strong>\uc774\ud6c4<\/strong>\uc5d0 \uc2e4\ud589\ub429\ub2c8\ub2e4.<\/li><li>\uc8fc\ub85c DOM \uc870\uc791, API \ud638\ucd9c, \uad6c\ub3c5\/\uc815\ub9ac \uc791\uc5c5 \ub4f1\uc5d0 \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<\/li><\/ul><\/li><li><code>useMemo<\/code><strong>:<\/strong><ul><li>\ucef4\ud3ec\ub10c\ud2b8\uac00 \ub80c\ub354\ub9c1\ub418\ub294 <strong>\ub3d9\uc548<\/strong> \uc2e4\ud589\ub429\ub2c8\ub2e4.<\/li><li>\uac12\uc758 \uacc4\uc0b0\uc744 \uba54\ubaa8\uc774\uc81c\uc774\uc158\ud558\uc5ec \ub80c\ub354\ub9c1 \uc131\ub2a5\uc744 \ucd5c\uc801\ud654\ud569\ub2c8\ub2e4.<\/li><\/ul><\/li><\/ul>\n\n\n\n<h4><strong>5.2. \uc8fc\uc694 \ubaa9\uc801<\/strong><\/h4>\n\n\n\n<ul><li><code>useState<\/code><strong>:<\/strong><ul><li>\ucef4\ud3ec\ub10c\ud2b8\uc758 \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud569\ub2c8\ub2e4.<\/li><li>\uc0c1\ud0dc\uac00 \ubcc0\uacbd\ub418\uba74 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub2e4\uc2dc \ub80c\ub354\ub9c1\ub429\ub2c8\ub2e4.<\/li><\/ul><\/li><li><code>useEffect<\/code><strong>:<\/strong><ul><li>\ucef4\ud3ec\ub10c\ud2b8\uc758 **\ubd80\uc218 \ud6a8\uacfc(Side Effect)**\ub97c \ucc98\ub9ac\ud569\ub2c8\ub2e4.<\/li><li>\uc608: \ub370\uc774\ud130 \uac00\uc838\uc624\uae30, \uc774\ubca4\ud2b8 \ub9ac\uc2a4\ub108 \ub4f1\ub85d\/\ud574\uc81c \ub4f1.<\/li><\/ul><\/li><li><code>useMemo<\/code><strong>:<\/strong><ul><li>\uc5f0\uc0b0 \ube44\uc6a9\uc774 \ud070 \uacc4\uc0b0\uc744 \uba54\ubaa8\uc774\uc81c\uc774\uc158\ud558\uc5ec \ubd88\ud544\uc694\ud55c \uc7ac\uacc4\uc0b0\uc744 \ubc29\uc9c0\ud569\ub2c8\ub2e4.<\/li><li>\ub80c\ub354\ub9c1 \uc131\ub2a5 \ucd5c\uc801\ud654\uc5d0 \ucd08\uc810\uc774 \ub9de\ucdb0\uc838 \uc788\uc2b5\ub2c8\ub2e4.<\/li><\/ul><\/li><\/ul>\n\n\n\n<h4><strong>5.3. \uc758\uc874\uc131 \ubc30\uc5f4<\/strong><\/h4>\n\n\n\n<ul><li><strong><code>useState<\/code>:<\/strong><ul><li>\uc758\uc874\uc131 \ubc30\uc5f4\uc774 \uc5c6\uc2b5\ub2c8\ub2e4. \uc0c1\ud0dc \ubcc0\uacbd\uc740 <code>setState<\/code>\ub97c \ud1b5\ud574 \uc9c1\uc811 \uc218\ud589\ub429\ub2c8\ub2e4.<\/li><\/ul><\/li><li><strong><code>useEffect<\/code>:<\/strong><ul><li>\uc758\uc874\uc131 \ubc30\uc5f4\uc744 \ud1b5\ud574 \ud2b9\uc815 \uac12\uc774 \ubcc0\uacbd\ub420 \ub54c\ub9cc \ubd80\uc218 \ud6a8\uacfc\ub97c \uc2e4\ud589\ud569\ub2c8\ub2e4.<\/li><\/ul><\/li><li><strong><code>useMemo<\/code>:<\/strong><ul><li>\uc758\uc874\uc131 \ubc30\uc5f4\uc744 \ud1b5\ud574 \ud2b9\uc815 \uac12\uc774 \ubcc0\uacbd\ub420 \ub54c\ub9cc \uacc4\uc0b0\uc744 \ub2e4\uc2dc \uc218\ud589\ud569\ub2c8\ub2e4<\/li><\/ul><\/li><\/ul>\n\n\n\n<div style=\"height:68px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2><strong>\uacb0\ub860<\/strong><\/h2>\n\n\n\n<p>React\uc758 <code>useMemo<\/code>\ub294 \uc131\ub2a5 \ucd5c\uc801\ud654\ub97c \uc704\ud55c \uac15\ub825\ud55c \ub3c4\uad6c\uc785\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \ubaa8\ub4e0 \uc0c1\ud669\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \uc544\ub2c8\ub77c, <strong>\uc5f0\uc0b0 \ube44\uc6a9\uc774 \ud070 \uc791\uc5c5<\/strong>\uc774\ub098 <strong>\ubd88\ud544\uc694\ud55c \ub80c\ub354\ub9c1\uc744 \ubc29\uc9c0<\/strong>\ud574\uc57c \ud560 \ub54c \uc801\uc808\ud788 \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4. \ub610\ud55c, <code>useState<\/code>\uc640 <code>useEffect<\/code>\uc640\ub294 \uc2e4\ud589 \uc2dc\uc810\uacfc \ubaa9\uc801\uc774 \ub2e4\ub974\ubbc0\ub85c, \uac01 \ud6c5\uc758 \uc5ed\ud560\uc744 \uba85\ud655\ud788 \uc774\ud574\ud558\uace0 \uc801\uc808\ud788 \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<h4><strong>\ud575\uc2ec \uc694\uc57d<\/strong><\/h4>\n\n\n\n<ul><li><code>useMemo<\/code>\ub294 \uac12\uc758 \uba54\ubaa8\uc774\uc81c\uc774\uc158\uc744 \ud1b5\ud574 \ubd88\ud544\uc694\ud55c \uacc4\uc0b0\uc744 \ubc29\uc9c0\ud569\ub2c8\ub2e4.<\/li><li><code>useState<\/code>\ub294 \uc0c1\ud0dc \uad00\ub9ac, <code>useEffect<\/code>\ub294 \ubd80\uc218 \ud6a8\uacfc \ucc98\ub9ac, <code>useMemo<\/code>\ub294 \ub80c\ub354\ub9c1 \uc131\ub2a5 \ucd5c\uc801\ud654\uc5d0 \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<\/li><li>\uac01 \ud6c5\uc758 \uc2e4\ud589 \uc2dc\uc810\uacfc \ubaa9\uc801\uc744 \uc774\ud574\ud558\uace0 \uc801\uc808\ud788 \ud65c\uc6a9\ud558\uc138\uc694.<\/li><\/ul>\n\n\n\n<p>React \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \uc131\ub2a5 \ucd5c\uc801\ud654\uac00 \ud544\uc694\ud558\ub2e4\uba74, <code>useMemo<\/code>\ub97c \uc801\uc808\ud788 \ud65c\uc6a9\ud574\ubcf4\uc138\uc694!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div style=\"height:68px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" width=\"210\" height=\"210\" src=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/odung_work-1.png\" alt=\"\" class=\"wp-image-641\" srcset=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/odung_work-1.png 210w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/odung_work-1-150x150.png 150w\" sizes=\"(max-width: 210px) 100vw, 210px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>React\ub294 \ucef4\ud3ec\ub10c\ud2b8 \uae30\ubc18\uc758 UI \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c, \ud6a8\uc728\uc801\uc778 \ub80c\ub354\ub9c1\uc744 \uc704\ud574 \ub2e4\uc591\ud55c \ucd5c\uc801\ud654 \ub3c4\uad6c\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4. \uadf8\uc911 \ud558\ub098\uac00 \ubc14\ub85c useMemo\uc785\ub2c8\ub2e4. \uc774\ubc88 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c\ub294 useMemo\uc758 \ud2b9\uc9d5, \uc0ac\uc6a9 \uc2dc \uc8fc\uc758\ud560 \uc810, \uc5b8\uc81c \uc0ac\uc6a9\ud558\uba74 \uc88b\uc740\uc9c0, \uadf8\ub9ac\uace0 useState, useEffect\uc640\uc758 \ucc28\uc774\uc810\uae4c\uc9c0 \ud568\uaed8 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. 1. useMemo\ub780? useMemo\ub294 React\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 \ud6c5(Hook)\uc73c\ub85c, \uac12\uc744 \uba54\ubaa8\uc774\uc81c\uc774\uc158(Memoization)\ud558\uc5ec \ubd88\ud544\uc694\ud55c \uacc4\uc0b0\uc744 \ubc29\uc9c0\ud558\uace0 \uc131\ub2a5\uc744 \ucd5c\uc801\ud654\ud558\ub294 \ub370 \uc0ac\uc6a9\ub429\ub2c8\ub2e4. \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub80c\ub354\ub9c1\ub420 \ub54c\ub9c8\ub2e4 \ub3d9\uc77c\ud55c \uacc4\uc0b0\uc744 \ubc18\ubcf5\ud558\uc9c0 \uc54a\uace0, [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_mi_skip_tracking":false},"categories":[3],"tags":[60,59,67,55],"_links":{"self":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts\/675"}],"collection":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=675"}],"version-history":[{"count":3,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts\/675\/revisions"}],"predecessor-version":[{"id":704,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts\/675\/revisions\/704"}],"wp:attachment":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=675"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=675"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}