{"id":631,"date":"2025-01-14T16:27:03","date_gmt":"2025-01-14T07:27:03","guid":{"rendered":"https:\/\/blog.anchors-biz.com\/?p=631"},"modified":"2025-01-14T16:27:03","modified_gmt":"2025-01-14T07:27:03","slug":"react%ec%9d%98-%ed%95%b5%ec%8b%ac-%ea%b0%9c%eb%85%90-%ec%9d%b4%ed%95%b4%ed%95%98%ea%b8%b0-virtual-dom","status":"publish","type":"post","link":"https:\/\/blog.anchors-biz.com\/?p=631","title":{"rendered":"React\uc758 \ud575\uc2ec \uac1c\ub150 \uc774\ud574\ud558\uae30: Virtual DOM"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

React\ub294 UI\ub97c \ud6a8\uc728\uc801\uc73c\ub85c \uc5c5\ub370\uc774\ud2b8\ud558\uace0 \uad00\ub9ac\ud558\uae30 \uc704\ud574 Virtual DOM\uc774\ub77c\ub294 \uac1c\ub150\uc744 \ub3c4\uc785\ud588\uc2b5\ub2c8\ub2e4. Virtual DOM\uc740 React\uc758 \uc131\ub2a5\uacfc \uc120\uc5b8\ud615 \ud504\ub85c\uadf8\ub798\ubc0d \ubc29\uc2dd\uc744 \uac00\ub2a5\ud558\uac8c \ud558\ub294 \ud575\uc2ec \uae30\uc220 \uc911 \ud558\ub098\uc785\ub2c8\ub2e4. \uc774\ubc88 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c\ub294 Virtual DOM\uc774 \ubb34\uc5c7\uc778\uc9c0, \uc5b4\ub5bb\uac8c \uc791\ub3d9\ud558\ub294\uc9c0, \uadf8\ub9ac\uace0 \uc65c \uc911\uc694\ud55c\uc9c0\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\n\n\n\n

1. Virtual DOM\uc774\ub780 \ubb34\uc5c7\uc778\uac00?<\/strong><\/h3>\n\n\n\n

Virtual DOM\uc740 React\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 \uac00\uc0c1 DOM \ud2b8\ub9ac<\/strong>\ub85c, \uc2e4\uc81c DOM(Document Object Model)\uc758 \uac00\ubcbc\uc6b4 \uc0ac\ubcf8\uc785\ub2c8\ub2e4. Virtual DOM\uc740 \uba54\ubaa8\ub9ac \ub0b4\uc5d0\uc11c \uc791\ub3d9\ud558\uba70, React\ub294 \uc774\ub97c \ud1b5\ud574 UI\uc758 \uc0c1\ud0dc\ub97c \ud6a8\uc728\uc801\uc73c\ub85c \uad00\ub9ac\ud558\uace0 \ubcc0\uacbd \uc0ac\ud56d\uc744 \ucd94\uc801\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n

Virtual DOM\uc758 \ud2b9\uc9d5<\/strong><\/h4>\n\n\n\n
  • \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\ub429\ub2c8\ub2e4.<\/li>
  • \ubd88\ubcc0\uc131<\/strong>: Virtual DOM\uc740 React Element\uc640 \ub9c8\ucc2c\uac00\uc9c0\ub85c \ubd88\ubcc0 \uac1d\uccb4\ub85c \uad00\ub9ac\ub429\ub2c8\ub2e4. \uc0c1\ud0dc\ub098 props\uac00 \ubcc0\uacbd\ub418\uba74 \uc0c8\ub85c\uc6b4 Virtual DOM \ud2b8\ub9ac\uac00 \uc0dd\uc131\ub429\ub2c8\ub2e4.<\/li>
  • UI\uc758 \uc2a4\ub0c5\uc0f7<\/strong>: Virtual DOM\uc740 UI\uc758 \ud604\uc7ac \uc0c1\ud0dc\ub97c \ub098\ud0c0\ub0b4\ub294 \uc2a4\ub0c5\uc0f7 \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n
    <\/div>\n\n\n\n
    \n\n\n\n

    2. Virtual DOM\uc758 \uc791\ub3d9 \uc6d0\ub9ac<\/strong><\/h3>\n\n\n\n

    Virtual DOM\uc740 React\uc758 \ub80c\ub354\ub9c1 \ud504\ub85c\uc138\uc2a4\uc5d0\uc11c \uc911\uc694\ud55c \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4. React\ub294 \uc0c1\ud0dc(state)\ub098 props\uac00 \ubcc0\uacbd\ub420 \ub54c\ub9c8\ub2e4 \uc0c8\ub85c\uc6b4 Virtual DOM\uc744 \uc0dd\uc131\ud558\uace0, \uc774\uc804 Virtual DOM\uacfc \ube44\uad50(diffing)\ud558\uc5ec \ubcc0\uacbd\ub41c \ubd80\ubd84\ub9cc \uc2e4\uc81c DOM\uc5d0 \ubc18\uc601\ud569\ub2c8\ub2e4. \uc774 \uacfc\uc815\uc744 \ud1b5\ud574 React\ub294 DOM \uc870\uc791\uc744 \ucd5c\uc18c\ud654\ud558\uace0 \uc131\ub2a5\uc744 \ucd5c\uc801\ud654 \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Virtual DOM\uc758 \uc791\ub3d9 \uacfc\uc815<\/strong><\/h4>\n\n\n\n
    1. \uc0c8\ub85c\uc6b4 Virtual DOM \uc0dd\uc131<\/strong>
      • \uc0c1\ud0dc\ub098 props\uac00 \ubcc0\uacbd\ub418\uba74 React\ub294 \uc0c8\ub85c\uc6b4 Virtual DOM \ud2b8\ub9ac\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/li>
      • \uc774 Virtual DOM\uc740 UI\uc758 \uc0c8\ub85c\uc6b4 \uc2a4\ub0c5\uc0f7\uc744 \ub098\ud0c0\ub0c5\ub2c8\ub2e4.<\/li><\/ul><\/li>
      • Diffing (\ube44\uad50)<\/strong>
        • React\ub294 \uc774\uc804 Virtual DOM\uacfc \uc0c8\ub85c\uc6b4 Virtual DOM\uc744 \ube44\uad50(diffing)\ud558\uc5ec \ubcc0\uacbd\ub41c \ubd80\ubd84\uc744 \ucc3e\uc2b5\ub2c8\ub2e4.<\/li>
        • \ubcc0\uacbd\ub41c \ubd80\ubd84\ub9cc \ud6a8\uc728\uc801\uc73c\ub85c \uacc4\uc0b0\ud558\uae30 \uc704\ud574 React\ub294 Reconciliation(\uc7ac\uc870\uc815)<\/strong> \uc54c\uace0\ub9ac\uc998\uc744 \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/li><\/ul><\/li>
        • \ud328\uce58 (Patch)<\/strong>
          • \ubcc0\uacbd\ub41c \ubd80\ubd84\ub9cc \uc2e4\uc81c DOM\uc5d0 \ubc18\uc601\ud569\ub2c8\ub2e4.<\/li>
          • React\ub294 \ucd5c\uc18c\ud55c\uc758 DOM \uc5c5\ub370\uc774\ud2b8\ub97c \uc218\ud589\ud558\uc5ec \uc131\ub2a5\uc744 \ucd5c\uc801\ud654\ud569\ub2c8\ub2e4.<\/li><\/ul><\/li><\/ol>\n\n\n\n
            \uc608\uc81c: Virtual DOM\uc758 \uc791\ub3d9<\/h5>\n\n\n\n
            import React, { useState } from \"react\";\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <h1>Count: {count}<\/h1>\n      <button onClick={() => setCount(count + 1)}>Increment<\/button>\n    <\/div>\n  );\n}<\/code><\/pre>\n\n\n\n
            1. \ucd08\uae30 \ub80c\ub354\ub9c1<\/strong>
              • React\ub294 <h1>Count: 0<\/h1><\/code>\uc640 <button><\/code>\uc744 \ud3ec\ud568\ud558\ub294 Virtual DOM \ud2b8\ub9ac\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/li>
              • \uc774 Virtual DOM\uc740 \uc2e4\uc81c DOM\uc5d0 \ubc18\uc601\ub429\ub2c8\ub2e4.<\/li><\/ul><\/li>
              • \uc0c1\ud0dc \ubcc0\uacbd<\/strong>
                • \ubc84\ud2bc\uc744 \ud074\ub9ad\ud558\uc5ec count<\/code>\uac00 1<\/code>\ub85c \ubcc0\uacbd\ub418\uba74, React\ub294 \uc0c8\ub85c\uc6b4 Virtual DOM \ud2b8\ub9ac\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/li>
                • \uc0c8\ub85c\uc6b4 Virtual DOM\uc740 <h1>Count: 1<\/h1><\/code>\ub97c \ud3ec\ud568\ud569\ub2c8\ub2e4.<\/li><\/ul><\/li>
                • Diffing \ubc0f \ud328\uce58<\/strong>
                  • React\ub294 \uc774\uc804 Virtual DOM\uacfc \uc0c8\ub85c\uc6b4 Virtual DOM\uc744 \ube44\uad50\ud558\uc5ec <h1><\/code>\uc758 \ud14d\uc2a4\ud2b8\ub9cc \ubcc0\uacbd\ub41c \uac83\uc744 \uac10\uc9c0\ud569\ub2c8\ub2e4.<\/li>
                  • React\ub294 \ubcc0\uacbd\ub41c \ubd80\ubd84\ub9cc \uc2e4\uc81c DOM\uc5d0 \uc5c5\ub370\uc774\ud2b8\ud569\ub2c8\ub2e4.<\/li><\/ul><\/li><\/ol>\n\n\n\n
                    <\/div>\n\n\n\n
                    \n\n\n\n
                    3. Virtual DOM\uc774 \uc911\uc694\ud55c \uc774\uc720<\/strong><\/h3>\n\n\n\n
                    Virtual DOM\uc740 React\uc758 \uc131\ub2a5\uacfc \uac1c\ubc1c\uc790 \uacbd\ud5d8\uc744 \ud06c\uac8c \ud5a5\uc0c1\uc2dc\ud0a4\ub294 \ub370 \uc911\uc694\ud55c \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4. \ub2e4\uc74c\uc740 Virtual DOM\uc774 \uc911\uc694\ud55c \uc774\uc720\uc785\ub2c8\ub2e4:<\/p>\n\n\n\n
                    1) DOM \uc870\uc791 \ucd5c\uc18c\ud654<\/strong><\/h4>\n\n\n\n
                    • \uc2e4\uc81c DOM\uc740 \ubb34\uac81\uace0, \uc870\uc791 \uc18d\ub3c4\uac00 \ub290\ub9bd\ub2c8\ub2e4.<\/li>
                    • Virtual DOM\uc740 \uba54\ubaa8\ub9ac \ub0b4\uc5d0\uc11c \uc791\ub3d9\ud558\uba70, \ubcc0\uacbd \uc0ac\ud56d\uc744 \ud6a8\uc728\uc801\uc73c\ub85c \uacc4\uc0b0\ud558\uc5ec \ucd5c\uc18c\ud55c\uc758 DOM \uc5c5\ub370\uc774\ud2b8\ub9cc \uc218\ud589\ud569\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n
                      2) \uc120\uc5b8\ud615 \ud504\ub85c\uadf8\ub798\ubc0d \uc9c0\uc6d0<\/strong><\/h4>\n\n\n\n
                      • React\ub294 Virtual DOM\uc744 \uc0ac\uc6a9\ud558\uc5ec UI\uc758 \uc0c1\ud0dc\ub97c \uc120\uc5b8\uc801\uc73c\ub85c \ud45c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>
                      • \uac1c\ubc1c\uc790\ub294 “\uc5b4\ub5bb\uac8c \uc5c5\ub370\uc774\ud2b8\ud560\uc9c0”\uac00 \uc544\ub2c8\ub77c “\ubb34\uc5c7\uc744 \ub80c\ub354\ub9c1\ud560\uc9c0”\uc5d0\ub9cc \uc9d1\uc911\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n
                        3) \uc131\ub2a5 \ucd5c\uc801\ud654<\/strong><\/h4>\n\n\n\n
                        • Virtual DOM\uc740 \ubcc0\uacbd \uc0ac\ud56d\uc744 \ucd94\uc801\ud558\uace0, \ucd5c\uc18c\ud55c\uc758 DOM \uc5c5\ub370\uc774\ud2b8\ub97c \uc218\ud589\ud558\uc5ec \uc131\ub2a5\uc744 \ucd5c\uc801\ud654\ud569\ub2c8\ub2e4.<\/li>
                        • React\uc758 Diffing \uc54c\uace0\ub9ac\uc998\uc740 \ubcc0\uacbd\ub41c \ubd80\ubd84\ub9cc \ud6a8\uc728\uc801\uc73c\ub85c \uacc4\uc0b0\ud569\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n
                          4) \ud06c\ub85c\uc2a4 \ud50c\ub7ab\ud3fc \uc9c0\uc6d0<\/strong><\/h4>\n\n\n\n
                          • Virtual DOM\uc740 \ube0c\ub77c\uc6b0\uc800 DOM\ubfd0\ub9cc \uc544\ub2c8\ub77c React Native\uc640 \uac19\uc740 \ub2e4\ub978 \ud50c\ub7ab\ud3fc\uc5d0\uc11c\ub3c4 \ub3d9\uc77c\ud55c \ubc29\uc2dd\uc73c\ub85c \uc791\ub3d9\ud569\ub2c8\ub2e4.<\/li>
                          • \uc774\ub97c \ud1b5\ud574 React\ub294 \ub2e4\uc591\ud55c \ud50c\ub7ab\ud3fc\uc5d0\uc11c \uc77c\uad00\ub41c \uac1c\ubc1c \uacbd\ud5d8\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n
                            <\/div>\n\n\n\n
                            \n\n\n\n
                            4. Virtual DOM\uacfc \uc2e4\uc81c DOM\uc758 \ucc28\uc774<\/strong><\/h3>\n\n\n\n
                            Virtual DOM\uacfc \uc2e4\uc81c DOM\uc740 React\uc758 \ub80c\ub354\ub9c1 \uacfc\uc815\uc5d0\uc11c \uc911\uc694\ud55c \uc5ed\ud560\uc744 \ud558\uc9c0\ub9cc, \ub458\uc740 \uc644\uc804\ud788 \ub2e4\ub978 \uac1c\ub150\uc785\ub2c8\ub2e4. Virtual DOM\uc740 \uc2e4\uc81c DOM\uc758 \uac00\ubcbc\uc6b4 \ubcf5\uc0ac\ubcf8<\/strong>\uc73c\ub85c, React\uac00 UI\ub97c \ud6a8\uc728\uc801\uc73c\ub85c \uad00\ub9ac\ud558\uae30 \uc704\ud574 \uc0ac\uc6a9\ud558\ub294 JavaScript\ub85c \ub9cc\ub4e4\uc5b4\uc9c4 \ub370\uc774\ud130 \uad6c\uc870<\/strong>\uc785\ub2c8\ub2e4. \ubc18\uba74, \uc2e4\uc81c DOM\uc740 \ube0c\ub77c\uc6b0\uc800\uac00 \ud654\uba74\uc5d0 \ud45c\uc2dc\ud558\ub294 HTML \uc694\uc18c\uc758 \ud2b8\ub9ac \uad6c\uc870<\/strong>\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n
                            Virtual DOM\uacfc \uc2e4\uc81c DOM\uc758 \uc8fc\uc694 \ucc28\uc774\uc810<\/strong><\/h4>\n\n\n\n
                            \"\"<\/figure>\n\n\n\n
                            <\/div>\n\n\n\n
                            \n
                            \n
                            \n
                            \n\n\n\n
                            5. Virtual DOM\uc758 \ud55c\uacc4<\/strong><\/h3>\n\n\n\n
                            Virtual DOM\uc740 React\uc758 \uac15\ub825\ud55c \uae30\ub2a5\uc774\uc9c0\ub9cc, \uba87 \uac00\uc9c0 \ud55c\uacc4\ub3c4 \uc874\uc7ac\ud569\ub2c8\ub2e4:<\/p>\n\n\n\n
                            1. \ucd08\uae30 \ub80c\ub354\ub9c1 \ube44\uc6a9<\/strong>
                              • Virtual DOM\uc744 \uc0dd\uc131\ud558\ub294 \ub370 \ucd08\uae30 \ube44\uc6a9\uc774 \ubc1c\uc0dd\ud569\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uc774\ud6c4 \uc5c5\ub370\uc774\ud2b8\ub294 \ud6a8\uc728\uc801\uc785\ub2c8\ub2e4.<\/li><\/ul><\/li>
                              • \ubcf5\uc7a1\ud55c Diffing \ube44\uc6a9<\/strong>
                                • Virtual DOM\uc758 Diffing \uc54c\uace0\ub9ac\uc998\uc740 \ud6a8\uc728\uc801\uc774\uc9c0\ub9cc, \ub9e4\uc6b0 \ud070 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c\ub294 \uc131\ub2a5 \ubb38\uc81c\uac00 \ubc1c\uc0dd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><\/ul><\/li>
                                • DOM \uc870\uc791\uc774 \ub9ce\uc740 \uc560\ud50c\ub9ac\ucf00\uc774\uc158<\/strong>
                                  • Virtual DOM\uc740 DOM \uc870\uc791\uc774 \ub9ce\uc740 \uc560\ud50c\ub9ac\ucf00\uc774\uc158(\uc608: \uc560\ub2c8\uba54\uc774\uc158, \uac8c\uc784)\uc5d0\uc11c\ub294 \ucd5c\uc801\uc758 \uc120\ud0dd\uc774 \uc544\ub2d0 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub7f0 \uacbd\uc6b0, React \uc678\uc758 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub098 \ud504\ub808\uc784\uc6cc\ud06c\uac00 \ub354 \uc801\ud569\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><\/ul><\/li><\/ol>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
                                    <\/div>\n\n\n\n
                                    \n\n\n\n
                                    6. Virtual DOM\uacfc React\uc758 \uad00\uacc4<\/strong><\/h3>\n\n\n\n
                                    Virtual DOM\uc740 React\uc758 \ud575\uc2ec \uac1c\ub150 \uc911 \ud558\ub098\ub85c, React\uc758 \uc120\uc5b8\ud615 \ud504\ub85c\uadf8\ub798\ubc0d \ubc29\uc2dd\uacfc \ud6a8\uc728\uc801\uc778 \ub80c\ub354\ub9c1\uc744 \uac00\ub2a5\ud558\uac8c \ud569\ub2c8\ub2e4. React\ub294 Virtual DOM\uc744 \uc0ac\uc6a9\ud558\uc5ec UI\uc758 \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud558\uace0, \ubcc0\uacbd \uc0ac\ud56d\uc744 \ud6a8\uc728\uc801\uc73c\ub85c \ubc18\uc601\ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 React\ub294 \ubcf5\uc7a1\ud55c UI\ub97c \uac04\ub2e8\ud558\uace0 \uc608\uce21 \uac00\ub2a5\ud558\uac8c \uad00\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
                                    <\/div>\n\n\n\n
                                    \n\n\n\n
                                    \uacb0\ub860: Virtual DOM\uc758 \uc911\uc694\uc131<\/strong><\/h3>\n\n\n\n
                                    Virtual DOM\uc740 React\uc758 \uc131\ub2a5\uacfc \uc120\uc5b8\ud615 \ud504\ub85c\uadf8\ub798\ubc0d \ubc29\uc2dd\uc744 \uac00\ub2a5\ud558\uac8c \ud558\ub294 \ud575\uc2ec \uae30\uc220\uc785\ub2c8\ub2e4. React\ub294 Virtual DOM\uc744 \uc0ac\uc6a9\ud558\uc5ec UI\uc758 \uc0c1\ud0dc\ub97c \ud6a8\uc728\uc801\uc73c\ub85c \uad00\ub9ac\ud558\uace0, \ubcc0\uacbd \uc0ac\ud56d\uc744 \ucd5c\uc18c\ud55c\uc758 DOM \uc5c5\ub370\uc774\ud2b8\ub85c \ubc18\uc601\ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 React\ub294 \ubcf5\uc7a1\ud55c UI\ub97c \uac04\ub2e8\ud558\uace0 \uc608\uce21 \uac00\ub2a5\ud558\uac8c \uad00\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
                                    Virtual DOM\uc758 \uc791\ub3d9 \uc6d0\ub9ac\uc640 \uc911\uc694\uc131\uc744 \uc774\ud574\ud558\uba74, React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc131\ub2a5\uc744 \ucd5c\uc801\ud654\ud558\uace0, React\uc758 \ub80c\ub354\ub9c1 \ud504\ub85c\uc138\uc2a4\ub97c \ub354 \uae4a\uc774 \uc774\ud574\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. Virtual DOM\uc740 React\uc758 \uac15\ub825\ud55c \uae30\ub2a5 \uc911 \ud558\ub098\ub85c, React\ub97c \uc0ac\uc6a9\ud558\ub294 \uac1c\ubc1c\uc790\ub77c\uba74 \ubc18\ub4dc\uc2dc \uc774\ud574\ud574\uc57c \ud560 \ud575\uc2ec \uac1c\ub150\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n
                                    <\/p>\n\n\n\n
                                    <\/div>\n\n\n\n
                                    \"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
                                    React\ub294 UI\ub97c \ud6a8\uc728\uc801\uc73c\ub85c \uc5c5\ub370\uc774\ud2b8\ud558\uace0 \uad00\ub9ac\ud558\uae30 \uc704\ud574 Virtual DOM\uc774\ub77c\ub294 \uac1c\ub150\uc744 \ub3c4\uc785\ud588\uc2b5\ub2c8\ub2e4. Virtual DOM\uc740 React\uc758 \uc131\ub2a5\uacfc \uc120\uc5b8\ud615 \ud504\ub85c\uadf8\ub798\ubc0d \ubc29\uc2dd\uc744 \uac00\ub2a5\ud558\uac8c \ud558\ub294 \ud575\uc2ec \uae30\uc220 \uc911 \ud558\ub098\uc785\ub2c8\ub2e4. \uc774\ubc88 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c\ub294 Virtual DOM\uc774 \ubb34\uc5c7\uc778\uc9c0, \uc5b4\ub5bb\uac8c \uc791\ub3d9\ud558\ub294\uc9c0, \uadf8\ub9ac\uace0 \uc65c \uc911\uc694\ud55c\uc9c0\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. 1. Virtual DOM\uc774\ub780 \ubb34\uc5c7\uc778\uac00? Virtual DOM\uc740 React\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 \uac00\uc0c1 DOM \ud2b8\ub9ac\ub85c, \uc2e4\uc81c DOM(Document Object Model)\uc758 \uac00\ubcbc\uc6b4 \uc0ac\ubcf8\uc785\ub2c8\ub2e4. Virtual DOM\uc740 \uba54\ubaa8\ub9ac \ub0b4\uc5d0\uc11c […]<\/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\/631"}],"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=631"}],"version-history":[{"count":5,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts\/631\/revisions"}],"predecessor-version":[{"id":695,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts\/631\/revisions\/695"}],"wp:attachment":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=631"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=631"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=631"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}