{"id":609,"date":"2025-01-02T16:56:08","date_gmt":"2025-01-02T07:56:08","guid":{"rendered":"https:\/\/blog.anchors-biz.com\/?p=609"},"modified":"2025-01-02T16:56:08","modified_gmt":"2025-01-02T07:56:08","slug":"%ec%9b%b9-%eb%b8%8c%eb%9d%bc%ec%9a%b0%ec%a0%80%ec%9d%98-%ec%9e%91%eb%8f%99-%ec%9b%90%eb%a6%ac","status":"publish","type":"post","link":"https:\/\/blog.anchors-biz.com\/?p=609","title":{"rendered":"\uc6f9 \ube0c\ub77c\uc6b0\uc800\uc758 \uc791\ub3d9 \uc6d0\ub9ac"},"content":{"rendered":"\n<p><\/p>\n\n\n\n<h2><strong>\ub4e4\uc5b4\uac00\uba70<\/strong><\/h2>\n\n\n\n<p>\ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc744 \uc2dc\uc791\ud558\ub294 \ub9ce\uc740 \uac1c\ubc1c\uc790\ub4e4\uc774 React, Vue, Angular\uc640 \uac19\uc740 \ud604\ub300\uc801\uc778 \ud504\ub808\uc784\uc6cc\ud06c\ub97c \ubc14\ub85c \ubc30\uc6b0\ub824\uace0 \ud569\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uc774\ub7ec\ud55c \ud504\ub808\uc784\uc6cc\ud06c\ub4e4\uc758 \ud575\uc2ec \uac1c\ub150\uacfc \ucd5c\uc801\ud654 \uc804\ub7b5\uc744 \uc81c\ub300\ub85c \uc774\ud574\ud558\uae30 \uc704\ud574\uc11c\ub294, \uadf8 \uae30\ubc18\uc774 \ub418\ub294 \uc6f9 \ube0c\ub77c\uc6b0\uc800\uc758 \ub3d9\uc791 \uc6d0\ub9ac\ub97c \uba3c\uc800 \uc774\ud574\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<p>\ud2b9\ud788 React\uc758 Virtual DOM\uc774\ub098 \uc0c1\ud0dc \uad00\ub9ac \uc2dc\uc2a4\ud15c\uc774 \uc65c \ud544\uc694\ud55c\uc9c0, \uadf8\ub9ac\uace0 \uc774\uac83\uc774 \uc5b4\ub5bb\uac8c \uc131\ub2a5 \ud5a5\uc0c1\uc5d0 \ub3c4\uc6c0\uc774 \ub418\ub294\uc9c0\ub97c \uc774\ud574\ud558\ub824\uba74, \ube0c\ub77c\uc6b0\uc800\uc758 \ub80c\ub354\ub9c1 \ud504\ub85c\uc138\uc2a4\uc640 DOM \uc5c5\ub370\uc774\ud2b8 \uacfc\uc815\uc5d0 \ub300\ud55c \uae30\ubcf8\uc801\uc778 \uc9c0\uc2dd\uc774 \ud544\uc218\uc801\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<p>\uc774\ub7ec\ud55c \uae30\ucd08 \uc9c0\uc2dd\uc744 \ubc14\ud0d5\uc73c\ub85c \ud560 \ub54c, React\uc758 \ucca0\ud559\uacfc \ucd5c\uc801\ud654 \uc804\ub7b5\uc744 \ub354 \uae4a\uc774 \uc774\ud574\ud560 \uc218 \uc788\uc73c\uba70, \ub354 \ud6a8\uc728\uc801\uc778 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\uc81c \ube0c\ub77c\uc6b0\uc800\uac00 \uc5b4\ub5bb\uac8c \uc6f9 \ud398\uc774\uc9c0\ub97c \ucc98\ub9ac\ud558\uace0 \ud654\uba74\uc5d0 \ud45c\uc2dc\ud558\ub294\uc9c0, \uadf8 \ud575\uc2ec \uacfc\uc815\uc744 \uc790\uc138\ud788 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4<\/p>\n\n\n\n<div style=\"height:40px\" 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>1. \uc6f9 \ube0c\ub77c\uc6b0\uc800\uc758 \ub80c\ub354\ub9c1 \ud504\ub85c\uc138\uc2a4<\/strong><\/h3>\n\n\n\n<p>React\uc758 \ub3d9\uc791 \uc6d0\ub9ac\ub97c \uc774\ud574\ud558\uae30 \uc704\ud574\uc11c\ub294 \uba3c\uc800 \uc6f9 \ube0c\ub77c\uc6b0\uc800\uac00 \uc5b4\ub5bb\uac8c \uc6f9 \ud398\uc774\uc9c0\ub97c \ud654\uba74\uc5d0 \uadf8\ub9ac\ub294\uc9c0, \uadf8 \uae30\ubcf8\uc801\uc778 \ub3d9\uc791 \ubc29\uc2dd\uc744 \uc54c\uc544\uc57c \ud569\ub2c8\ub2e4. \uc6f9 \ube0c\ub77c\uc6b0\uc800\ub294 HTML, CSS, JavaScript \ucf54\ub4dc\ub97c \ud654\uba74\uc758 \ud53d\uc140\ub85c \ubcc0\ud658\ud558\uae30 \uc704\ud574 &#8216;\ud06c\ub9ac\ud2f0\uceec \ub80c\ub354\ub9c1 \ud328\uc2a4&#8217;\ub77c\ub294 \uc77c\ub828\uc758 \uacfc\uc815\uc744 \uac70\uce58\uac8c \ub429\ub2c8\ub2e4. \uc774\ub7ec\ud55c \ube0c\ub77c\uc6b0\uc800\uc758 \uae30\ubcf8 \ub80c\ub354\ub9c1 \uba54\ucee4\ub2c8\uc998\uc744 \uc774\ud574\ud558\ub294 \uac83\uc740 React\uac00 \uc65c \ub4f1\uc7a5\ud588\uace0, \uc5b4\ub5a4 \ubb38\uc81c\ub97c \ud574\uacb0\ud558\uace0\uc790 \ud588\ub294\uc9c0\ub97c \ud30c\uc545\ud558\ub294 \ub370 \ud575\uc2ec\uc801\uc778 \ubc30\uacbd\uc9c0\uc2dd\uc774 \ub429\ub2c8\ub2e4. \uc774\ubc88 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c\ub294 \ube0c\ub77c\uc6b0\uc800\uc758 \ub80c\ub354\ub9c1 \ud504\ub85c\uc138\uc2a4\ubd80\ud130 \uc2dc\uc791\ud558\uc5ec React\uc758 \ub3d9\uc791 \uc6d0\ub9ac\uae4c\uc9c0 \ub2e8\uacc4\uc801\uc73c\ub85c \uc0b4\ud3b4\ubcf4\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<div style=\"height:33px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4><strong>\ud06c\ub9ac\ud2f0\uceec \ub80c\ub354\ub9c1 \ud328\uc2a4<\/strong> (Critical Rendering Path)<\/h4>\n\n\n\n<p>\uc6f9 \ube0c\ub77c\uc6b0\uc800\ub294 HTML, CSS, JavaScript \ucf54\ub4dc\ub97c \ud654\uba74\uc5d0 \ud53d\uc140\ub85c \ubcc0\ud658\ud558\uae30 \uc704\ud574 &#8216;\ud06c\ub9ac\ud2f0\uceec \ub80c\ub354\ub9c1 \ud328\uc2a4&#8217;\ub77c\ub294 \uc77c\ub828\uc758 \ub2e8\uacc4\ub97c \uac70\uce58\uac8c \ub429\ub2c8\ub2e4. \uc774\ub294 \ube0c\ub77c\uc6b0\uc800\uac00 \uc6f9 \ud398\uc774\uc9c0\ub97c \ub80c\ub354\ub9c1\ud558\ub294 \ud575 \uacfc\uc815\uc73c\ub85c, \ub2e4\uc74c\uacfc \uac19\uc740 \ub2e8\uacc4\ub4e4\ub85c \uad6c\uc131\ub429\ub2c8\ub2e4:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/rendering-path-1-1024x491.png\" alt=\"\" class=\"wp-image-612\" width=\"850\" height=\"407\" srcset=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/rendering-path-1-1024x491.png 1024w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/rendering-path-1-300x144.png 300w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/rendering-path-1-768x368.png 768w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/rendering-path-1.png 1258w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><\/figure>\n\n\n\n<h5>1) DOM\uacfc CSSOM \uc0dd\uc131<\/h5>\n\n\n\n<ul><li>HTML \ucf54\ub4dc\ub294 \ud30c\uc2f1\ub418\uc5b4 DOM(Document Object Model) \ud2b8\ub9ac\ub85c \ubcc0\ud658\ub429\ub2c8\ub2e4.<\/li><li>CSS \ucf54\ub4dc\ub294 CSSOM(CSS Object Model)\uc73c\ub85c \ubcc0\ud658\ub429\ub2c8\ub2e4.<\/li><li>\uc774 \ub450 \uacfc\uc815\uc740 \ube0c\ub77c\uc6b0\uc800\uac00 \uc6f9 \ud398\uc774\uc9c0\ub97c \uc774\ud574\ud558\uae30 \uc704\ud55c \uccab \ub2e8\uacc4\uc785\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/DOM-1024x641.webp\" alt=\"\" class=\"wp-image-613\" width=\"606\" height=\"379\" srcset=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/DOM-1024x641.webp 1024w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/DOM-300x188.webp 300w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/DOM-768x481.webp 768w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/DOM.webp 1042w\" sizes=\"(max-width: 606px) 100vw, 606px\" \/><\/figure>\n\n\n\n<h5>2) \ub80c\ub354 \ud2b8\ub9ac \uc0dd\uc131<\/h5>\n\n\n\n<ul><li>DOM\uacfc CSSOM\uc774 \uacb0\ud569\ub418\uc5b4 \ub80c\ub354 \ud2b8\ub9ac\uac00 \ub9cc\ub4e4\uc5b4\uc9d1\ub2c8\ub2e4.<\/li><li>\ub80c\ub354 \ud2b8\ub9ac\ub294 \uc2e4\uc81c\ub85c \ud654\uba74\uc5d0 \uadf8\ub824\uc9c8 \uc694\uc18c\ub4e4\uc758 \uc2dc\uac01\uc801 \uc815\ubcf4\ub97c \ud3ec\ud568\ud55c \uccad\uc0ac\uc9c4\uc785\ub2c8\ub2e4.<\/li><li>\ud654\uba74\uc5d0 \ud45c\uc2dc\ub418\uc9c0 \uc54a\ub294 \uc694\uc18c(\uc608: display: none)\ub294 \ub80c\ub354 \ud2b8\ub9ac\uc5d0 \ud3ec\ud568\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n<h5>3) \ub808\uc774\uc544\uc6c3(Layout)<\/h5>\n\n\n\n<ul><li>\ub80c\ub354 \ud2b8\ub9ac\ub97c \uae30\ubc18\uc73c\ub85c \uac01 \uc694\uc18c\uc758 \uc815\ud655\ud55c \uc704\uce58\uc640 \ud06c\uae30\ub97c \uacc4\uc0b0\ud569\ub2c8\ub2e4.<\/li><li>\ubdf0\ud3ec\ud2b8 \ub0b4\uc5d0\uc11c \uac01 \uc694\uc18c\uac00 \uc5b4\ub514\uc5d0 \uc704\uce58\ud560\uc9c0 \uacb0\uc815\ub429\ub2c8\ub2e4.<\/li><li>\uc774 \uacfc\uc815\uc740 \ub9ac\ud50c\ub85c\uc6b0(reflow)\ub77c\uace0\ub3c4 \ubd88\ub9bd\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n<h5>4) \ud398\uc778\ud305(Painting)<\/h5>\n\n\n\n<ul><li>\uacc4\uc0b0\ub41c \ub808\uc774\uc544\uc6c3\uc744 \ubc14\ud0d5\uc73c\ub85c \uc2e4\uc81c \ud53d\uc140\uc744 \ud654\uba74\uc5d0 \uadf8\ub9ac\ub294 \uc791\uc5c5\uc774 \uc9c4\ud589\ub429\ub2c8\ub2e4.<\/li><li>\ubaa8\ub4e0 \uc2dc\uac01\uc801 \uc694\uc18c(\uc0c9\uc0c1, \uc774\ubbf8\uc9c0, \ud14c\ub450\ub9ac \ub4f1)\uac00 \uc774 \ub2e8\uacc4\uc5d0\uc11c \ucc98\ub9ac\ub429\ub2c8\ub2e4.<\/li><li>\uc774 \uacfc\uc815\uc744 \ub9ac\ud398\uc778\ud2b8(repaint)\ub77c\uace0\ub3c4 \ud569\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n<div style=\"height:24px\" 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>2. \uc6f9 \ube0c\ub77c\uc6b0\uc800\uc758 DOM \uc5c5\ub370\uc774\ud2b8<\/strong><\/h3>\n\n\n\n<p>\uc55e\uc11c \uc0b4\ud3b4\ubcf8 \ube0c\ub77c\uc6b0\uc800\uc758 \ub80c\ub354\ub9c1 \ud504\ub85c\uc138\uc2a4\ub97c \uc774\ud574\ud588\ub2e4\uba74, \uc774\uc81c \uc2e4\uc81c\ub85c \uc6f9 \ud398\uc774\uc9c0\uac00 \uc5b4\ub5bb\uac8c \uc5c5\ub370\uc774\ud2b8\ub418\ub294\uc9c0 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800\ub294 JavaScript\ub97c \ud1b5\ud574 DOM\uc774 \ubcc0\uacbd\ub420 \ub54c\ub9c8\ub2e4 \uc55e\uc11c \uc124\uba85\ud55c \ud06c\ub9ac\ud2f0\uceec \ub80c\ub354\ub9c1 \ud328\uc2a4\uc758 \uacfc\uc815\uc744 \ub2e4\uc2dc \uac70\uce58\uac8c \ub429\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uc5c5\ub370\uc774\ud2b8 \uacfc\uc815\uc774 \uc5b4\ub5bb\uac8c \uc774\ub8e8\uc5b4\uc9c0\ub294\uc9c0, \uadf8\ub9ac\uace0 \uc774 \uacfc\uc815\uc5d0\uc11c \ubc1c\uc0dd\ud560 \uc218 \uc788\ub294 \uc131\ub2a5 \ubb38\uc81c\uc640 \ucd5c\uc801\ud654 \ubc29\uc548\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4><strong>\uc5c5\ub370\uc774\ud2b8\ub780?<\/strong><\/h4>\n\n\n\n<p>\uc6f9 \ud398\uc774\uc9c0\uc5d0\uc11c \uc5c5\ub370\uc774\ud2b8\ub780 \uc0ac\uc6a9\uc790\uc758 \uc0c1\ud638\uc791\uc6a9\uc774\ub098 \ub370\uc774\ud130 \ubcc0\uacbd\uc73c\ub85c \uc778\ud574 \ud654\uba74\uc758 \ub0b4\uc6a9\uc774 \ubcc0\uacbd\ub418\ub294 \uac83\uc744 \uc758\ubbf8\ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4:<\/p>\n\n\n\n<ul><li>\ubc84\ud2bc \ud074\ub9ad\uc73c\ub85c \uc0c8\ub85c\uc6b4 \ub0b4\uc6a9 \ucd94\uac00<\/li><li>\ud3fc \uc785\ub825\uac12 \ubcc0\uacbd<\/li><li>\ub370\uc774\ud130 \ub85c\ub529 \ud6c4 \ud654\uba74 \uac31\uc2e0<\/li><li>\uc560\ub2c8\uba54\uc774\uc158\uc774\ub098 \uc2dc\uac01\uc801 \ud6a8\uacfc \uc801\uc6a9<\/li><\/ul>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4><strong>DOM \uc5c5\ub370\uc774\ud2b8\uc758 \uae30\ubcf8 \uc6d0\ub9ac\uc640 \uacfc\uc815<\/strong><\/h4>\n\n\n\n<p>\uc6f9 \ud398\uc774\uc9c0\uac00 \uc0ac\uc6a9\uc790\uc640 \uc0c1\ud638\uc791\uc6a9\ud558\uba74\uc11c \ub3d9\uc801\uc73c\ub85c \ubcc0\uacbd\ub418\uae30 \uc704\ud574\uc11c\ub294 JavaScript\ub97c \ud1b5\ud55c DOM \uc870\uc791\uc774 \ud544\uc694\ud569\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800\ub294 \uc774\ub7ec\ud55c DOM \uc870\uc791\uc774 \ubc1c\uc0dd\ud558\uba74 \uc989\uc2dc \uc774\ub97c \uac10\uc9c0\ud558\uace0, \ub2e4\uc74c\uacfc \uac19\uc740 \ub2e8\uacc4\ub97c \uac70\uce58\uac8c \ub429\ub2c8\ub2e4:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"459\" src=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/rendering-path2-1024x459.png\" alt=\"\" class=\"wp-image-615\" srcset=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/rendering-path2-1024x459.png 1024w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/rendering-path2-300x135.png 300w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/rendering-path2-768x344.png 768w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/rendering-path2.png 1231w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h5><strong>1. \ubcc0\uacbd \uac10\uc9c0<\/strong><\/h5>\n\n\n\n<p>\ube0c\ub77c\uc6b0\uc800\ub294 JavaScript\ub97c \ud1b5\ud55c DOM \uc870\uc791\uc774 \ubc1c\uc0dd\ud558\uba74 \uc989\uc2dc \uc774\ub97c \uac10\uc9c0\ud569\ub2c8\ub2e4. DOM\uc774 \ubcc0\uacbd\ub418\uba74 \ub2e4\uc74c\uacfc \uac19\uc740 \uc5f0\uc1c4\uc801\uc778 \ud504\ub85c\uc138\uc2a4\uac00 \uc2dc\uc791\ub429\ub2c8\ub2e4:<\/p>\n\n\n\n<h5><strong>2. \ub80c\ub354 \ud2b8\ub9ac \uc7ac\uad6c\uc131<\/strong><\/h5>\n\n\n\n<ul><li>\ubcc0\uacbd\ub41c DOM\uacfc CSSOM\uc744 \uae30\ubc18\uc73c\ub85c \uc0c8\ub85c\uc6b4 \ub80c\ub354 \ud2b8\ub9ac\ub97c \uad6c\uc131<\/li><li>\ud654\uba74\uc5d0 \uc2e4\uc81c\ub85c \ud45c\uc2dc\ub420 \uc694\uc18c\ub4e4\uc758 \uad6c\uc870\uc640 \uc2a4\ud0c0\uc77c \uc815\ubcf4 \uac31\uc2e0<\/li><li>\ubcc0\uacbd\ub41c \ubd80\ubd84\uacfc \uc601\ud5a5\uc744 \ubc1b\ub294 \ubaa8\ub4e0 \uc694\uc18c\ub4e4\uc744 \ud3ec\ud568<\/li><\/ul>\n\n\n\n<h5><strong>3. \ub808\uc774\uc544\uc6c3 \uc7ac\uacc4\uc0b0 (Reflow)<\/strong><\/h5>\n\n\n\n<ul><li>\uc0c8\ub85c\uc6b4 \ub80c\ub354 \ud2b8\ub9ac\ub97c \uae30\ubc18\uc73c\ub85c \uac01 \uc694\uc18c\uc758 \ud06c\uae30\uc640 \uc704\uce58\ub97c \ub2e4\uc2dc \uacc4\uc0b0<\/li><li>\ubcc0\uacbd\ub41c \uc694\uc18c\uc640 \uadf8 \uc8fc\ubcc0 \uc694\uc18c\ub4e4\uc758 \uae30\ud558\ud559\uc801 \uc815\ubcf4 \uc5c5\ub370\uc774\ud2b8<\/li><li>\uc694\uc18c\uac04\uc758 \uc0c1\ub300\uc801 \uc704\uce58 \uad00\uacc4 \uc7ac\uc815\ub9bd<\/li><\/ul>\n\n\n\n<h5><strong>4. \ud398\uc778\ud305 \uac31\uc2e0 (Repaint)<\/strong><\/h5>\n\n\n\n<ul><li>\uacc4\uc0b0\ub41c \ub808\uc774\uc544\uc6c3\uc744 \uae30\ubc18\uc73c\ub85c \uc2e4\uc81c \ud654\uba74\uc5d0 \ud53d\uc140\uc744 \ub2e4\uc2dc \uadf8\ub9bc<\/li><li>\uc0c9\uc0c1, \ubc30\uacbd, \ud14c\ub450\ub9ac \ub4f1 \uc2dc\uac01\uc801 \uc694\uc18c\ub4e4\uc744 \uc0c8\ub86d\uac8c \ub80c\ub354\ub9c1<\/li><li>\ubcc0\uacbd\ub41c \ubaa8\ub4e0 \uc601\uc5ed\uc5d0 \ub300\ud574 \ud654\uba74 \uac31\uc2e0<\/li><\/ul>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4><strong>\uc5c5\ub370\uc774\ud2b8 \uacfc\uc815\uc758 \ubb38\uc81c\uc810<\/strong><\/h4>\n\n\n\n<p>\ub808\uc774\uc544\uc6c3(Reflow)\uacfc \ud398\uc778\ud305(Repaint) \uacfc\uc815\uc740 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uac00\uc7a5 computationally expensive\ud55c \uc791\uc5c5\ub4e4\uc785\ub2c8\ub2e4. \ud2b9\ud788 \ub808\uc774\uc544\uc6c3 \uacc4\uc0b0\uc740 \uc694\uc18c\uc758 \uc704\uce58\uc640 \ud06c\uae30\ub97c \uacb0\uc815\ud558\uae30 \uc704\ud574 \ub2e4\ub978 \ubaa8\ub4e0 \uc694\uc18c\ub4e4\uacfc\uc758 \uad00\uacc4\ub97c \uace0\ub824\ud574\uc57c \ud558\ubbc0\ub85c, \ub9e4\uc6b0 \ubcf5\uc7a1\ud558\uace0 \ube44\uc6a9\uc774 \ub9ce\uc774 \ub4dc\ub294 \uc791\uc5c5\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<p>\uc608\ub97c \ub4e4\uc5b4, \ub2e4\uc74c\uacfc \uac19\uc740 \ucf54\ub4dc\ub294 \uc2ec\uac01\ud55c \uc131\ub2a5 \ubb38\uc81c\ub97c \uc77c\uc73c\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ \ubc84\ud2bc \ud074\ub9ad \uc2dc DOM\uc744 5000\ubc88 \uc218\uc815\ud558\ub294 \uacbd\uc6b0  \nfor(let i = 0; i &lt; 5000; i++) {  \n    document.body.innerHTML += `&lt;div&gt;${i}&lt;\/div&gt;`;  \n}  <\/code><\/pre>\n\n\n\n<p>\uc774 \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \ubb38\uc81c\ub97c \uc57c\uae30\ud569\ub2c8\ub2e4:<\/p>\n\n\n\n<ul><li>\ub9e4 \ubc18\ubcf5\ub9c8\ub2e4 \ub808\uc774\uc544\uc6c3 \uacc4\uc0b0\uc774 \ubc1c\uc0dd<\/li><li>\ubaa8\ub4e0 \uc694\uc18c\uc758 \uc704\uce58\uc640 \ud06c\uae30\ub97c \ub9e4\ubc88 \uc7ac\uacc4\uc0b0<\/li><li>\ub9e4\ubc88 \ud654\uba74\uc744 \ub2e4\uc2dc \uadf8\ub9ac\ub294 \ud398\uc778\ud305 \uc791\uc5c5 \ubc1c\uc0dd<\/li><li>\ube0c\ub77c\uc6b0\uc800\uc758 \uba54\uc778 \uc2a4\ub808\ub4dc\ub97c \ube14\ub85c\ud0b9\ud558\uc5ec \uc804\ubc18\uc801\uc778 \uc131\ub2a5 \uc800\ud558<\/li><li>\uc0ac\uc6a9\uc790 \uc778\ud130\ub799\uc158\uc5d0 \ub300\ud55c \uc751\ub2f5 \uc9c0\uc5f0<\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>\uc774\ub7ec\ud55c \ubb38\uc81c\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574\uc11c\ub294 DOM \uc870\uc791\uc744 \ucd5c\uc18c\ud654\ud558\uace0 \ud55c \ubc88\uc5d0 \ucc98\ub9ac\ud558\ub294 \uac83\uc774 \uc88b\uc2b5\ub2c8\ub2e4:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>\/\/ DOM \uc218\uc815\uc744 \ud55c \ubc88\uc5d0 \ucc98\ub9ac\ud558\ub294 \uacbd\uc6b0  \nlet elements = '';  \nfor(let i = 0; i &lt; 5000; i++) {  \n    elements += `&lt;div&gt;${i}&lt;\/div&gt;`;  \n}  \ndocument.body.innerHTML = elements;  \n<\/code><\/code><\/pre>\n\n\n\n<p>\uc774\ub807\uac8c \uc218\uc815\ud558\uba74 \ub808\uc774\uc544\uc6c3 \uacc4\uc0b0\uacfc \ud398\uc778\ud305\uc774 \ub2e8 \ud55c \ubc88\ub9cc \ubc1c\uc0dd\ud558\ubbc0\ub85c, \uc131\ub2a5\uc774 \ud06c\uac8c \ud5a5\uc0c1\ub429\ub2c8\ub2e4. \uc774\ucc98\ub7fc DOM \uc5c5\ub370\uc774\ud2b8 \uc2dc \uace0\ub824\ud574\uc57c \ud560 \uc8fc\uc694 \ucd5c\uc801\ud654 \ud3ec\uc778\ud2b8\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n\n\n\n<ul><li>DOM \uc218\uc815\uc744 \ucd5c\uc18c\ud654\ud558\uc5ec \ubd88\ud544\uc694\ud55c \ub80c\ub354\ub9c1 \uacfc\uc815\uc744 \uc904\uc785\ub2c8\ub2e4<\/li><li>\uc704 \uc608\uc2dc\ucc98\ub7fc \ubcc0\uacbd\uc0ac\ud56d\uc744 \ubaa8\uc544\uc11c \ud55c \ubc88\uc5d0 \ucc98\ub9ac\ud569\ub2c8\ub2e4<\/li><li>\ubd88\ud544\uc694\ud55c \ub9ac\ud50c\ub85c\uc6b0\/\ub9ac\ud398\uc778\ud2b8\uac00 \ubc1c\uc0dd\ud558\uc9c0 \uc54a\ub3c4\ub85d \uc8fc\uc758\ud569\ub2c8\ub2e4<\/li><li>\uc774\ub97c \ud1b5\ud574 \uc804\ubc18\uc801\uc778 \ub80c\ub354\ub9c1 \uc131\ub2a5\uc744 \ud5a5\uc0c1\uc2dc\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4<\/li><\/ul>\n\n\n\n<p>\uc774\ub7ec\ud55c \ucd5c\uc801\ud654 \uc6d0\uce59\ub4e4\uc744 \uace0\ub824\ud558\uc5ec DOM\uc744 \uc870\uc791\ud558\uba74, \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc131\ub2a5\uc744 \ud06c\uac8c \uac1c\uc120\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<div style=\"height:41px\" 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<p>\uc6f9 \ube0c\ub77c\uc6b0\uc800\uc758 \ub80c\ub354\ub9c1 \ud504\ub85c\uc138\uc2a4\uc640 DOM \uc5c5\ub370\uc774\ud2b8 \uba54\ucee4\ub2c8\uc998\uc744 \uc774\ud574\ud558\ub294 \uac83\uc740 \ud604\ub300 \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc758 \ud575\uc2ec \uae30\ucd08\uac00 \ub429\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uae30\ubcf8 \uc6d0\ub9ac\ub97c \uc774\ud574\ud568\uc73c\ub85c\uc368 \ub2e4\uc74c\uacfc \uac19\uc740 \uc774\uc810\uc744 \uc5bb\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n\n\n\n<ol><li><strong>\ud504\ub808\uc784\uc6cc\ud06c\uc758 \uae4a\uc740 \uc774\ud574<\/strong><ul><li>React\uc758 Virtual DOM\uc774 \uc65c \ud544\uc694\ud55c\uc9c0<\/li><li>\uc0c1\ud0dc \uad00\ub9ac \uc2dc\uc2a4\ud15c\uc758 \uc791\ub3d9 \uc6d0\ub9ac<\/li><li>\uc131\ub2a5 \ucd5c\uc801\ud654 \uc804\ub7b5\uc758 \ubc30\uacbd<\/li><\/ul><\/li><li><strong>\ub354 \ub098\uc740 \uac1c\ubc1c \uacb0\uc815<\/strong><ul><li>\uc131\ub2a5 \ubcd1\ubaa9 \ud604\uc0c1\uc758 \uc6d0\uc778 \ud30c\uc545<\/li><li>\uc801\uc808\ud55c \ucd5c\uc801\ud654 \uae30\ubc95 \uc120\ud0dd<\/li><li>\ud6a8\uc728\uc801\uc778 DOM \uc870\uc791 \ubc29\ubc95 \uacb0\uc815<\/li><\/ul><\/li><li><strong>\ubb38\uc81c \ud574\uacb0 \ub2a5\ub825 \ud5a5\uc0c1<\/strong><ul><li>\ub80c\ub354\ub9c1 \uad00\ub828 \ubc84\uadf8 \ub514\ubc84\uae45<\/li><li>\uc131\ub2a5 \uc774\uc288 \ud574\uacb0<\/li><li>\ucd5c\uc801\ud654 \ud3ec\uc778\ud2b8 \ubc1c\uacac<\/li><\/ul><\/li><\/ol>\n\n\n\n<p>\ube0c\ub77c\uc6b0\uc800\uc758 \uae30\ubcf8 \ub3d9\uc791 \uc6d0\ub9ac\ub97c \uc774\ud574\ud558\ub294 \uac83\uc740 \ub2e8\uc21c\ud788 \uc774\ub860\uc801\uc778 \uc9c0\uc2dd\uc744 \ub118\uc5b4, \uc2e4\uc81c \uac1c\ubc1c \ud604\uc7a5\uc5d0\uc11c \ub9c8\uc8fc\uce58\ub294 \ub2e4\uc591\ud55c \ubb38\uc81c\ub4e4\uc744 \ud574\uacb0\ud558\ub294 \ub370 \ud544\uc218\uc801\uc778 \ub3c4\uad6c\uac00 \ub429\ub2c8\ub2e4. React\ub098 \ub2e4\ub978 \ud604\ub300\uc801\uc778 \ud504\ub808\uc784\uc6cc\ud06c\ub97c \ud559\uc2b5\ud558\uae30 \uc804\uc5d0 \uc774\ub7ec\ud55c \uae30\ucd08\ub97c \ub2e4\uc9c0\ub294 \uac83\uc740, \uacb0\uad6d \ub354 \uacac\uace0\ud558\uace0 \ud6a8\uc728\uc801\uc778 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud560 \uc218 \uc788\ub294 \ud1a0\ub300\uac00 \ub420 \uac83\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<div style=\"height:59px\" 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.png\" alt=\"\" class=\"wp-image-607\" srcset=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/odung_work.png 210w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/odung_work-150x150.png 150w\" sizes=\"(max-width: 210px) 100vw, 210px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>\ub4e4\uc5b4\uac00\uba70 \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc744 \uc2dc\uc791\ud558\ub294 \ub9ce\uc740 \uac1c\ubc1c\uc790\ub4e4\uc774 React, Vue, Angular\uc640 \uac19\uc740 \ud604\ub300\uc801\uc778 \ud504\ub808\uc784\uc6cc\ud06c\ub97c \ubc14\ub85c \ubc30\uc6b0\ub824\uace0 \ud569\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uc774\ub7ec\ud55c \ud504\ub808\uc784\uc6cc\ud06c\ub4e4\uc758 \ud575\uc2ec \uac1c\ub150\uacfc \ucd5c\uc801\ud654 \uc804\ub7b5\uc744 \uc81c\ub300\ub85c \uc774\ud574\ud558\uae30 \uc704\ud574\uc11c\ub294, \uadf8 \uae30\ubc18\uc774 \ub418\ub294 \uc6f9 \ube0c\ub77c\uc6b0\uc800\uc758 \ub3d9\uc791 \uc6d0\ub9ac\ub97c \uba3c\uc800 \uc774\ud574\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4. \ud2b9\ud788 React\uc758 Virtual DOM\uc774\ub098 \uc0c1\ud0dc \uad00\ub9ac \uc2dc\uc2a4\ud15c\uc774 \uc65c \ud544\uc694\ud55c\uc9c0, \uadf8\ub9ac\uace0 \uc774\uac83\uc774 \uc5b4\ub5bb\uac8c \uc131\ub2a5 \ud5a5\uc0c1\uc5d0 \ub3c4\uc6c0\uc774 \ub418\ub294\uc9c0\ub97c \uc774\ud574\ud558\ub824\uba74, \ube0c\ub77c\uc6b0\uc800\uc758 \ub80c\ub354\ub9c1 [&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,61,55],"_links":{"self":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts\/609"}],"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=609"}],"version-history":[{"count":6,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts\/609\/revisions"}],"predecessor-version":[{"id":652,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts\/609\/revisions\/652"}],"wp:attachment":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=609"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=609"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=609"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}