{"id":603,"date":"2025-01-07T00:08:00","date_gmt":"2025-01-06T15:08:00","guid":{"rendered":"https:\/\/blog.anchors-biz.com\/?p=603"},"modified":"2025-01-09T17:24:31","modified_gmt":"2025-01-09T08:24:31","slug":"react%eb%a5%bc-%ea%b3%b5%eb%b6%80%ed%95%b4%ec%95%bc-%ed%95%98%eb%8a%94-%ec%9d%b4%ec%9c%a0","status":"publish","type":"post","link":"https:\/\/blog.anchors-biz.com\/?p=603","title":{"rendered":"React\ub97c \uacf5\ubd80\ud574\uc57c \ud558\ub294 \uc774\uc720"},"content":{"rendered":"\n<div style=\"height:34px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\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\/react-1024x576.png\" alt=\"\" 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<h3><strong>\ub4e4\uc5b4\uac00\uba70<\/strong><\/h3>\n\n\n\n<p>\ud604\ub300 \uc6f9 \uac1c\ubc1c\uc5d0\uc11c <strong>React<\/strong>\ub294 \uac00\uc7a5 \ub110\ub9ac \uc0ac\uc6a9\ub418\ub294 \ud504\ub860\ud2b8\uc5d4\ub4dc \uae30\uc220 \uc2a4\ud0dd \uc911 \ud558\ub098\uc774\ub2e4. \ud504\ub860\ud2b8\uc5d4\ub4dc(FE) \uac1c\ubc1c\uc790\ubfd0\ub9cc \uc544\ub2c8\ub77c \ubc31\uc5d4\ub4dc(BE) \uac1c\ubc1c\uc790\uc5d0\uac8c\ub3c4 React\ub97c \ubc30\uc6b0\ub294 \uac83\uc740 \uc810\uc810 \ub354 \uc911\uc694\ud574\uc9c0\uace0 \uc788\ub2e4. \uc774\ubc88 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c\ub294 <strong>FE \uac1c\ubc1c\uc790\uac00 React\ub97c \ubc30\uc6cc\uc57c \ud558\ub294 \uc774\uc720<\/strong>\uc640 <strong>BE \uac1c\ubc1c\uc790\uac00 React\ub97c \ubc30\uc6cc\uc57c \ud558\ub294 \uc774\uc720<\/strong>\ub97c \uac01\uac01 \uc0b4\ud3b4\ubcf4\uba70, React\ub97c \ud559\uc2b5\ud574\uc57c \ud558\ub294 \ud544\uc694\uc131\uc744 \uc54c\uc544\ubcf4\uc790.<\/p>\n\n\n\n<div style=\"height:65px\" 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>FE \uac1c\ubc1c\uc790\uac00 React\ub97c \ubc30\uc6cc\uc57c \ud558\ub294 \uc774\uc720<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"760\" src=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/fe-stack-rank-1024x760.webp\" alt=\"\" class=\"wp-image-605\" srcset=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/fe-stack-rank-1024x760.webp 1024w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/fe-stack-rank-300x223.webp 300w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/fe-stack-rank-768x570.webp 768w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/fe-stack-rank-1536x1140.webp 1536w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/fe-stack-rank.webp 1954w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4>1. \ud604\uc7ac \uac00\uc7a5 \ub9ce\uc774 \uc4f0\uc774\ub294 FE \uae30\uc220 \uc2a4\ud0dd<\/h4>\n\n\n\n<p>React\ub294 \ud604\uc7ac \uc804 \uc138\uacc4\uc801\uc73c\ub85c \uac00\uc7a5 \ub9ce\uc774 \uc0ac\uc6a9\ub418\ub294 \ud504\ub860\ud2b8\uc5d4\ub4dc \ub77c\uc774\ube0c\ub7ec\ub9ac \uc911 \ud558\ub098\uc774\ub2e4. <strong>2024\ub144 \uae30\uc900, Stack Overflow\uc758 \uac1c\ubc1c\uc790 \uc124\ubb38\uc870\uc0ac<\/strong>\uc5d0 \ub530\ub974\uba74, React\ub294 \uac00\uc7a5 \uc778\uae30 \uc788\ub294 \uc6f9 \ud504\ub808\uc784\uc6cc\ud06c\/\ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c \uafb8\uc900\ud788 \uc0c1\uc704\uad8c\uc744 \ucc28\uc9c0\ud558\uace0 \uc788\ub2e4.<\/p>\n\n\n\n<p><a href=\"https:\/\/survey.stackoverflow.co\/2024\/technology\">Stack Overflow Developer Survey 2024 &#8211; Technology<\/a><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<ul><li><strong>\ub300\uae30\uc5c5\uacfc \uc2a4\ud0c0\ud2b8\uc5c5\uc758 \ucc44\ud0dd<\/strong>: Facebook(\ud604 Meta), Netflix, Airbnb, Uber \ub4f1 \uae00\ub85c\ubc8c \ub300\uae30\uc5c5\ubfd0\ub9cc \uc544\ub2c8\ub77c \ub9ce\uc740 \uc2a4\ud0c0\ud2b8\uc5c5\uc5d0\uc11c\ub3c4 React\ub97c \uc0ac\uc6a9\ud558\uace0 \uc788\ub2e4. \uc774\ub294 React\uac00 \ub2e4\uc591\ud55c \uaddc\ubaa8\uc758 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \uc2e0\ub8b0\ubc1b\ub294 \uae30\uc220\uc784\uc744 \ubcf4\uc5ec\uc900\ub2e4.<\/li><li><strong>\uad11\ubc94\uc704\ud55c \ucee4\ubba4\ub2c8\ud2f0\uc640 \uc0dd\ud0dc\uacc4<\/strong>: React\ub294 \ubc29\ub300\ud55c \ucee4\ubba4\ub2c8\ud2f0\uc640 \uc0dd\ud0dc\uacc4\ub97c \uac00\uc9c0\uace0 \uc788\uc5b4, \ubb38\uc81c \ud574\uacb0\uc744 \uc704\ud55c \uc790\ub8cc\uc640 \ub3c4\uad6c\ub97c \uc27d\uac8c \ucc3e\uc744 \uc218 \uc788\ub2e4. \ub610\ud55c, React\uc640 \ud568\uaed8 \uc0ac\uc6a9\ub418\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac(\uc608: Redux, React Router)\uc640 \ub3c4\uad6c(\uc608: Next.js, Vite)\ub3c4 \ub9e4\uc6b0 \ud48d\ubd80\ud558\ub2e4.<\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"498\" src=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/react-companies-1024x498.webp\" alt=\"\" class=\"wp-image-606\" srcset=\"https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/react-companies-1024x498.webp 1024w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/react-companies-300x146.webp 300w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/react-companies-768x373.webp 768w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/react-companies-1536x746.webp 1536w, https:\/\/blog.anchors-biz.com\/wp-content\/uploads\/2024\/12\/react-companies-2048x995.webp 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:53px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4><strong>2. IT \uc2dc\uc7a5\uc5d0\uc11c\uc758 \uacbd\uc7c1\ub825<\/strong><\/h4>\n\n\n\n<p>React\ub294 \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc790\uc5d0\uac8c \uc0ac\uc2e4\uc0c1 <strong>\uae30\ubcf8 \uae30\uc220<\/strong>\ub85c \uc790\ub9ac \uc7a1\uc558\ub2e4. \ub9ce\uc740 \uae30\uc5c5\ub4e4\uc774 React\ub97c \uc8fc\uc694 \uae30\uc220 \uc2a4\ud0dd\uc73c\ub85c \uc0ac\uc6a9\ud558\uace0 \uc788\uc73c\uba70, React\ub97c \ub2e4\ub8f0 \uc904 \uc544\ub294 \uac1c\ubc1c\uc790\ub97c \uc120\ud638\ud55c\ub2e4.<\/p>\n\n\n\n<p>React\ub97c \ubc30\uc6b0\uba74 \ub2e4\uc74c\uacfc \uac19\uc740 \uc774\uc810\uc774 \uc788\ub2e4:<\/p>\n\n\n\n<ul><li><strong>\ucde8\uc5c5 \uae30\ud68c \ud655\ub300<\/strong>: React\ub294 \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc790 \ucc44\uc6a9 \uacf5\uace0\uc5d0\uc11c \uac00\uc7a5 \ub9ce\uc774 \uc694\uad6c\ub418\ub294 \uae30\uc220 \uc911 \ud558\ub098\uc774\ub2e4.<\/li><li><strong>\ud504\ub85c\uc81d\ud2b8 \ucc38\uc5ec \uac00\ub2a5\uc131 \uc99d\uac00<\/strong>: React\ub294 \ub2e4\uc591\ud55c \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \uc0ac\uc6a9\ub418\ubbc0\ub85c, \uc774\ub97c \ubc30\uc6b0\uba74 \ub354 \ub9ce\uc740 \ud504\ub85c\uc81d\ud2b8\uc5d0 \ucc38\uc5ec\ud560 \uc218 \uc788\ub294 \uae30\ud68c\ub97c \uc5bb\uc744 \uc218 \uc788\ub2e4.<\/li><\/ul>\n\n\n\n<div style=\"height:61px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4><strong>3. \ud604\ub300\uc801\uc778 \uc6f9 \uac1c\ubc1c \ubc29\uc2dd \ud559\uc2b5<\/strong><\/h4>\n\n\n\n<p>React\ub294 \ucef4\ud3ec\ub10c\ud2b8 \uae30\ubc18 \uac1c\ubc1c, Virtual DOM, \ub2e8\ubc29\ud5a5 \ub370\uc774\ud130 \ud750\ub984 \ub4f1 \ud604\ub300\uc801\uc778 \uc6f9 \uac1c\ubc1c\uc758 \ud575\uc2ec \uac1c\ub150\uc744 \ud3ec\ud568\ud558\uace0 \uc788\ub2e4. React\ub97c \ubc30\uc6b0\ub294 \uac83\uc740 \ub2e8\uc21c\ud788 \ud558\ub098\uc758 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \ubc30\uc6b0\ub294 \uac83\uc744 \ub118\uc5b4,&nbsp;<strong>\ud604\ub300\uc801\uc778 \uc6f9 \uac1c\ubc1c\uc758 \ucca0\ud559\uacfc \ud328\ud134<\/strong>\uc744 \uc774\ud574\ud558\ub294 \ub370 \ud070 \ub3c4\uc6c0\uc774 \ub41c\ub2e4.<\/p>\n\n\n\n<p>React\ub294 \ub2e8\uc21c\ud788 UI\ub97c \ub9cc\ub4dc\ub294 \ub3c4\uad6c\uac00 \uc544\ub2c8\ub77c, \ud604\ub300\uc801\uc778 \uc6f9 \uac1c\ubc1c\uc758 \ucca0\ud559\uacfc \ud328\ud134\uc744 \ub2f4\uace0 \uc788\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc774\ub2e4. React\ub97c \ubc30\uc6b0\ub294 \uac83\uc740 \ub2e8\uc21c\ud788 \ud558\ub098\uc758 \uae30\uc220\uc744 \uc775\ud788\ub294 \uac83\uc744 \ub118\uc5b4,&nbsp;<strong>\ud6a8\uc728\uc801\uc774\uace0 \uc720\uc9c0\ubcf4\uc218 \uac00\ub2a5\ud55c \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud558\ub294 \ubc29\ubc95<\/strong>\uc744 \ubc30\uc6b0\ub294 \ub370 \ud070 \ub3c4\uc6c0\uc774 \ub41c\ub2e4. React\uac00 \ud3ec\ud568\ud558\uace0 \uc788\ub294 \ud604\ub300\uc801\uc778 \uc6f9 \uac1c\ubc1c \ubc29\uc2dd\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4:<\/p>\n\n\n\n<h5><strong>1) \ucef4\ud3ec\ub10c\ud2b8 \uae30\ubc18 \uac1c\ubc1c<\/strong><\/h5>\n\n\n\n<p>React\ub294 UI\ub97c \uc791\uc740 \ub2e8\uc704\uc758&nbsp;<strong>\ucef4\ud3ec\ub10c\ud2b8<\/strong>\ub85c \ub098\ub204\uc5b4 \uac1c\ubc1c\ud558\ub294 \ubc29\uc2dd\uc744 \ucc44\ud0dd\ud558\uace0 \uc788\ub2e4. \ucef4\ud3ec\ub10c\ud2b8\ub294 \ub3c5\ub9bd\uc801\uc774\uace0 \uc7ac\uc0ac\uc6a9 \uac00\ub2a5\ud55c \ucf54\ub4dc \uc870\uac01\uc73c\ub85c, \ud558\ub098\uc758 \ucef4\ud3ec\ub10c\ud2b8\ub294 \ud2b9\uc815 UI\uc640 \uad00\ub828\ub41c \ub85c\uc9c1, \uc2a4\ud0c0\uc77c, \ub370\uc774\ud130\ub97c \ubaa8\ub450 \ud3ec\ud568\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<p>\uc774 \ubc29\uc2dd\uc740 \ub2e4\uc74c\uacfc \uac19\uc740 \uc7a5\uc810\uc744 \uc81c\uacf5\ud55c\ub2e4:<\/p>\n\n\n\n<ul><li><strong>\uc7ac\uc0ac\uc6a9\uc131<\/strong>: \ub3d9\uc77c\ud55c \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc5ec\ub7ec \uacf3\uc5d0\uc11c \uc7ac\uc0ac\uc6a9\ud560 \uc218 \uc788\uc5b4, \ucf54\ub4dc \uc911\ubcf5\uc744 \uc904\uc774\uace0 \uac1c\ubc1c \uc18d\ub3c4\ub97c \ub192\uc77c \uc218 \uc788\ub2e4.<\/li><li><strong>\uc720\uc9c0\ubcf4\uc218\uc131<\/strong>: UI\ub97c \uc791\uc740 \ub2e8\uc704\ub85c \ub098\ub204\uae30 \ub54c\ubb38\uc5d0, \ud2b9\uc815 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ubb38\uc81c\uac00 \uc0dd\uacbc\uc744 \ub54c \ud574\ub2f9 \ubd80\ubd84\ub9cc \uc218\uc815\ud558\uba74 \ub41c\ub2e4. \uc774\ub294 \ub300\uaddc\ubaa8 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \ud2b9\ud788 \uc720\uc6a9\ud558\ub2e4.<\/li><li><strong>\uac00\ub3c5\uc131<\/strong>: \ucef4\ud3ec\ub10c\ud2b8 \ub2e8\uc704\ub85c \ucf54\ub4dc\ub97c \uc791\uc131\ud558\uba74, \uc804\uccb4 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uad6c\uc870\ub97c \ub354 \uc27d\uac8c \uc774\ud574\ud560 \uc218 \uc788\ub2e4.<\/li><\/ul>\n\n\n\n<div style=\"height:45px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5><strong>2) Virtual DOM<\/strong><\/h5>\n\n\n\n<p>React\ub294&nbsp;<strong>Virtual DOM<\/strong>\uc774\ub77c\ub294 \ud6a8\uc728\uc801\uc778 \ub80c\ub354\ub9c1 \ubc29\uc2dd\uc744 \uc0ac\uc6a9\ud55c\ub2e4. Virtual DOM\uc740 \uc2e4\uc81c DOM\uc758 \uac00\ubcbc\uc6b4 \ubcf5\uc0ac\ubcf8\uc73c\ub85c, \ub370\uc774\ud130\uac00 \ubcc0\uacbd\ub420 \ub54c\ub9c8\ub2e4 \uc804\uccb4 UI\ub97c \ub2e4\uc2dc \ub80c\ub354\ub9c1\ud558\uc9c0 \uc54a\uace0, \ubcc0\uacbd\ub41c \ubd80\ubd84\ub9cc \uc5c5\ub370\uc774\ud2b8\ud55c\ub2e4.<\/p>\n\n\n\n<p>\uc774 \ubc29\uc2dd\uc740 \ub2e4\uc74c\uacfc \uac19\uc740 \uc774\uc810\uc744 \uc81c\uacf5\ud55c\ub2e4:<\/p>\n\n\n\n<ul><li><strong>\uc131\ub2a5 \ucd5c\uc801\ud654<\/strong>: DOM \uc870\uc791\uc740 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uac00\uc7a5 \ube44\uc6a9\uc774 \ub9ce\uc774 \ub4dc\ub294 \uc791\uc5c5 \uc911 \ud558\ub098\uc774\ub2e4. Virtual DOM\uc740 \ubcc0\uacbd \uc0ac\ud56d\uc744 \ucd5c\uc18c\ud654\ud558\uc5ec \uc131\ub2a5\uc744 \ud06c\uac8c \ud5a5\uc0c1\uc2dc\ud0a8\ub2e4.<\/li><li><strong>\ud6a8\uc728\uc801\uc778 \uc5c5\ub370\uc774\ud2b8<\/strong>: React\ub294 Virtual DOM\uc744 \ud1b5\ud574 \ubcc0\uacbd \uc0ac\ud56d\uc744 \uacc4\uc0b0(diffing)\ud558\uace0, \ud544\uc694\ud55c \ubd80\ubd84\ub9cc \uc2e4\uc81c DOM\uc5d0 \ubc18\uc601\ud558\uae30 \ub54c\ubb38\uc5d0, \ub300\uaddc\ubaa8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c\ub3c4 \ud6a8\uc728\uc801\uc73c\ub85c \uc791\ub3d9\ud55c\ub2e4.<\/li><\/ul>\n\n\n\n<div style=\"height:45px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5><strong>3) \ub2e8\ubc29\ud5a5 \ub370\uc774\ud130 \ud750\ub984<\/strong><\/h5>\n\n\n\n<p>React\ub294 \ub370\uc774\ud130\ub97c \ubd80\ubaa8 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub85c \uc804\ub2ec\ud558\ub294&nbsp;<strong>\ub2e8\ubc29\ud5a5 \ub370\uc774\ud130 \ud750\ub984<\/strong>\uc744 \ucc44\ud0dd\ud558\uace0 \uc788\ub2e4. \uc774\ub294 \ub370\uc774\ud130\uc758 \ud750\ub984\uc744 \uc608\uce21 \uac00\ub2a5\ud558\uac8c \ub9cc\ub4e4\uc5b4, \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc0c1\ud0dc\ub97c \ub354 \uc27d\uac8c \uad00\ub9ac\ud560 \uc218 \uc788\ub3c4\ub85d \ub3d5\ub294\ub2e4.<\/p>\n\n\n\n<p>\ub2e8\ubc29\ud5a5 \ub370\uc774\ud130 \ud750\ub984\uc758 \uc7a5\uc810\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4:<\/p>\n\n\n\n<ul><li><strong>\ub514\ubc84\uae45 \uc6a9\uc774\uc131<\/strong>: \ub370\uc774\ud130\uac00 \ud55c \ubc29\ud5a5\uc73c\ub85c\ub9cc \ud750\ub974\uae30 \ub54c\ubb38\uc5d0, \uc0c1\ud0dc \ubcc0\ud654\uc758 \uc6d0\uc778\uc744 \ucd94\uc801\ud558\uae30 \uc27d\ub2e4.<\/li><li><strong>\uad6c\uc870\ud654\ub41c \ub370\uc774\ud130 \uad00\ub9ac<\/strong>: \ub370\uc774\ud130\uac00 \uba85\ud655\ud55c \uacbd\ub85c\ub97c \ub530\ub77c \uc804\ub2ec\ub418\ubbc0\ub85c, \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uad6c\uc870\ub97c \ub354 \uccb4\uacc4\uc801\uc73c\ub85c \uc124\uacc4\ud560 \uc218 \uc788\ub2e4.<\/li><\/ul>\n\n\n\n<div style=\"height:45px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5><strong>4) \uc120\uc5b8\uc801 \ud504\ub85c\uadf8\ub798\ubc0d<\/strong><\/h5>\n\n\n\n<p>React\ub294&nbsp;<strong>\uc120\uc5b8\uc801 \ud504\ub85c\uadf8\ub798\ubc0d<\/strong>&nbsp;\ubc29\uc2dd\uc744 \ucc44\ud0dd\ud558\uace0 \uc788\ub2e4. \uc774\ub294 &#8220;\uc5b4\ub5bb\uac8c&#8221; UI\ub97c \uc5c5\ub370\uc774\ud2b8\ud560\uc9c0 \uba85\ub839\ud558\ub294 \ub300\uc2e0, &#8220;\ubb34\uc5c7&#8221;\uc744 \ubcf4\uc5ec\uc904\uc9c0 \uc120\uc5b8\ud558\ub294 \ubc29\uc2dd\uc774\ub2e4.<\/p>\n\n\n\n<p>\uc608\ub97c \ub4e4\uc5b4, React\uc5d0\uc11c\ub294 \uc0c1\ud0dc(state)\uac00 \ubcc0\uacbd\ub418\uba74 UI\uac00 \uc790\ub3d9\uc73c\ub85c \uc5c5\ub370\uc774\ud2b8\ub41c\ub2e4. \uac1c\ubc1c\uc790\ub294 DOM \uc870\uc791\uc5d0 \uc9c1\uc811 \uad00\uc5ec\ud558\uc9c0 \uc54a\uace0, \uc0c1\ud0dc\uc640 UI \uac04\uc758 \uad00\uacc4\ub9cc \uc815\uc758\ud558\uba74 \ub41c\ub2e4.<\/p>\n\n\n\n<p>\uc774 \ubc29\uc2dd\uc740 \ub2e4\uc74c\uacfc \uac19\uc740 \uc7a5\uc810\uc744 \uc81c\uacf5\ud55c\ub2e4:<\/p>\n\n\n\n<ul><li><strong>\ucf54\ub4dc \uac04\uacb0\ud654<\/strong>: \uc120\uc5b8\uc801 \ud504\ub85c\uadf8\ub798\ubc0d\uc740 \ubcf5\uc7a1\ud55c \ub85c\uc9c1\uc744 \ub2e8\uc21c\ud654\ud558\uc5ec, \ub354 \uc801\uc740 \ucf54\ub4dc\ub85c \ub3d9\uc77c\ud55c \uacb0\uacfc\ub97c \uc5bb\uc744 \uc218 \uc788\ub2e4.<\/li><li><strong>\uac00\ub3c5\uc131 \ud5a5\uc0c1<\/strong>: UI\uc640 \uc0c1\ud0dc \uac04\uc758 \uad00\uacc4\ub97c \uba85\ud655\ud788 \uc815\uc758\ud558\uae30 \ub54c\ubb38\uc5d0, \ucf54\ub4dc\uc758 \uc758\ub3c4\ub97c \ub354 \uc27d\uac8c \ud30c\uc545\ud560 \uc218 \uc788\ub2e4.<\/li><\/ul>\n\n\n\n<div style=\"height:45px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h5><strong>5) \uc0c1\ud0dc \uad00\ub9ac\uc640 \uc0dd\ud0dc\uacc4<\/strong><\/h5>\n\n\n\n<p>React\ub294 \uc0c1\ud0dc(state)\uc640 \uc18d\uc131(props)\uc744 \ud1b5\ud574 \ucef4\ud3ec\ub10c\ud2b8 \uac04 \ub370\uc774\ud130\ub97c \uad00\ub9ac\ud55c\ub2e4. \uc774\ub97c \ud1b5\ud574 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc0c1\ud0dc\ub97c \uccb4\uacc4\uc801\uc73c\ub85c \uad00\ub9ac\ud560 \uc218 \uc788\uc73c\uba70, Redux, MobX, Context API\uc640 \uac19\uc740 \uc0c1\ud0dc \uad00\ub9ac \ub3c4\uad6c\ub97c \ud65c\uc6a9\ud558\uba74 \ub354 \ubcf5\uc7a1\ud55c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\ub3c4 \uc27d\uac8c \uad00\ub9ac\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<p>\ub610\ud55c, React\ub294 Next.js, React Router, Material-UI \ub4f1\uacfc \uac19\uc740 \uac15\ub825\ud55c \uc0dd\ud0dc\uacc4\ub97c \uac00\uc9c0\uace0 \uc788\uc5b4, \ub2e4\uc591\ud55c \uc694\uad6c\uc0ac\ud56d\uc5d0 \ub9de\ub294 \ub3c4\uad6c\ub97c \uc27d\uac8c \ud1b5\ud569\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<div style=\"height:45px\" 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>BE \uac1c\ubc1c\uc790\uac00 React\ub97c \ubc30\uc6cc\uc57c \ud558\ub294 \uc774\uc720<\/strong><\/h3>\n\n\n\n<h4><strong>1. API \uc124\uacc4\ub97c \uc704\ud55c \uc0ac\uc6a9\uc790 \uad00\uc810 \uc774\ud574<\/strong><\/h4>\n\n\n\n<p>\ubc31\uc5d4\ub4dc \uac1c\ubc1c\uc790\uac00 \ub9cc\ub4dc\ub294 API\uc758 \uc8fc\uc694 \uc0ac\uc6a9\uc790\ub294 \uace0\uac1d\uc774 \uc544\ub2cc&nbsp;<strong>\ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc790<\/strong>\uc774\ub2e4. \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc790\ub294 API\ub97c \ud65c\uc6a9\ud558\uc5ec \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4(UI)\ub97c \uad6c\uc131\ud558\uace0, \uc0ac\uc6a9\uc790 \uacbd\ud5d8(UX)\uc744 \uad6c\ud604\ud55c\ub2e4. \ub530\ub77c\uc11c \ubc31\uc5d4\ub4dc \uac1c\ubc1c\uc790\ub294 API\ub97c \uc124\uacc4\ud560 \ub54c, \uc774\ub97c \uc0ac\uc6a9\ud558\ub294 \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc790\uc758 \uad00\uc810\uc744 \uace0\ub824\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n<p>\uae30\ud68d\uc790\uac00 \ud504\ub85c\uc81d\ud2b8\ub97c \uc9c4\ud589\ud560 \ub54c, \ucd5c\uc885 \uc0ac\uc6a9\uc790\uc778 \uace0\uac1d\uc744 \uc704\ud574 UI\uc640 UX\ub97c \uace0\ub824\ud558\uc5ec \uc81c\ud488(Product)\uc744 \uc124\uacc4\ud558\ub294 \uac83\ucc98\ub7fc, \ubc31\uc5d4\ub4dc \uac1c\ubc1c\uc790\ub3c4 API\ub97c \uc124\uacc4\ud560 \ub54c \uc8fc\uc694 \uc0ac\uc6a9\uc790\uc778 \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc790\ub97c \uace0\ub824\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n<p>\uc608\ub97c \ub4e4\uc5b4, API\uc758 \ub370\uc774\ud130 \uad6c\uc870, \uc751\ub2f5 \uc18d\ub3c4, \uc5d0\ub7ec \ucc98\ub9ac \ubc29\uc2dd \ub4f1\uc740 \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc790\uac00 \ud6a8\uc728\uc801\uc73c\ub85c \uc791\uc5c5\ud560 \uc218 \uc788\ub3c4\ub85d \uc124\uacc4\ub418\uc5b4\uc57c \ud55c\ub2e4. \uc774\ub294 \ub2e8\uc21c\ud788 API\ub97c \uc81c\uacf5\ud558\ub294 \uac83\uc744 \ub118\uc5b4,&nbsp;<strong>\uc0ac\uc6a9\uc790 \uc911\uc2ec\uc758 \uc0ac\uace0<\/strong>\ub97c \uc801\uc6a9\ud558\ub294 \uac83\uc774\ub2e4.<\/p>\n\n\n\n<h5><strong>\uad6c\uccb4\uc801\uc778 \uc774\uc720:<\/strong><\/h5>\n\n\n\n<ul><li><strong>\ud504\ub860\ud2b8\uc5d4\ub4dc \uc694\uad6c\uc0ac\ud56d \ubc18\uc601<\/strong>: React\ub294 \uc0c1\ud0dc \uad00\ub9ac, \ucef4\ud3ec\ub10c\ud2b8 \uae30\ubc18 \uac1c\ubc1c \ub4f1 \ud2b9\uc815\ud55c \ubc29\uc2dd\uc73c\ub85c \ub370\uc774\ud130\ub97c \ucc98\ub9ac\ud55c\ub2e4. \uc774\ub97c \uc774\ud574\ud558\uba74 \ubc31\uc5d4\ub4dc \uac1c\ubc1c\uc790\uac00 API\ub97c \uc124\uacc4\ud560 \ub54c \ud504\ub860\ud2b8\uc5d4\ub4dc\uc758 \uc694\uad6c\uc0ac\ud56d\uc744 \ub354 \uc798 \ubc18\uc601\ud560 \uc218 \uc788\ub2e4.<\/li><li><strong>\ud6a8\uc728\uc801\uc778 \ud611\uc5c5<\/strong>: React\uc758 \uc791\ub3d9 \ubc29\uc2dd\uc744 \uc774\ud574\ud558\uba74, \ud504\ub860\ud2b8\uc5d4\ub4dc\uc640 \ubc31\uc5d4\ub4dc \uac04\uc758 \ub370\uc774\ud130 \ud750\ub984\uc744 \ub354 \uba85\ud655\ud788 \uc774\ud574\ud560 \uc218 \uc788\ub2e4. \uc774\ub294 \ud611\uc5c5 \uacfc\uc815\uc5d0\uc11c \ubd88\ud544\uc694\ud55c \ucee4\ubba4\ub2c8\ucf00\uc774\uc158 \ube44\uc6a9\uc744 \uc904\uc774\uace0, \ub354 \ub098\uc740 \uacb0\uacfc\ubb3c\uc744 \ub9cc\ub4e4\uc5b4\ub0bc \uc218 \uc788\uac8c \ud55c\ub2e4.<\/li><\/ul>\n\n\n\n<p>\ub530\ub77c\uc11c \ubc31\uc5d4\ub4dc \uac1c\ubc1c\uc790\ub4e4\uc774 \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc790\ub85c \ud22c\uc785\ub420 \uc815\ub3c4\uc758 \uae4a\uc740 \uc9c0\uc2dd\uc744 \uac00\uc9c8 \ud544\uc694\ub294 \uc5c6\ub354\ub77c\ub3c4,&nbsp;<strong>\ud504\ub860\ud2b8\uc5d4\ub4dc \uae30\uc220\uacfc \uc791\ub3d9 \ubc29\uc2dd\uc744 \uc774\ud574\ud560 \uc218 \uc788\ub294 \uc218\uc900\uc758 \uc9c0\uc2dd<\/strong>\uc740 \ubc18\ub4dc\uc2dc \uac16\ucd94\uc5b4\uc57c \ud55c\ub2e4\uace0 \uc0dd\uac01\ud55c\ub2e4. \uc774\ub294 API \uc124\uacc4\uc640 \ud611\uc5c5\uc758 \uc9c8\uc744 \ub192\uc774\ub294 \ub370 \ud544\uc218\uc801\uc774\ub2e4.<\/p>\n\n\n\n<div style=\"height:45px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4><strong>2. \uc0ac\uc6a9\uc790 \uc911\uc2ec\uc758 \uc0ac\uace0 \ud655\uc7a5<\/strong><\/h4>\n\n\n\n<p>React\ub294 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4(UI)\uc640 \uc0ac\uc6a9\uc790 \uacbd\ud5d8(UX)\uc744 \uad6c\ud604\ud558\ub294 \ub370 \ucd08\uc810\uc774 \ub9de\ucdb0\uc838 \uc788\ub2e4. \ubc31\uc5d4\ub4dc \uac1c\ubc1c\uc790\uac00 React\ub97c \ubc30\uc6b0\uba74, \ub2e8\uc21c\ud788 API\ub97c \uc81c\uacf5\ud558\ub294 \uac83\uc744 \ub118\uc5b4&nbsp;<strong>\uc0ac\uc6a9\uc790 \uc911\uc2ec\uc758 \uc0ac\uace0<\/strong>\ub97c \ud655\uc7a5\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<p>\uae30\ud68d\uc790\uc640 \ub514\uc790\uc774\ub108\uac00 \uc124\uacc4\ud55c UI\/UX\ub97c \uad6c\ud604\ud558\ub294 \uacfc\uc815\uc5d0\uc11c, \ubc31\uc5d4\ub4dc \uac1c\ubc1c\uc790\uac00 React\uc758 \uc791\ub3d9 \ubc29\uc2dd\uc744 \uc774\ud574\ud558\uace0 \uc788\ub2e4\uba74 \ub354 \ub098\uc740 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\ub294 API\ub97c \uc124\uacc4\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<div style=\"height:45px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4><strong>3. \ud480\uc2a4\ud0dd \uac1c\ubc1c\uc790\ub85c\uc758 \uc131\uc7a5 \uac00\ub2a5\uc131<\/strong><\/h4>\n\n\n\n<p>React\ub97c \ubc30\uc6b0\ub294 \uac83\uc740 \ubc31\uc5d4\ub4dc \uac1c\ubc1c\uc790\uac00 \ud480\uc2a4\ud0dd \uac1c\ubc1c\uc790\ub85c \uc131\uc7a5\ud558\ub294 \ub370\ub3c4 \ud070 \ub3c4\uc6c0\uc774 \ub41c\ub2e4. React\ub294 \ube44\uad50\uc801 \ubc30\uc6b0\uae30 \uc26c\uc6b4 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c, \ubc31\uc5d4\ub4dc \uac1c\ubc1c\uc790\uac00 \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc758 \uae30\ubcf8\uc744 \uc775\ud788\uae30\uc5d0 \uc801\ud569\ud558\ub2e4.<\/p>\n\n\n\n<p>React\ub97c \ud1b5\ud574 \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc758 \uae30\ucd08\ub97c \ubc30\uc6b0\uba74, \ub354 \ub098\uc544\uac00 \ud480\uc2a4\ud0dd \uac1c\ubc1c\uc790\ub85c\uc11c\uc758 \uc5ed\ub7c9\uc744 \ud0a4\uc6b8 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<div style=\"height:45px\" 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>\ub9c8\uce58\uba70<\/strong><\/h2>\n\n\n\n<p>React\ub97c \ubc30\uc6b0\ub294 \uac83\uc740 \ub2e8\uc21c\ud788 UI\ub97c \ub9cc\ub4dc\ub294 \uae30\uc220\uc744 \uc775\ud788\ub294 \uac83\uc744 \ub118\uc5b4,&nbsp;<strong>\ucef4\ud3ec\ub10c\ud2b8 \uae30\ubc18 \uc124\uacc4, \ud6a8\uc728\uc801\uc778 \ub80c\ub354\ub9c1, \ub370\uc774\ud130 \ud750\ub984 \uad00\ub9ac, \uc120\uc5b8\uc801 \ud504\ub85c\uadf8\ub798\ubc0d<\/strong>&nbsp;\ub4f1 \ud604\ub300\uc801\uc778 \uc6f9 \uac1c\ubc1c\uc758 \ud575\uc2ec \uac1c\ub150\uc744 \ubc30\uc6b0\ub294 \uac83\uc785\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uac1c\ub150\ub4e4\uc740 React\ubfd0\ub9cc \uc544\ub2c8\ub77c \ub2e4\ub978 \ud504\ub808\uc784\uc6cc\ud06c\ub098 \ub77c\uc774\ube0c\ub7ec\ub9ac(\uc608: Vue.js, Angular)\uc5d0\uc11c\ub3c4 \uacf5\ud1b5\uc801\uc73c\ub85c \uc0ac\uc6a9\ub418\uae30 \ub54c\ubb38\uc5d0, React\ub97c \ubc30\uc6b0\ub294 \uac83\uc740 \ud604\ub300\uc801\uc778 \uc6f9 \uac1c\ubc1c \uc804\ubc18\uc5d0 \ub300\ud55c \uc774\ud574\ub97c \ub192\uc774\ub294 \ub370 \ud070 \ub3c4\uc6c0\uc774 \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<p>\ub610\ud55c React\ub294 \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc790\uc5d0\uac8c\ub294 \ud604\ub300\uc801\uc778 \uc6f9 \uac1c\ubc1c\uc758 \ud544\uc218 \uae30\uc220\ub85c \uc790\ub9ac \uc7a1\uc558\uc73c\uba70, \ubc31\uc5d4\ub4dc \uac1c\ubc1c\uc790\uc5d0\uac8c\ub294 API \uc124\uacc4\uc640 \ud611\uc5c5, \uc0ac\uc6a9\uc790 \uc911\uc2ec\uc758 \uc0ac\uace0\ub97c \ud655\uc7a5\ud558\ub294 \ub370 \uc911\uc694\ud55c \ub3c4\uad6c\uc785\ub2c8\ub2e4. React\ub97c \ubc30\uc6b0\ub294 \uac83\uc740 \ub2e8\uc21c\ud788 \ud558\ub098\uc758 \uae30\uc220\uc744 \ubc30\uc6b0\ub294 \uac83\uc744 \ub118\uc5b4, \ub354 \ub098\uc740 \ud611\uc5c5\uacfc \ub354 \ub098\uc740 \uc81c\ud488\uc744 \ub9cc\ub4e4\uae30 \uc704\ud55c \uccab\uac78\uc74c\uc774 \ub420 \uac83\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<p><\/p>\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\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ub4e4\uc5b4\uac00\uba70 \ud604\ub300 \uc6f9 \uac1c\ubc1c\uc5d0\uc11c React\ub294 \uac00\uc7a5 \ub110\ub9ac \uc0ac\uc6a9\ub418\ub294 \ud504\ub860\ud2b8\uc5d4\ub4dc \uae30\uc220 \uc2a4\ud0dd \uc911 \ud558\ub098\uc774\ub2e4. \ud504\ub860\ud2b8\uc5d4\ub4dc(FE) \uac1c\ubc1c\uc790\ubfd0\ub9cc \uc544\ub2c8\ub77c \ubc31\uc5d4\ub4dc(BE) \uac1c\ubc1c\uc790\uc5d0\uac8c\ub3c4 React\ub97c \ubc30\uc6b0\ub294 \uac83\uc740 \uc810\uc810 \ub354 \uc911\uc694\ud574\uc9c0\uace0 \uc788\ub2e4. \uc774\ubc88 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c\ub294 FE \uac1c\ubc1c\uc790\uac00 React\ub97c \ubc30\uc6cc\uc57c \ud558\ub294 \uc774\uc720\uc640 BE \uac1c\ubc1c\uc790\uac00 React\ub97c \ubc30\uc6cc\uc57c \ud558\ub294 \uc774\uc720\ub97c \uac01\uac01 \uc0b4\ud3b4\ubcf4\uba70, React\ub97c \ud559\uc2b5\ud574\uc57c \ud558\ub294 \ud544\uc694\uc131\uc744 \uc54c\uc544\ubcf4\uc790. FE \uac1c\ubc1c\uc790\uac00 React\ub97c \ubc30\uc6cc\uc57c \ud558\ub294 \uc774\uc720 1. \ud604\uc7ac \uac00\uc7a5 [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_mi_skip_tracking":false},"categories":[3],"tags":[59,55],"_links":{"self":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts\/603"}],"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=603"}],"version-history":[{"count":3,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts\/603\/revisions"}],"predecessor-version":[{"id":653,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts\/603\/revisions\/653"}],"wp:attachment":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=603"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=603"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}