{"id":13,"date":"2025-07-16T13:42:46","date_gmt":"2025-07-16T04:42:46","guid":{"rendered":"https:\/\/34.64.61.65\/?p=13"},"modified":"2025-07-16T14:42:35","modified_gmt":"2025-07-16T05:42:35","slug":"react_%ec%8b%a4%ec%a0%84_%ea%b0%80%ec%9d%b4%eb%93%9c_%ea%b3%a0%ea%b8%89","status":"publish","type":"post","link":"https:\/\/hed-g.me\/?p=13","title":{"rendered":"React \uc2e4\uc804 \uac00\uc774\ub4dc: \uace0\uae09"},"content":{"rendered":"\n<p>React\uc758 \uae30\ubcf8\uacfc \uc911\uae09 \uacfc\uc815\uc744 \ub9c8\uc2a4\ud130\ud55c \ub2f9\uc2e0, \uc774\uc81c\ub294 \ud504\ub85c\ub355\uc158 \ub808\ubca8\uc758 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ucd95\ud558\uace0 \ucd5c\uc801\ud654\ud558\ub294 \uace0\uae09 \uae30\uc220\uc744 \uc775\ud790 \ucc28\ub840\uc785\ub2c8\ub2e4. \uc774 \uac00\uc774\ub4dc\uc5d0\uc11c\ub294 \uc0c1\ud0dc \uad00\ub9ac \uc544\ud0a4\ud14d\ucc98, \uc7ac\uc0ac\uc6a9 \uac00\ub2a5\ud55c \ub85c\uc9c1 \ucd94\uc0c1\ud654, \ub80c\ub354\ub9c1 \ucd5c\uc801\ud654, \uadf8\ub9ac\uace0 \ud504\ub85c\ub355\uc158 \ubc30\ud3ec \uc804\ub7b5\uae4c\uc9c0, \uc2e4\ubb34\uc5d0\uc11c \ub9c8\uc8fc\ud558\ub294 \ubcf5\uc7a1\ud55c \ubb38\uc81c\ub4e4\uc744 \ud574\uacb0\ud558\uae30 \uc704\ud55c \uace0\uae09 \uc8fc\uc81c\ub4e4\uc744 \ub2e4\ub8f9\ub2c8\ub2e4.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\ubaa9\ucc28<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><p><strong>\uace0\uae09 \uc0c1\ud0dc \uad00\ub9ac \uc544\ud0a4\ud14d\ucc98<\/strong><\/p>\n<ul class=\"wp-block-list\">\n<li>\ud074\ub77c\uc774\uc5b8\ud2b8 \uc0c1\ud0dc vs \uc11c\ubc84 \uc0c1\ud0dc<\/li>\n\n\n\n<li><code>React Query<\/code> \uc2ec\ud654: Mutations, Invalidation, Optimistic Updates<\/li>\n\n\n\n<li>\uc804\uc5ed \uc0c1\ud0dc \uad00\ub9ac: Zustand, Recoil, Redux Toolkit<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><p><strong>\uc7ac\uc0ac\uc6a9\uc131\uc744 \uadf9\ub300\ud654\ud558\ub294 Custom Hooks<\/strong><\/p>\n<ul class=\"wp-block-list\">\n<li>\ub098\ub9cc\uc758 Hook \ub9cc\ub4e4\uae30<\/li>\n\n\n\n<li>Custom Hooks \ub514\uc790\uc778 \ud328\ud134<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><p><strong>\ub80c\ub354\ub9c1 \ucd5c\uc801\ud654\uc758 \uc815\uc810<\/strong><\/p>\n<ul class=\"wp-block-list\">\n<li><code>React.lazy<\/code>\uc640 <code>Suspense<\/code>\ub97c \uc774\uc6a9\ud55c \ucf54\ub4dc \ubd84\ud560(Code Splitting)<\/li>\n\n\n\n<li>\ub3d9\uc2dc\uc131(Concurrency) \ub80c\ub354\ub9c1: <code>useTransition<\/code>\uacfc <code>useDeferredValue<\/code><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><p><strong>\uacac\uace0\ud55c \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uc124\uacc4<\/strong><\/p>\n<ul class=\"wp-block-list\">\n<li>\ub514\uc790\uc778 \ud328\ud134: \uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8 vs \ube44\uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8<\/li>\n\n\n\n<li>\ud3f4\ub354 \uad6c\uc870: \ub300\uaddc\ubaa8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc704\ud55c \uc544\ud0a4\ud14d\ucc98<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><p><strong>\ud504\ub85c\ub355\uc158 \uc900\ube44\uc640 \ubc30\ud3ec<\/strong><\/p>\n<ul class=\"wp-block-list\">\n<li>\ud658\uacbd \ubcc0\uc218 \uad00\ub9ac<\/li>\n\n\n\n<li>Docker\ub97c \uc774\uc6a9\ud55c \ucee8\ud14c\uc774\ub108\ud654<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">1. \uace0\uae09 \uc0c1\ud0dc \uad00\ub9ac \uc544\ud0a4\ud14d\ucc98<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1.1. \ud074\ub77c\uc774\uc5b8\ud2b8 \uc0c1\ud0dc vs \uc11c\ubc84 \uc0c1\ud0dc<\/h3>\n\n\n\n<p>\ud604\ub300 React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc0c1\ud0dc\ub294 \ub450 \uac00\uc9c0\ub85c \ub098\ub269\ub2c8\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\uc11c\ubc84 \uc0c1\ud0dc(Server State):<\/strong> \uc11c\ubc84 API\ub85c\ubd80\ud130 \ubc1b\uc544\uc624\ub294 \ub370\uc774\ud130. \ube44\ub3d9\uae30\uc801\uc774\uace0, \uc6d0\uaca9\uc73c\ub85c \uad00\ub9ac\ub418\uba70, \ub2e4\ub978 \uc0ac\ub78c\uc5d0 \uc758\ud574 \ubcc0\uacbd\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4. (\uc608: \uac8c\uc2dc\uae00 \ubaa9\ub85d, \uc0ac\uc6a9\uc790 \uc815\ubcf4)<\/li>\n\n\n\n<li><strong>\ud074\ub77c\uc774\uc5b8\ud2b8 \uc0c1\ud0dc(Client State):<\/strong> UI\uc758 \ud604\uc7ac \uc0c1\ud0dc. \ub3d9\uae30\uc801\uc774\uace0, \uc624\uc9c1 \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0\uc11c\ub9cc \uad00\ub9ac\ub429\ub2c8\ub2e4. (\uc608: \ub2e4\ud06c \ubaa8\ub4dc \uc5ec\ubd80, \ubaa8\ub2ec \ucc3d \uc5f4\ub9bc \uc0c1\ud0dc)<\/li>\n<\/ul>\n\n\n\n<p>\uc774 \ub458\uc744 \uba85\ud655\ud788 \ubd84\ub9ac\ud558\uace0 \uac01\uae30 \ub2e4\ub978 \ub3c4\uad6c\ub85c \uad00\ub9ac\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4. \uc11c\ubc84 \uc0c1\ud0dc\ub294 <code>React Query<\/code>\ub85c, \ud074\ub77c\uc774\uc5b8\ud2b8 \uc0c1\ud0dc\ub294 <code>useState<\/code>, <code>useReducer<\/code> \ub610\ub294 \uc804\uc5ed \uc0c1\ud0dc \uad00\ub9ac \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c \ub2e4\ub8e8\ub294 \uac83\uc774 \ud6a8\uc728\uc801\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1.2. <code>React Query<\/code> \uc2ec\ud654<\/h3>\n\n\n\n<p><code>useQuery<\/code>\ub97c \ub118\uc5b4, \ub370\uc774\ud130\ub97c \ubcc0\uacbd\ud558\ub294 \uc791\uc5c5\uc744 \uc704\ud55c \uace0\uae09 \uae30\ub2a5\uc744 \uc54c\uc544\ubd05\ub2c8\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>useMutation<\/code><\/strong>: \uc11c\ubc84\uc758 \ub370\uc774\ud130\ub97c \uc0dd\uc131(Create), \uc218\uc815(Update), \uc0ad\uc81c(Delete)\ud560 \ub54c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>Query Invalidation<\/strong>: <code>mutation<\/code> \uc131\uacf5 \ud6c4, \uad00\ub828\ub41c <code>query<\/code>\ub97c \ubb34\ud6a8\ud654\uc2dc\ucf1c \uc790\ub3d9\uc73c\ub85c \ub370\uc774\ud130\ub97c \ucd5c\uc2e0 \uc0c1\ud0dc\ub85c \ub2e4\uc2dc \uac00\uc838\uc624\uac8c \ud558\ub294 \uac15\ub825\ud55c \uae30\ub2a5\uc785\ub2c8\ub2e4. (<code>queryClient.invalidateQueries('todos')<\/code>)<\/li>\n\n\n\n<li><strong>Optimistic Updates<\/strong>: \uc11c\ubc84 \uc751\ub2f5\uc744 \uae30\ub2e4\ub9ac\uc9c0 \uc54a\uace0 UI\ub97c \uba3c\uc800 \uc5c5\ub370\uc774\ud2b8\ud558\uc5ec \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \uadf9\ub300\ud654\ud558\ub294 \uae30\ubc95\uc785\ub2c8\ub2e4. <code>mutation<\/code>\uc774 \uc2e4\ud328\ud558\uba74 \uc6d0\ub798 \uc0c1\ud0dc\ub85c \ub864\ubc31\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">1.3. \uc804\uc5ed \uc0c1\ud0dc \uad00\ub9ac<\/h3>\n\n\n\n<p>Props drilling\uc744 \ud53c\ud558\uace0 \uc5ec\ub7ec \ucef4\ud3ec\ub10c\ud2b8\uac00 \uacf5\uc720\ud558\ub294 \ud074\ub77c\uc774\uc5b8\ud2b8 \uc0c1\ud0dc\ub97c \ud6a8\uc728\uc801\uc73c\ub85c \uad00\ub9ac\ud558\uae30 \uc704\ud574 \uc804\uc5ed \uc0c1\ud0dc \uad00\ub9ac \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. <code>Redux<\/code>\uac00 \uc804\ud1b5\uc801\uc778 \uac15\uc790\uc600\uc9c0\ub9cc, \ucd5c\uadfc\uc5d0\ub294 \ub354 \uac04\uacb0\ud558\uace0 \uc0ac\uc6a9\ud558\uae30 \uc26c\uc6b4 <code>Zustand<\/code>, <code>Recoil<\/code>, <code>Jotai<\/code> \ub4f1\uc774 \ub9ce\uc774 \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. \uc7ac\uc0ac\uc6a9\uc131\uc744 \uadf9\ub300\ud654\ud558\ub294 Custom Hooks<\/h2>\n\n\n\n<p>\ubc18\ubcf5\ub418\ub294 \ub85c\uc9c1\uc744 \uc5ec\ub7ec \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc0ac\uc6a9\ud574\uc57c \ud560 \ub54c, Custom Hook\uc744 \ub9cc\ub4e4\uc5b4 \ub85c\uc9c1\uc744 \ucd94\uc0c1\ud654\ud558\uace0 \uc7ac\uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. Custom Hook\uc740 \uc774\ub984\uc774 <code>use<\/code>\ub85c \uc2dc\uc791\ud558\ub294 JavaScript \ud568\uc218\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ \ud654\uba74\uc758 \ub108\ube44\ub97c \ucd94\uc801\ud558\ub294 Custom Hook \uc608\uc81c\nimport { useState, useEffect } from 'react';\n\nfunction useWindowWidth() {\n  const &#91;width, setWidth] = useState(window.innerWidth);\n\n  useEffect(() =&gt; {\n    const handleResize = () =&gt; setWidth(window.innerWidth);\n    window.addEventListener('resize', handleResize);\n    return () =&gt; window.removeEventListener('resize', handleResize);\n  }, &#91;]);\n\n  return width;\n}\n\n\/\/ \uc0ac\uc6a9\ubc95\nfunction MyComponent() {\n  const width = useWindowWidth();\n  return &lt;p&gt;Window width is: {width}px&lt;\/p&gt;;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">3. \ub80c\ub354\ub9c1 \ucd5c\uc801\ud654\uc758 \uc815\uc810<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">3.1. <code>React.lazy<\/code>\uc640 <code>Suspense<\/code>\ub97c \uc774\uc6a9\ud55c \ucf54\ub4dc \ubd84\ud560<\/h3>\n\n\n\n<p>\uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc774 \ucee4\uc9c0\uba74 \ucd08\uae30 \ub85c\ub529 \uc18d\ub3c4\uac00 \ub290\ub824\uc9c8 \uc218 \uc788\uc2b5\ub2c8\ub2e4. <code>React.lazy<\/code>\ub97c \uc0ac\uc6a9\ud558\uba74 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub3d9\uc801\uc73c\ub85c <code>import<\/code>\ud558\uc5ec, \ud574\ub2f9 \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc2e4\uc81c\ub85c \ub80c\ub354\ub9c1\ub420 \ub54c\uae4c\uc9c0 \uad00\ub828 \ucf54\ub4dc\uc758 \ub85c\ub529\uc744 \uc9c0\uc5f0\uc2dc\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4. <code>Suspense<\/code>\ub294 \ucf54\ub4dc\uac00 \ub85c\ub529\ub418\ub294 \ub3d9\uc548 \ubcf4\uc5ec\uc904 fallback UI(\uc608: \uc2a4\ud53c\ub108)\ub97c \uc124\uc815\ud558\ub294 \ub370 \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const OtherComponent = React.lazy(() =&gt; import('.\/OtherComponent'));\n\nfunction MyComponent() {\n  return (\n    &lt;div&gt;\n      &lt;Suspense fallback={&lt;div&gt;Loading...&lt;\/div&gt;}&gt;\n        &lt;OtherComponent \/&gt;\n      &lt;\/Suspense&gt;\n    &lt;\/div&gt;\n  );\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">3.2. \ub3d9\uc2dc\uc131(Concurrency) \ub80c\ub354\ub9c1<\/h3>\n\n\n\n<p>React 18\ubd80\ud130 \ub3c4\uc785\ub41c \ub3d9\uc2dc\uc131 \uae30\ub2a5\uc740 \uae34\uae09\ud558\uc9c0 \uc54a\uc740 \ub80c\ub354\ub9c1\uc744 \uc7a0\uc2dc \uc911\ub2e8\ud558\uace0, \ub354 \uc911\uc694\ud55c \uc0ac\uc6a9\uc790 \uc785\ub825(\uc608: \ud0c0\uc774\ud551)\uc744 \uba3c\uc800 \ucc98\ub9ac\ud558\uc5ec \uc571\uc758 \ubc18\uc751\uc131\uc744 \ub192\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>useTransition<\/code><\/strong>: \uc0c1\ud0dc \uc5c5\ub370\uc774\ud2b8\ub97c \uae34\uae09\ud558\uc9c0 \uc54a\uc740 \uac83\uc73c\ub85c \ud45c\uc2dc\ud558\uc5ec, UI\uac00 \uba48\ucd94\ub294 \ud604\uc0c1 \uc5c6\uc774 \ubd80\ub4dc\ub7ec\uc6b4 \uc804\ud658\uc744 \uac00\ub2a5\ud558\uac8c \ud569\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong><code>useDeferredValue<\/code><\/strong>: \uac12\uc758 \uc5c5\ub370\uc774\ud2b8\ub97c \uc9c0\uc5f0\uc2dc\ucf1c, \ud574\ub2f9 \uac12\uc744 \uc0ac\uc6a9\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc758 \ub9ac\ub80c\ub354\ub9c1\uc774 \ub2e4\ub978 \uae34\uae09\ud55c \ub80c\ub354\ub9c1\uc744 \ub9c9\uc9c0 \uc54a\ub3c4\ub85d \ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">4. \uacac\uace0\ud55c \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uc124\uacc4<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">4.1. \ub514\uc790\uc778 \ud328\ud134<\/h3>\n\n\n\n<p>\uace0\uae09 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc124\uacc4\ud560 \ub54c \uc790\uc8fc \uc0ac\uc6a9\ub418\ub294 \ud328\ud134\uc744 \uc774\ud574\ud558\ub294 \uac83\uc740 \uc911\uc694\ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ud3fc(Form)\uc744 \ub2e4\ub8f0 \ub54c \uc0c1\ud0dc\ub97c React\uc5d0\uc11c \ubaa8\ub450 \uc81c\uc5b4\ud558\ub294 <strong>\uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8(Controlled Component)<\/strong> \ubc29\uc2dd\uacfc, DOM \uc790\uccb4\uc5d0 \ub9e1\uae30\uace0 \ud544\uc694\ud560 \ub54c\ub9cc \uac12\uc744 \uac00\uc838\uc624\ub294 <strong>\ube44\uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8(Uncontrolled Component)<\/strong> \ubc29\uc2dd\uc758 \uc7a5\ub2e8\uc810\uc744 \uc774\ud574\ud558\uace0 \uc0c1\ud669\uc5d0 \ub9de\uac8c \uc0ac\uc6a9\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4.2. \ud3f4\ub354 \uad6c\uc870<\/h3>\n\n\n\n<p>\uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc774 \uc131\uc7a5\ud568\uc5d0 \ub530\ub77c \uc720\uc9c0\ubcf4\uc218 \uac00\ub2a5\ud55c \ud3f4\ub354 \uad6c\uc870\ub97c \uac16\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4. \uc77c\ubc18\uc801\uc778 \ud328\ud134\uc73c\ub85c\ub294 \uae30\ub2a5(feature)\ubcc4\ub85c \ucef4\ud3ec\ub10c\ud2b8, hooks, API \ud638\ucd9c, \ud0c0\uc785 \ub4f1\uc744 \uadf8\ub8f9\ud654\ud558\ub294 <strong>Feature-based<\/strong> \uad6c\uc870\uac00 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5. \ud504\ub85c\ub355\uc158 \uc900\ube44\uc640 \ubc30\ud3ec<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">5.1. \ud658\uacbd \ubcc0\uc218 \uad00\ub9ac<\/h3>\n\n\n\n<p>\uac1c\ubc1c, \uc2a4\ud14c\uc774\uc9d5, \ud504\ub85c\ub355\uc158 \ud658\uacbd\uc5d0 \ub530\ub77c \ub2e4\ub978 API \uc8fc\uc18c\ub098 \ud0a4 \uac12\uc744 \uc0ac\uc6a9\ud574\uc57c \ud569\ub2c8\ub2e4. React(<code>create-react-app<\/code> \uae30\uc900)\ub294 <code>.env<\/code> \ud30c\uc77c\uc744 \ud1b5\ud574 \ud658\uacbd \ubcc0\uc218\ub97c \uad00\ub9ac\ud558\ub294 \uae30\ub2a5\uc744 \uae30\ubcf8\uc801\uc73c\ub85c \uc81c\uacf5\ud569\ub2c8\ub2e4. <code>REACT_APP_<\/code> \uc811\ub450\uc0ac\ub97c \uc0ac\uc6a9\ud558\uc5ec \ubcc0\uc218\ub97c \uc815\uc758\ud558\uace0, \ucf54\ub4dc\uc5d0\uc11c\ub294 <code>process.env.REACT_APP_API_URL<\/code>\uacfc \uac19\uc774 \uc811\uadfc\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5.2. Docker\ub97c \uc774\uc6a9\ud55c \ucee8\ud14c\uc774\ub108\ud654<\/h3>\n\n\n\n<p>Docker\ub294 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uacfc \uadf8 \uc758\uc874\uc131\ub4e4\uc744 \ucee8\ud14c\uc774\ub108\ub77c\ub294 \uaca9\ub9ac\ub41c \ud658\uacbd\uc73c\ub85c \ud328\ud0a4\uc9d5\ud558\ub294 \uae30\uc220\uc785\ub2c8\ub2e4. Docker\ub97c \uc0ac\uc6a9\ud558\uba74 &#8220;\uc81c \ucef4\ud4e8\ud130\uc5d0\uc11c\ub294 \uc798 \ub410\ub294\ub370&#8230;&#8221;\uc640 \uac19\uc740 \ubb38\uc81c\ub97c \uc5c6\uc560\uace0, \uac1c\ubc1c\ubd80\ud130 \ud504\ub85c\ub355\uc158\uae4c\uc9c0 \uc77c\uad00\ub41c \ud658\uacbd\uc5d0\uc11c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc2e4\ud589\ud558\uace0 \ubc30\ud3ec\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\uc774 \uac00\uc774\ub4dc\uc5d0\uc11c \ub2e4\ub8ec \uc8fc\uc81c\ub4e4\uc740 React\ub97c \uc0ac\uc6a9\ud558\uc5ec \ubcf5\uc7a1\ud558\uace0 \uc131\ub2a5\uc774 \ub6f0\uc5b4\ub09c \uc2e4\uc81c \uc11c\ube44\uc2a4\ub97c \uad6c\ucd95\ud558\ub294 \ub370 \ud544\uc218\uc801\uc778 \uc694\uc18c\ub4e4\uc785\ub2c8\ub2e4. \uafb8\uc900\ud55c \ud559\uc2b5\uacfc \uc2e4\uc81c \ud504\ub85c\uc81d\ud2b8 \uc801\uc6a9\uc744 \ud1b5\ud574 React \uc804\ubb38\uac00\ub85c \uac70\ub4ed\ub098\uc2dc\uae38 \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>React\uc758 \uae30\ubcf8\uacfc \uc911\uae09 \uacfc\uc815\uc744 \ub9c8\uc2a4\ud130\ud55c \ub2f9\uc2e0, \uc774\uc81c\ub294 \ud504\ub85c\ub355\uc158 \ub808\ubca8\uc758 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ucd95\ud558\uace0 \ucd5c\uc801\ud654\ud558\ub294 \uace0\uae09 \uae30\uc220\uc744 \uc775\ud790 \ucc28\ub840\uc785\ub2c8\ub2e4. \uc774 \uac00\uc774\ub4dc\uc5d0\uc11c\ub294 \uc0c1\ud0dc \uad00\ub9ac \uc544\ud0a4\ud14d\ucc98, \uc7ac\uc0ac\uc6a9 \uac00\ub2a5\ud55c \ub85c\uc9c1 \ucd94\uc0c1\ud654, \ub80c\ub354\ub9c1 \ucd5c\uc801\ud654, \uadf8\ub9ac\uace0 \ud504\ub85c\ub355\uc158 \ubc30\ud3ec \uc804\ub7b5\uae4c\uc9c0, \uc2e4\ubb34\uc5d0\uc11c \ub9c8\uc8fc\ud558\ub294 \ubcf5\uc7a1\ud55c \ubb38\uc81c\ub4e4\uc744 \ud574\uacb0\ud558\uae30 \uc704\ud55c \uace0\uae09 \uc8fc\uc81c\ub4e4\uc744 \ub2e4\ub8f9\ub2c8\ub2e4. \ubaa9\ucc28 1. \uace0\uae09 \uc0c1\ud0dc \uad00\ub9ac \uc544\ud0a4\ud14d\ucc98 1.1. \ud074\ub77c\uc774\uc5b8\ud2b8 \uc0c1\ud0dc vs \uc11c\ubc84 \uc0c1\ud0dc \ud604\ub300 React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[100,102,101],"class_list":["post-13","post","type-post","status-publish","format-standard","hentry","category-react","tag-react","tag-react-js","tag-101"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/13","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=13"}],"version-history":[{"count":2,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/13\/revisions"}],"predecessor-version":[{"id":79,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/13\/revisions\/79"}],"wp:attachment":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=13"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}