{"id":637,"date":"2025-01-16T09:56:00","date_gmt":"2025-01-16T00:56:00","guid":{"rendered":"https:\/\/blog.anchors-biz.com\/?p=637"},"modified":"2025-01-22T13:30:09","modified_gmt":"2025-01-22T04:30:09","slug":"react%ec%9d%98-%eb%a0%8c%eb%8d%94%eb%a7%81-%ed%94%84%eb%a1%9c%ec%84%b8%ec%8a%a4","status":"publish","type":"post","link":"https:\/\/blog.anchors-biz.com\/?p=637","title":{"rendered":"React\uc758 \ub80c\ub354\ub9c1 \ud504\ub85c\uc138\uc2a4"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"576\" src=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/react-1024x576.png\" alt=\"react\" class=\"wp-image-604\" srcset=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/react-1024x576.png 1024w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/react-300x169.png 300w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/react-768x432.png 768w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/react.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>React\ub294 \ud604\ub300\uc801\uc778 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc5d0\uc11c \uac00\uc7a5 \ub110\ub9ac \uc0ac\uc6a9\ub418\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac \uc911 \ud558\ub098\uc785\ub2c8\ub2e4. \uadf8 \ud575\uc2ec\uc740 \ud6a8\uc728\uc801\uc778 \ub80c\ub354\ub9c1 \ud504\ub85c\uc138\uc2a4\uc5d0 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ubc88 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c\ub294 React\uc758 \ub80c\ub354\ub9c1 \ud504\ub85c\uc138\uc2a4\uac00 \uc5b4\ub5bb\uac8c \ub3d9\uc791\ud558\ub294\uc9c0, \uadf8\ub9ac\uace0 \uc774\ub97c \uc774\ud574\ud568\uc73c\ub85c\uc368 \uc131\ub2a5\uc744 \ucd5c\uc801\ud654\ud560 \uc218 \uc788\ub294 \ubc29\ubc95\uc744 \uc815\ub9ac\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<div style=\"height:39px\" 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>React \ub80c\ub354\ub9c1 \ud504\ub85c\uc138\uc2a4\uc758 \uae30\ubcf8 \uac1c\ub150<\/strong><\/h2>\n\n\n\n<p>React\uc758 \ub80c\ub354\ub9c1 \ud504\ub85c\uc138\uc2a4\ub294 UI\ub97c \ud6a8\uc728\uc801\uc73c\ub85c \uc5c5\ub370\uc774\ud2b8\ud558\uae30 \uc704\ud574 \ub450 \uac00\uc9c0 \uc8fc\uc694 \ub2e8\uacc4\ub85c \ub098\ub269\ub2c8\ub2e4: **Render Phase(\ub80c\ub354 \ub2e8\uacc4)**\uc640&nbsp;<strong>Commit Phase(\ucee4\ubc0b \ub2e8\uacc4)<\/strong>. \uc774 \ub450 \ub2e8\uacc4\ub294 React\uac00 \uc0c1\ud0dc\ub098 props\uc758 \ubcc0\uacbd\uc744 \uac10\uc9c0\ud558\uace0, \uc774\ub97c \uae30\ubc18\uc73c\ub85c UI\ub97c \uc5c5\ub370\uc774\ud2b8\ud558\ub294 \uacfc\uc815\uc744 \uccb4\uacc4\uc801\uc73c\ub85c \ucc98\ub9ac\ud558\ub294 \ud575\uc2ec\uc785\ub2c8\ub2e4. \uc544\ub798\uc5d0\uc11c\ub294 \uac01 \ub2e8\uacc4\uc758 \uc5ed\ud560\uacfc \uc791\ub3d9 \ubc29\uc2dd\uc744 \ub354 \uc790\uc138\ud788 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3><strong>1. Render Phase (\ub80c\ub354 \ub2e8\uacc4)<\/strong><\/h3>\n\n\n\n<p>Render Phase\ub294 React\uac00 **&#8221;\uc5b4\ub5bb\uac8c UI\ub97c \uc5c5\ub370\uc774\ud2b8\ud560\uc9c0&#8221;**\ub97c \uacb0\uc815\ud558\ub294 \ub2e8\uacc4\uc785\ub2c8\ub2e4. \uc774 \ub2e8\uacc4\uc5d0\uc11c\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc0c1\ud0dc(state)\uc640 props\ub97c \uae30\ubc18\uc73c\ub85c \uc0c8\ub85c\uc6b4 Virtual DOM\uc744 \uc0dd\uc131\ud558\uace0, \uc774\uc804 Virtual DOM\uacfc \ube44\uad50(diffing)\ud558\uc5ec \ubcc0\uacbd \uc0ac\ud56d\uc744 \uacc4\uc0b0\ud569\ub2c8\ub2e4. \uc911\uc694\ud55c \uc810\uc740, \uc774 \ub2e8\uacc4\uc5d0\uc11c\ub294&nbsp;<strong>\uc2e4\uc81c DOM\uc5d0 \uc544\ubb34\ub7f0 \ubcc0\uacbd\ub3c4 \uc774\ub8e8\uc5b4\uc9c0\uc9c0 \uc54a\ub294\ub2e4\ub294 \uac83<\/strong>\uc785\ub2c8\ub2e4. \ubaa8\ub4e0 \uc791\uc5c5\uc740 \uba54\ubaa8\ub9ac \ub0b4\uc5d0\uc11c \uc774\ub8e8\uc5b4\uc9c0\uba70, React\ub294 \uc774 \uacfc\uc815\uc744 \ud1b5\ud574 UI \uc5c5\ub370\uc774\ud2b8\ub97c \uc900\ube44\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h4><strong>Render Phase\uc758 \uc8fc\uc694 \ud2b9\uc9d5<\/strong><\/h4>\n\n\n\n<ol><li><strong>Pure and Side-Effect Free (\uc21c\uc218\ud558\uace0 \ubd80\uc791\uc6a9\uc774 \uc5c6\ub294 \ub2e8\uacc4)<\/strong><ul><li>Render Phase\ub294 \uc21c\uc218\ud55c \uacc4\uc0b0 \ub2e8\uacc4\ub85c, \uc774 \uacfc\uc815\uc5d0\uc11c DOM \uc870\uc791\uc774\ub098 \ube0c\ub77c\uc6b0\uc800\uc640\uc758 \uc0c1\ud638\uc791\uc6a9 \uac19\uc740 \ubd80\uc791\uc6a9\uc774 \ubc1c\uc0dd\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/li><li>React\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc758&nbsp;<code>render<\/code>&nbsp;\ud568\uc218\ub098 \ud568\uc218\ud615 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ud638\ucd9c\ud558\uc5ec \uc0c8\ub85c\uc6b4 Virtual DOM\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/li><\/ul><\/li><li><strong>Virtual DOM \uc0dd\uc131<\/strong><ul><li>React\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc0c1\ud0dc\uc640 props\ub97c \uae30\ubc18\uc73c\ub85c \uc0c8\ub85c\uc6b4 Virtual DOM \ud2b8\ub9ac\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/li><li>\uc774 Virtual DOM\uc740 UI\uc758 \ud604\uc7ac \uc0c1\ud0dc\ub97c \ub098\ud0c0\ub0b4\ub294 \uac00\ubcbc\uc6b4 \ub370\uc774\ud130 \uad6c\uc870\uc785\ub2c8\ub2e4.<\/li><\/ul><\/li><li><strong>Diffing (\ube44\uad50)<\/strong><ul><li>React\ub294 \uc774\uc804 Virtual DOM\uacfc \uc0c8\ub85c \uc0dd\uc131\ub41c Virtual DOM\uc744 \ube44\uad50(diffing)\ud558\uc5ec \ubcc0\uacbd\ub41c \ubd80\ubd84\uc744 \ucc3e\uc2b5\ub2c8\ub2e4.<\/li><li>\uc774 \uacfc\uc815\uc5d0\uc11c React\ub294 \ud6a8\uc728\uc801\uc778&nbsp;<strong>Reconciliation(\uc870\uc815)<\/strong>&nbsp;\uc54c\uace0\ub9ac\uc998\uc744 \uc0ac\uc6a9\ud558\uc5ec \ubcc0\uacbd \uc0ac\ud56d\uc744 \ucd5c\uc18c\ud654\ud569\ub2c8\ub2e4.<\/li><\/ul><\/li><li><strong>&#8220;\uc5b4\ub5bb\uac8c \ubcc0\uacbd\ud560\uc9c0&#8221; \uacb0\uc815<\/strong><ul><li>Render Phase\uc758 \uacb0\uacfc\ub294 &#8220;\uc5b4\ub5a4 \ubd80\ubd84\uc774 \ubcc0\uacbd\ub418\uc5c8\ub294\uc9c0&#8221;\uc640 &#8220;\uc5b4\ub5bb\uac8c \ubcc0\uacbd\ud560\uc9c0&#8221;\uc5d0 \ub300\ud55c \uc815\ubcf4\uc785\ub2c8\ub2e4.<\/li><li>\uc774 \uc815\ubcf4\ub294 Commit Phase\uc5d0\uc11c \uc2e4\uc81c DOM \uc5c5\ub370\uc774\ud2b8\ub97c \uc218\ud589\ud558\ub294 \ub370 \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<\/li><\/ul><\/li><\/ol>\n\n\n\n<h5>Render Phase\uc758 \uc608\uc81c<\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>function Counter({ count }) {\n  return &lt;h1&gt;Count: {count}&lt;\/h1&gt;;\n}\n\n\/\/ \uc0c1\ud0dc\uac00 \ubcc0\uacbd\ub418\uba74 React\ub294 Render Phase\uc5d0\uc11c \uc0c8\ub85c\uc6b4 Virtual DOM\uc744 \uc0dd\uc131\nconst oldVirtualDOM = { type: \"h1\", props: { children: \"Count: 0\" } };\nconst newVirtualDOM = { type: \"h1\", props: { children: \"Count: 1\" } };\n\n\/\/ React\ub294 \ub450 Virtual DOM\uc744 \ube44\uad50\ud558\uc5ec \ubcc0\uacbd\ub41c \ubd80\ubd84\uc744 \ucc3e\uc74c\n\/\/ \ubcc0\uacbd\ub41c \ubd80\ubd84: \"Count: 0\" \u2192 \"Count: 1\"<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h4><strong>Render Phase\uc5d0\uc11c\uc758 \uc81c\ud55c<\/strong><\/h4>\n\n\n\n<ul><li>Render Phase\ub294 \uc21c\uc218\ud55c \uacc4\uc0b0 \ub2e8\uacc4\uc774\ubbc0\ub85c,<span style=\"text-decoration: underline\"> DOM \uc870\uc791\uc774\ub098 \ube0c\ub77c\uc6b0\uc800 API \ud638\ucd9c \uac19\uc740 \ubd80\uc791\uc6a9\uc744 \ud3ec\ud568\ud574\uc11c\ub294 \uc548 \ub429\ub2c8\ub2e4.<\/span><\/li><li>\ubd80\uc791\uc6a9\uc774 \ud544\uc694\ud55c \uc791\uc5c5\uc740&nbsp;<code>useEffect<\/code>\uc640 \uac19\uc740 React Hook\uc744 \uc0ac\uc6a9\ud558\uc5ec Commit Phase\uc5d0\uc11c \ucc98\ub9ac\ud574\uc57c \ud569\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n<div style=\"height:19px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3><strong>2. Commit Phase (\ucee4\ubc0b \ub2e8\uacc4)<\/strong><\/h3>\n\n\n\n<p>Commit Phase\ub294 Render Phase\uc5d0\uc11c \uacc4\uc0b0\ub41c \ubcc0\uacbd \uc0ac\ud56d\uc744&nbsp;<strong>\uc2e4\uc81c DOM\uc5d0 \ubc18\uc601\ud558\ub294 \ub2e8\uacc4<\/strong>\uc785\ub2c8\ub2e4. \uc774 \ub2e8\uacc4\uc5d0\uc11c\ub294 Virtual DOM\uc5d0\uc11c \uacc4\uc0b0\ub41c \uacb0\uacfc\ub97c \uae30\ubc18\uc73c\ub85c \uc2e4\uc81c DOM\uc744 \uc5c5\ub370\uc774\ud2b8\ud558\uace0, \ube0c\ub77c\uc6b0\uc800\uac00 \ud654\uba74\uc744 \ub2e4\uc2dc \uadf8\ub9ac\ub3c4\ub85d \uc694\uccad\ud569\ub2c8\ub2e4. \ub610\ud55c, \uc774 \ub2e8\uacc4\uc5d0\uc11c React\ub294 \ubd80\uc791\uc6a9(Side Effects)\uc744 \ucc98\ub9ac\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<h4><strong>Commit Phase\uc758 \uc8fc\uc694 \ud2b9\uc9d5<\/strong><\/h4>\n\n\n\n<ol><li><strong>DOM \uc5c5\ub370\uc774\ud2b8<\/strong><ul><li>Render Phase\uc5d0\uc11c \uacc4\uc0b0\ub41c \ubcc0\uacbd \uc0ac\ud56d\uc744 \uc2e4\uc81c DOM\uc5d0 \ubc18\uc601\ud569\ub2c8\ub2e4.<\/li><li>React\ub294 \ubcc0\uacbd\ub41c \ubd80\ubd84\ub9cc \uc5c5\ub370\uc774\ud2b8\ud558\uc5ec DOM \uc870\uc791\uc744 \ucd5c\uc18c\ud654\ud569\ub2c8\ub2e4.<\/li><\/ul><\/li><li><strong>\ub808\uc774\uc544\uc6c3 \uacc4\uc0b0 \ubc0f \ud398\uc778\ud305<\/strong><ul><li>DOM\uc774 \uc5c5\ub370\uc774\ud2b8\ub418\uba74 \ube0c\ub77c\uc6b0\uc800\ub294 \ub808\uc774\uc544\uc6c3\uc744 \ub2e4\uc2dc \uacc4\uc0b0\ud558\uace0, \ud654\uba74\uc744 \ub2e4\uc2dc \uadf8\ub9bd\ub2c8\ub2e4(\ud398\uc778\ud305).<\/li><li>\uc774 \uacfc\uc815\uc740 \ube0c\ub77c\uc6b0\uc800\uc758 \ub80c\ub354\ub9c1 \uc5d4\uc9c4\uc5d0 \uc758\ud574 \ucc98\ub9ac\ub429\ub2c8\ub2e4.<\/li><\/ul><\/li><li><strong>\ubd80\uc791\uc6a9 \ucc98\ub9ac<\/strong><ul><li>Commit Phase\uc5d0\uc11c\ub294&nbsp;<code>useEffect<\/code>,&nbsp;<code>useLayoutEffect<\/code>, \ud074\ub798\uc2a4 \ucef4\ud3ec\ub10c\ud2b8\uc758&nbsp;<code>componentDidMount<\/code>&nbsp;\ubc0f&nbsp;<code>componentDidUpdate<\/code>\uc640 \uac19\uc740 \ub77c\uc774\ud504\uc0ac\uc774\ud074 \uba54\uc11c\ub4dc\uac00 \uc2e4\ud589\ub429\ub2c8\ub2e4.<\/li><li>\uc774 \ub2e8\uacc4\uc5d0\uc11c DOM \uc870\uc791, API \ud638\ucd9c, \uc560\ub2c8\uba54\uc774\uc158 \uc2dc\uc791 \ub4f1 \ubd80\uc791\uc6a9\uc744 \uc548\uc804\ud558\uac8c \ucc98\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><\/ul><\/li><li><strong>React DevTools\uc5d0\uc11c\uc758 \ud45c\uc2dc<\/strong><ul><li>Commit Phase\ub294 React DevTools\uc5d0\uc11c &#8220;Commit&#8221;\uc73c\ub85c \ud45c\uc2dc\ub418\uba70, \uc774 \ub2e8\uacc4\uc5d0\uc11c \uc2e4\uc81c DOM \ubcc0\uacbd\uc774 \uc774\ub8e8\uc5b4\uc84c\uc74c\uc744 \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><\/ul><\/li><\/ol>\n\n\n\n<h5><strong>Commit Phase\uc758 \uc608\uc81c<\/strong><\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>function Counter({ count }) {\n  useEffect(() =&gt; {\n    console.log(\"Count updated:\", count);\n  }, &#91;count]);\n\n  return &lt;h1&gt;Count: {count}&lt;\/h1&gt;;\n}\n\n\/\/ \uc0c1\ud0dc\uac00 \ubcc0\uacbd\ub418\uba74 Commit Phase\uc5d0\uc11c \ub2e4\uc74c \uc791\uc5c5\uc774 \uc218\ud589\ub428:\n\/\/ 1. Virtual DOM\uc5d0\uc11c \uacc4\uc0b0\ub41c \ubcc0\uacbd \uc0ac\ud56d\uc744 \uc2e4\uc81c DOM\uc5d0 \ubc18\uc601\n\/\/ 2. \ube0c\ub77c\uc6b0\uc800\uac00 \ub808\uc774\uc544\uc6c3\uc744 \ub2e4\uc2dc \uacc4\uc0b0\ud558\uace0 \ud654\uba74\uc744 \ub2e4\uc2dc \uadf8\ub9bc\n\/\/ 3. useEffect\uac00 \uc2e4\ud589\ub418\uc5b4 \"Count updated\" \ub85c\uadf8 \ucd9c\ub825\n\n<\/code><\/pre>\n\n\n\n<h4><strong>Commit Phase\uc5d0\uc11c\uc758 \uc8fc\uc694 \uc791\uc5c5<\/strong><\/h4>\n\n\n\n<ul><li>DOM \uc5c5\ub370\uc774\ud2b8: \ubcc0\uacbd\ub41c Virtual DOM\uc744 \uc2e4\uc81c DOM\uc5d0 \ubc18\uc601.<\/li><li>\ubd80\uc791\uc6a9 \ucc98\ub9ac:&nbsp;<code>useEffect<\/code>\uc640 \uac19\uc740 Hook\uc744 \ud1b5\ud574 \ubd80\uc791\uc6a9 \uc2e4\ud589.<\/li><li>\ube0c\ub77c\uc6b0\uc800 \ub80c\ub354\ub9c1: DOM \ubcc0\uacbd \ud6c4 \ub808\uc774\uc544\uc6c3 \uacc4\uc0b0 \ubc0f \ud654\uba74 \ud398\uc778\ud305.<\/li><\/ul>\n\n\n\n<div style=\"height:38px\" 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<h3><strong>React \ub80c\ub354\ub9c1 \ud504\ub85c\uc138\uc2a4\uc758 \uc804\uccb4 \ud750\ub984<\/strong><\/h3>\n\n\n\n<p>React\uc758 \ub80c\ub354\ub9c1 \ud504\ub85c\uc138\uc2a4\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \uc21c\uc11c\ub85c \uc9c4\ud589\ub429\ub2c8\ub2e4:<\/p>\n\n\n\n<ol><li><strong>\uc0c1\ud0dc \ub610\ub294 props \ubcc0\uacbd<\/strong><ul><li>\uc0c1\ud0dc(state)\ub098 props\uac00 \ubcc0\uacbd\ub418\uba74 React\ub294 \ub80c\ub354\ub9c1\uc744 \ud2b8\ub9ac\uac70\ud569\ub2c8\ub2e4.<\/li><\/ul><\/li><li><strong>Render Phase<\/strong><ul><li>React\ub294 \uc0c8\ub85c\uc6b4 Virtual DOM\uc744 \uc0dd\uc131\ud558\uace0, \uc774\uc804 Virtual DOM\uacfc \ube44\uad50\ud558\uc5ec \ubcc0\uacbd \uc0ac\ud56d\uc744 \uacc4\uc0b0\ud569\ub2c8\ub2e4.<\/li><li>\uc774 \ub2e8\uacc4\uc5d0\uc11c\ub294 \uc2e4\uc81c DOM\uc5d0 \uc544\ubb34\ub7f0 \ubcc0\uacbd\ub3c4 \uc774\ub8e8\uc5b4\uc9c0\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/li><\/ul><\/li><li><strong>Commit Phase<\/strong><ul><li>Render Phase\uc5d0\uc11c \uacc4\uc0b0\ub41c \ubcc0\uacbd \uc0ac\ud56d\uc744 \uc2e4\uc81c DOM\uc5d0 \ubc18\uc601\ud569\ub2c8\ub2e4.<\/li><li>DOM \uc5c5\ub370\uc774\ud2b8, \ub808\uc774\uc544\uc6c3 \uacc4\uc0b0, \ud654\uba74 \ud398\uc778\ud305, \ubd80\uc791\uc6a9 \ucc98\ub9ac \ub4f1\uc774 \uc774\ub8e8\uc5b4\uc9d1\ub2c8\ub2e4.<\/li><\/ul><\/li><li><strong>\ube0c\ub77c\uc6b0\uc800 \ub80c\ub354\ub9c1<\/strong><ul><li>\ube0c\ub77c\uc6b0\uc800\ub294 DOM \ubcc0\uacbd \uc0ac\ud56d\uc744 \uae30\ubc18\uc73c\ub85c \ub808\uc774\uc544\uc6c3\uc744 \ub2e4\uc2dc \uacc4\uc0b0\ud558\uace0, \ud654\uba74\uc744 \ub2e4\uc2dc \uadf8\ub9bd\ub2c8\ub2e4.<\/li><\/ul><\/li><\/ol>\n\n\n\n<div style=\"height:38px\" 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>React\uc758 \ub80c\ub354\ub9c1 \ud2b8\ub9ac\uac70<\/strong><\/h2>\n\n\n\n<p>React\ub294 \ud2b9\uc815 \uc870\uac74\uc5d0\uc11c \ub80c\ub354\ub9c1\uc744 \ud2b8\ub9ac\uac70\ud569\ub2c8\ub2e4. \uc8fc\uc694 \ud2b8\ub9ac\uac70 \uc870\uac74\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n\n\n\n<ol><li><strong>\uc0c1\ud0dc(State) \ubcc0\uacbd<\/strong><ul><li><code>useState<\/code>\ub85c \uad00\ub9ac\ub418\ub294 \uc0c1\ud0dc\uac00 \ubcc0\uacbd\ub418\uba74 \ud574\ub2f9 \ucef4\ud3ec\ub10c\ud2b8\uc640 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub2e4\uc2dc \ub80c\ub354\ub9c1\ub429\ub2c8\ub2e4.<\/li><\/ul><\/li><li><strong>Props \ubcc0\uacbd<\/strong><ul><li>\ubd80\ubaa8 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc804\ub2ec\ub41c props\uac00 \ubcc0\uacbd\ub418\uba74 \ud574\ub2f9 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub2e4\uc2dc \ub80c\ub354\ub9c1\ub429\ub2c8\ub2e4.<\/li><\/ul><\/li><li><strong>Context \ubcc0\uacbd<\/strong><ul><li><code>useContext<\/code>\ub85c \uad6c\ub3c5\ud55c \uac12\uc774 \ubcc0\uacbd\ub418\uba74 \uad00\ub828\ub41c \ubaa8\ub4e0 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub2e4\uc2dc \ub80c\ub354\ub9c1\ub429\ub2c8\ub2e4.<\/li><\/ul><\/li><\/ol>\n\n\n\n<div style=\"height:38px\" 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>React\uc758 Virtual DOM\uacfc Reconciliation<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"576\" src=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/reconciliation-1024x576.jpg\" alt=\"\" class=\"wp-image-640\" srcset=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/reconciliation-1024x576.jpg 1024w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/reconciliation-300x169.jpg 300w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/reconciliation-768x432.jpg 768w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/reconciliation.jpg 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>React\uc758 \ub80c\ub354\ub9c1 \ud504\ub85c\uc138\uc2a4\uc5d0\uc11c \uc911\uc694\ud55c \uc5ed\ud560\uc744 \ud558\ub294 \uac83\uc774 \ubc14\ub85c&nbsp;<strong>Virtual DOM<\/strong>\uacfc <strong>Reconciliation(\uc870\uc815)<\/strong> \uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<h3><strong>Virtual DOM<\/strong><\/h3>\n\n\n\n<p>Virtual DOM\uc740 React\uac00 UI\ub97c \ud6a8\uc728\uc801\uc73c\ub85c \uad00\ub9ac\ud558\uae30 \uc704\ud574 \uc0ac\uc6a9\ud558\ub294&nbsp;<strong>\uac00\uc0c1\uc758 DOM \uad6c\uc870<\/strong>\uc785\ub2c8\ub2e4. React\ub294 \uc2e4\uc81c DOM \ub300\uc2e0 Virtual DOM\uc744 \uc0ac\uc6a9\ud558\uc5ec \ubcc0\uacbd \uc0ac\ud56d\uc744 \uacc4\uc0b0\ud558\uace0, \uc774\ub97c \ud1b5\ud574 \uc131\ub2a5\uc744 \ucd5c\uc801\ud654\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<p>Virtual DOM\uc5d0 \ub300\ud55c \uc790\uc138\ud55c \ub0b4\uc6a9\uc740 \uc774\uc804 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c \ub2e4\ub918\uc73c\ub2c8, \ub354 \uae4a\uc774 \uc54c\uace0 \uc2f6\ub2e4\uba74&nbsp;<a target=\"_blank\" href=\"\/\/difoiogjjojoaoomphldepapgpbgkhkb\/%EB%A7%81%ED%81%AC%EB%A5%BC%EC%B6%94%EA%B0%80%ED%95%98%EC%84%B8%EC%9A%94\" rel=\"noreferrer noopener\">\uc774\uc804 \ud3ec\uc2a4\ud2b8<\/a>\ub97c \ucc38\uace0\ud574\uc8fc\uc138\uc694. \uc5ec\uae30\uc11c\ub294 \uac04\ub2e8\ud788 \ud575\uc2ec\ub9cc \uc815\ub9ac\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<h4><strong>Virtual DOM\uc758 \ud575\uc2ec<\/strong><\/h4>\n\n\n\n<ul><li><strong>\uac00\ubcbc\uc6b4 \uad6c\uc870<\/strong>: \uc2e4\uc81c DOM\ubcf4\ub2e4 \ud6e8\uc52c \uac00\ubccd\uace0, \ube60\ub974\uac8c \uc0dd\uc131 \ubc0f \uc5c5\ub370\uc774\ud2b8\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><li><strong>\uba54\ubaa8\ub9ac \ub0b4\uc5d0\uc11c \uc791\ub3d9<\/strong>: Virtual DOM\uc740 \ube0c\ub77c\uc6b0\uc800\uc640 \uc9c1\uc811 \uc0c1\ud638\uc791\uc6a9\ud558\uc9c0 \uc54a\uace0, \uba54\ubaa8\ub9ac \ub0b4\uc5d0\uc11c\ub9cc \uc791\ub3d9\ud569\ub2c8\ub2e4.<\/li><li><strong>\ubcc0\uacbd \uc0ac\ud56d \uacc4\uc0b0<\/strong>: React\ub294 Virtual DOM\uc744 \uc0ac\uc6a9\ud558\uc5ec UI\uc758 \ubcc0\uacbd \uc0ac\ud56d\uc744 \uacc4\uc0b0\ud558\uace0, \ud544\uc694\ud55c \ubd80\ubd84\ub9cc \uc2e4\uc81c DOM\uc5d0 \ubc18\uc601\ud569\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n<div style=\"height:51px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h3><strong>Reconciliation<\/strong><\/h3>\n\n\n\n<p>Reconciliation\uc740 React\uac00 Virtual DOM\uc744 \uc0ac\uc6a9\ud558\uc5ec&nbsp;<strong>UI\uc758 \ubcc0\uacbd \uc0ac\ud56d\uc744 \ud6a8\uc728\uc801\uc73c\ub85c \ucc98\ub9ac\ud558\ub294 \uacfc\uc815<\/strong>\uc744 \uc758\ubbf8\ud569\ub2c8\ub2e4. React\ub294 \uc0c1\ud0dc\ub098 props\uac00 \ubcc0\uacbd\ub420 \ub54c\ub9c8\ub2e4 \uc0c8\ub85c\uc6b4 Virtual DOM\uc744 \uc0dd\uc131\ud558\uace0, \uc774\uc804 Virtual DOM\uacfc \uc0c8\ub85c\uc6b4 Virtual DOM\uc744 \ube44\uad50(diffing)\ud558\uc5ec \ubcc0\uacbd\ub41c \ubd80\ubd84\ub9cc \uc2e4\uc81c DOM\uc5d0 \ubc18\uc601\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<h4><strong>Reconciliation\uc758 \uc8fc\uc694 \uacfc\uc815<\/strong><\/h4>\n\n\n\n<ol><li><strong>Diffing (\ube44\uad50)<\/strong><ul><li>React\ub294 \uc774\uc804 Virtual DOM\uacfc \uc0c8\ub85c\uc6b4 Virtual DOM\uc744 \ube44\uad50\ud558\uc5ec \ubcc0\uacbd\ub41c \ubd80\ubd84\uc744 \ucc3e\uc2b5\ub2c8\ub2e4.<\/li><li>React\uc758 Diffing \uc54c\uace0\ub9ac\uc998\uc740 \ud6a8\uc728\uc801\uc73c\ub85c \uc124\uacc4\ub418\uc5b4, \ubcc0\uacbd \uc0ac\ud56d\uc744 \ube60\ub974\uac8c \uacc4\uc0b0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><li>\uc608\ub97c \ub4e4\uc5b4, \uac19\uc740 \ub808\ubca8\uc758 \ub178\ub4dc\ub07c\ub9ac\ub9cc \ube44\uad50\ud558\uace0, \ub2e4\ub978 \ub808\ubca8\uc758 \ub178\ub4dc\ub294 \ube44\uad50\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/li><\/ul><\/li><li><strong>Patch (\ud328\uce58)<\/strong><ul><li>Diffing \uacfc\uc815\uc5d0\uc11c \ubc1c\uacac\ub41c \ubcc0\uacbd \uc0ac\ud56d\ub9cc \uc2e4\uc81c DOM\uc5d0 \ubc18\uc601\ud569\ub2c8\ub2e4.<\/li><li>React\ub294 \ubcc0\uacbd\ub41c \ubd80\ubd84\ub9cc \uc5c5\ub370\uc774\ud2b8\ud558\uae30 \ub54c\ubb38\uc5d0 \uc804\uccb4 DOM\uc744 \ub2e4\uc2dc \ub80c\ub354\ub9c1\ud558\uc9c0 \uc54a\uc544\ub3c4 \ub429\ub2c8\ub2e4.<\/li><\/ul><\/li><\/ol>\n\n\n\n<h4><strong>Reconciliation\uc758 \ud2b9\uc9d5<\/strong><\/h4>\n\n\n\n<ul><li><strong>\ucd5c\uc18c\ud55c\uc758 DOM \uc5c5\ub370\uc774\ud2b8<\/strong>: \ubcc0\uacbd\ub41c \ubd80\ubd84\ub9cc \uc2e4\uc81c DOM\uc5d0 \ubc18\uc601\ud558\uc5ec \uc131\ub2a5\uc744 \ucd5c\uc801\ud654\ud569\ub2c8\ub2e4.<\/li><li><strong>\ud6a8\uc728\uc801\uc778 \uc54c\uace0\ub9ac\uc998<\/strong>: React\uc758 Diffing \uc54c\uace0\ub9ac\uc998\uc740 O(n) \ubcf5\uc7a1\ub3c4\ub85c \uc124\uacc4\ub418\uc5b4, \ub9e4\uc6b0 \ube60\ub974\uac8c \ubcc0\uacbd \uc0ac\ud56d\uc744 \uacc4\uc0b0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><li><strong>\ucef4\ud3ec\ub10c\ud2b8 \uae30\ubc18 \uc5c5\ub370\uc774\ud2b8<\/strong>: React\ub294 \ucef4\ud3ec\ub10c\ud2b8 \ub2e8\uc704\ub85c \ubcc0\uacbd \uc0ac\ud56d\uc744 \ucd94\uc801\ud558\uace0, \ud544\uc694\ud55c \ucef4\ud3ec\ub10c\ud2b8\ub9cc \uc5c5\ub370\uc774\ud2b8\ud569\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h3><strong>\uacb0\ub860<\/strong><\/h3>\n\n\n\n<h4><strong>React \ub80c\ub354\ub9c1 \ud504\ub85c\uc138\uc2a4\ub97c \uc774\ud574\ud574\uc57c \ud558\ub294 \uc774\uc720<\/strong><\/h4>\n\n\n\n<p>React\uc758 \ub80c\ub354\ub9c1 \ud504\ub85c\uc138\uc2a4\ub97c \uc774\ud574\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\uc740 \uc774\uc810\uc744 \uc5bb\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n\n\n\n<ul><li>\ubd88\ud544\uc694\ud55c \ub80c\ub354\ub9c1\uc744 \ubc29\uc9c0\ud558\uc5ec \uc131\ub2a5\uc744 \ucd5c\uc801\ud654\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><li>Virtual DOM\uacfc Reconciliation\uc758 \uc791\ub3d9 \ubc29\uc2dd\uc744 \uc774\ud574\ud558\uc5ec React\uc758 \ud6a8\uc728\uc131\uc744 \ud65c\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><li>\uc0c1\ud0dc \uad00\ub9ac\uc640 \ucef4\ud3ec\ub10c\ud2b8 \uc124\uacc4\ub97c \ub354 \ud6a8\uacfc\uc801\uc73c\ub85c \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n<p>React\ub294 \uae30\ubcf8\uc801\uc73c\ub85c \ud6a8\uc728\uc801\uc778 \ub80c\ub354\ub9c1\uc744 \uc81c\uacf5\ud558\uc9c0\ub9cc, \uac1c\ubc1c\uc790\uac00 \ub80c\ub354\ub9c1 \ud504\ub85c\uc138\uc2a4\ub97c \uc774\ud574\ud558\uace0 \ucd5c\uc801\ud654 \uae30\ubc95\uc744 \uc801\uc6a9\ud558\uba74 \ub354\uc6b1 \ube60\ub974\uace0 \uc0ac\uc6a9\uc790 \uce5c\ud654\uc801\uc778 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4. React\ub97c \uc81c\ub300\ub85c \ud65c\uc6a9\ud558\uae30 \uc704\ud574\uc11c\ub294 \ub80c\ub354\ub9c1 \ud504\ub85c\uc138\uc2a4\uc758 \uc6d0\ub9ac\ub97c \uae4a\uc774 \uc774\ud574\ud558\ub294 \uac83\uc774 \ud544\uc218\uc801\uc785\ub2c8\ub2e4<\/p>\n\n\n\n<div style=\"height:100px\" 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\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>React\ub294 \ud604\ub300\uc801\uc778 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc5d0\uc11c \uac00\uc7a5 \ub110\ub9ac \uc0ac\uc6a9\ub418\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac \uc911 \ud558\ub098\uc785\ub2c8\ub2e4. \uadf8 \ud575\uc2ec\uc740 \ud6a8\uc728\uc801\uc778 \ub80c\ub354\ub9c1 \ud504\ub85c\uc138\uc2a4\uc5d0 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ubc88 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c\ub294 React\uc758 \ub80c\ub354\ub9c1 \ud504\ub85c\uc138\uc2a4\uac00 \uc5b4\ub5bb\uac8c \ub3d9\uc791\ud558\ub294\uc9c0, \uadf8\ub9ac\uace0 \uc774\ub97c \uc774\ud574\ud568\uc73c\ub85c\uc368 \uc131\ub2a5\uc744 \ucd5c\uc801\ud654\ud560 \uc218 \uc788\ub294 \ubc29\ubc95\uc744 \uc815\ub9ac\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. React \ub80c\ub354\ub9c1 \ud504\ub85c\uc138\uc2a4\uc758 \uae30\ubcf8 \uac1c\ub150 React\uc758 \ub80c\ub354\ub9c1 \ud504\ub85c\uc138\uc2a4\ub294 UI\ub97c \ud6a8\uc728\uc801\uc73c\ub85c \uc5c5\ub370\uc774\ud2b8\ud558\uae30 \uc704\ud574 \ub450 \uac00\uc9c0 \uc8fc\uc694 \ub2e8\uacc4\ub85c \ub098\ub269\ub2c8\ub2e4: **Render Phase(\ub80c\ub354 \ub2e8\uacc4)**\uc640&nbsp;Commit Phase(\ucee4\ubc0b \ub2e8\uacc4). [&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,55],"_links":{"self":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts\/637"}],"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=637"}],"version-history":[{"count":5,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts\/637\/revisions"}],"predecessor-version":[{"id":697,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts\/637\/revisions\/697"}],"wp:attachment":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=637"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=637"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=637"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}