{"id":48234,"date":"2024-07-03T20:14:53","date_gmt":"2024-07-04T03:14:53","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=48234"},"modified":"2024-07-03T20:14:53","modified_gmt":"2024-07-04T03:14:53","slug":"react-design-patterns-kr","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/ko\/%eb%b6%84%eb%a5%98%eb%90%98%ec%a7%80-%ec%95%8a%ec%9d%8c\/react-design-patterns-kr\/","title":{"rendered":"\uaf2d \uc54c\uc544\uc57c \ud560 React \ub514\uc790\uc778 \ud328\ud134"},"content":{"rendered":"\r\n
\"\u77e5\u3063\u3066\u304a\u304d\u305f\u3044React\u306e<\/figure>\r\n\r\n\r\n\r\n

React \ub77c\uc774\ube0c\ub7ec\ub9ac, \ub2e4\ub4e4 \ub4e4\uc5b4 \ubcf4\uc168\ub098\uc694~<\/strong><\/p>\r\n

React\ub294 \uc628\ub77c\uc778 \ucee4\ubba4\ub2c8\ud2f0\uc5d0\uc11c \uac00\uc7a5 \ube60\ub974\uac8c \uc131\uc7a5\ud558\uace0 \uc788\ub294 \uac1c\ubc1c\uc790 \ucee4\ubba4\ub2c8\ud2f0 \uc911 \ud558\ub098\ub85c UXPin\uacfc \ud568\uaed8 \uc0ac\uc6a9\ud558\uba74 \ub354 \ud6a8\uacfc\uc801\uc73c\ub85c \uac1c\ubc1c\uc744 \ud560 \uc218 \uc788\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. \uc2e4\uc81c\ub85c \ub9ce\uc740 \uac1c\ubc1c\uc790\ub4e4\uc774 UXPin\uc758 Merge\uae30\ub2a5\uacfc React\uc758 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc774\uc6a9\ud574 DesignOps\uc758 \ub2e4\uc591\ud55c \ubb38\uc81c\ub97c \uc27d\uac8c \ud574\uacb0\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\r\n

React\uc5d0\ub294 \uc218\ub9ce\uc740 \ud6cc\ub96d\ud55c \uae30\ub2a5\uc774 \uc788\uc9c0\ub9cc \uadf8\uc911 \uac1c\ubc1c\uc790\ub4e4\uc5d0\uac8c \uac00\uc7a5 \uc0ac\ub791\ubc1b\ub294 \uae30\ub2a5\uc740 \ub2e8\uc5f0 \ub514\uc790\uc778 \ud328\ud134\uc785\ub2c8\ub2e4. (\u2018\ub514\uc790\uc778 \uc2dc\uc2a4\ud15c\u2019\uacfc\ub294 \ub2e4\ub978 \ub2e8\uc5b4\uc785\ub2c8\ub2e4! \ud63c\ub3d9\ud558\uc9c0 \ub9d0\uc544 \uc8fc\uc138\uc694! ) \uacfc\uc5f0 \uc5b4\ub5a4 \uae30\ub2a5\uc774\uae30\uc5d0 \ub9ce\uc740 \uac1c\ubc1c\uc790\ub4e4\uc5d0\uac8c \uc0ac\ub791\ubc1b\ub294\uc9c0 \uad81\uae08\ud558\uc9c0 \uc54a\ub098\uc694?<\/p>\r\n

\uadf8\ub798\uc11c \uc900\ube44\ud588\uc2b5\ub2c8\ub2e4!<\/p>\r\n

\uc624\ub298\uc740 React\uc758 \ub514\uc790\uc778 \ud328\ud134\uc5d0 \ub300\ud574 \uad81\uae08\ud574\ud560 \ubd84\ub4e4\uc744 \uc704\ud574 \u201c\uaf2d \uc54c\uc544\uc57c \ud560 React\uc758 \ub514\uc790\uc778 \ud328\ud134\u201d\uc744 \uc18c\uac1c\ud560 \uc608\uc815\uc785\ub2c8\ub2e4. React \ub77c\uc774\ube0c\ub7ec\ub9ac\uc640 \ub514\uc790\uc778 \ud328\ud134\uc5d0 \ub300\ud55c \uac04\ub2e8\ud55c \uc18c\uac1c\ub97c \uc900\ube44\ud588\uc73c\ub2c8, \uc990\uac81\uac8c \uc77d\uc5b4\uc8fc\uc2dc\uae38 \ubc14\ub78d\ub2c8\ub2e4!<\/p>\r\n

 <\/p>\r\n

React\ub780?<\/h2>\r\n

React\ub294 \uc804 \uc138\uacc4\uac00 \ub2e4 \uc544\ub294 \uae30\uc220 \ub300\uae30\uc5c5\uc778 Facebook\uc758 \uac1c\ubc1c\uc790\uac00 \uac1c\ubc1c\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. \ud604\uc7ac\uae4c\uc9c0\ub3c4 Facebook\uc5d0\uc11c \uc801\uadf9\uc801\uc73c\ub85c \uac1c\ubc1c \ubc0f \uc720\uc9c0 \uad00\ub9ac\ub97c \ud558\uace0 \uc788\uc73c\uba70 JavaScript \ucee4\ubba4\ub2c8\ud2f0\uc758 \uc218\ub9ce\uc740 \uae30\uc5ec\uc790 \ub610\ud55c \uc815\uae30\uc801\uc73c\ub85c React\ub97c \uac1c\uc120\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. React\uac00 \uc774\ub807\uac8c \ub9ce\uc740 \uac1c\ubc1c\uc790\uc5d0\uac8c \uc0ac\ub791\ubc1b\ub294 \uc774\uc720\ub294 \ub2e4\ub978 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc5d0\ub294 \uc5c6\ub294 \ub3c5\ud2b9\ud55c \ud2b9\uc131 \ub54c\ubb38\uc785\ub2c8\ub2e4. \uacfc\uc5f0 \uc5b4\ub5a4 \ud2b9\uc131 \ub54c\ubb38\uc5d0 \ud604\uc7ac \uac00\uc7a5 \uc778\uae30 \uc788\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac\uac00 \ub418\uc5c8\ub294\uc9c0 \uc9c0\uae08\ubd80\ud130 \ud655\uc778\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\r\n

 <\/p>\r\n

JSX(JavaScript eXtension) \ubb38\ubc95<\/b><\/h3>\r\n

<\/p>\r\n

\uc704\uc758 \ud0dc\uadf8 \ubb38\ubc95\uc774 \ubb34\uc5c7\uc77c\uae4c\uc694? HTML\uc774\ub77c\uace0 \uc0dd\uac01\ud558\uc2e4 \ubd84\ub3c4 \uacc4\uc2dc\uaca0\uc9c0\ub9cc, \uc544\ub2d9\ub2c8\ub2e4! \uc774 \uc7ac\ubbf8\uc788\ub294 \ud0dc\uadf8 \ubb38\ubc95\uc740 \ubc14\ub85c React\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 JSX(JavaScript eXtension) \ubb38\ubc95\uc785\ub2c8\ub2e4. JSX\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uae30\ubc18\uc73c\ub85c \ud558\uace0 \uc788\uc73c\uba70 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ucf54\ub4dc\ub97c HTML\ucc98\ub7fc \ud45c\ud604\ud560 \uc218 \uc788\ub294 \ubb38\ubc95\uc785\ub2c8\ub2e4.<\/p>\r\n

 <\/p>\r\n

\uc989, \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uc548\uc5d0\uc11c HTML \ubb38\ubc95\uc744 \uc0ac\uc6a9\ud574 \uc27d\uac8c view\ub97c \uad6c\uc131\ud560 \uc218 \uc788\uc5b4 React \uac1c\ubc1c\uc5d0 \ub9ce\uc740 \ub3c4\uc6c0\uc744 \uc8fc\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\r\n

 <\/p>\r\n

Virtual DOM(Document Object Model, \ubb38\uc11c \uac1d\uccb4 \ubaa8\ub378)<\/b><\/h3>\r\n

React\ub294 \uc11c\ubc84\uc640 \ub370\uc774\ud130 \ud1b5\uc2e0\uacfc\ub294 \ubcc4\uac1c\ub85c DOM \uac1d\uccb4\ub97c \uc9c1\uc811 \uc870\uc791\ud574\uc57c \ud558\ub294 \uae30\uc874\uc758 \uc6f9 \ud654\uba74 \uac1c\ubc1c \ubc29\uc2dd\uacfc \ub2ec\ub9ac, Virtual DOM\uc774\ub77c\ub294 \uc2e4\uc6a9\uc801\uc778 \uc218\uc900\uc758 \ucd94\uc0c1\uc801 \uac1c\ub150\uc744 \uc0ac\uc6a9\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\r\n

Virtual DOM \uc774\ub780 UI\uc758 \uc774\uc0c1\uc801\uc778 \ub610\ub294 \u201c\uac00\uc0c1\u201d\uc801\uc778 \ud45c\ud604\uc744 \uba54\ubaa8\ub9ac\uc5d0 \uc800\uc7a5\ud558\uace0 React DOM\uacfc \uac19\uc740 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc5d0 \uc758\ud574 \u201c\uc2e4\uc81c\u201dDOM\uacfc \ub3d9\uae30\ud654\ud558\ub294 \ud504\ub85c\uadf8\ub798\ubc0d \uac1c\ub150\uc744 \ub73b\ud569\ub2c8\ub2e4. \uc774 \uac1c\ub150\uc744 \ub370\uc774\ud130\uac00 \uc790\uc8fc \ubcc0\uacbd\ub418\ub294 \uc6f9 \uc571\uc5d0 \uc801\uc6a9\ud558\uba74 \uc131\ub2a5\uc744 \ud06c\uac8c \ud5a5\uc0c1\uc2dc\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\r\n

 <\/p>\r\n\r\n\r\n\r\n

Component<\/b><\/h3>\r\n

\ub9c8\uc9c0\ub9c9 \ud2b9\uc9d5\uc740 \ubc14\ub85c Component\uc785\ub2c8\ub2e4. React\ub294 \uc7ac\uc0ac\uc6a9 \uac00\ub2a5\ud55c \ucef4\ud3ec\ub10c\ud2b8 \uae30\ubc18 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c HTML \ucf54\ub4dc\ub97c \uc5ec\ub7ec \ubd80\ubd84\uc73c\ub85c \ubd84\ud560\ud574 \uc800\uc7a5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub807\uae30 \ub54c\ubb38\uc5d0 \ucf54\ub4dc\uc758 \uc77c\ubd80\ub97c \uc218\uc815\ud574\uc57c \ud560 \ub54c \uadf8 \ubd80\ubd84\ub9cc \uc218\uc815\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4. \uc624\ub958\uac00 \ubc1c\uc0dd\ud588\uc744 \ub54c \uc804\uccb4\uc758 \ucf54\ub4dc\ub97c \uc218\uc815\ud558\uc9c0 \uc54a\uc544\ub3c4 \ub418\uae30 \ub54c\ubb38\uc5d0 \uc5c5\ubb34\uc758 \ud6a8\uc728\uc744 \ub192\uc774\uace0 \uc720\uc9c0 \ubcf4\uc218\uc131\uc744 \ub192\uc774\ub294 \ub370 \ub3c4\uc6c0\uc774 \ub429\ub2c8\ub2e4.<\/p>\r\n

React\uc758 \ud798\uc740 \uc704\uc640 \uac19\uc740 \ub180\ub77c\uc6b4 \uae30\ub2a5\uacfc \uadf8\uac83\uc774 \uc81c\uacf5\ud558\ub294 \uac15\ub825\ud55c \uc544\ud0a4\ud14d\ucc98 \ub54c\ubb38\uc785\ub2c8\ub2e4. \uc774 \uc678\uc5d0\ub3c4 React\uc758 \ub514\uc790\uc778 \ud328\ud134\uc740 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc5d0 \ud0c1\uc6d4\ud55c \uc2e4\uc6a9\uc131\uacfc \uc720\uc6a9\uc131\uc744 \uc81c\uacf5\ud574\uc90d\ub2c8\ub2e4. \uc774 \ub6f0\uc5b4\ub09c \ub514\uc790\uc778 \ud328\ud134\uc5d0 \ub300\ud55c \uc18c\uac1c\ub294 \ub2e4\uc74c \uc138\uc158\uc5d0\uc11c \uc774\uc5b4 \uc9c4\ud589\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\r\n

 <\/p>\r\n

\ub514\uc790\uc778 \ud328\ud134\uc774\ub780?<\/h2>\r\n

\u2018\ub514\uc790\uc778 \ud328\ud134\u2019\u200b\uc740 \uac04\ub2e8\ud788 \ub9d0\ud574 \uc18c\ud504\ud2b8\uc6e8\uc5b4 \uac1c\ubc1c\uc5d0\uc11c \uc77c\ubc18\uc801\uc73c\ub85c \ubc1c\uc0dd\ud558\ub294 \ubb38\uc81c\ub4e4\uc5d0 \ub300\ud55c \ud574\uacb0 \ubc29\ubc95\uc744 \uc815\ub9ac\ud55c \ud328\ud134\uc744 \ub73b\ud569\ub2c8\ub2e4. \u201c\ubc14\ud034\ub97c \ub2e4\uc2dc \ubc1c\uba85\ud558\uc9c0 \ub9c8\ub77c\u201d\ub77c\ub294 \ub9d0\uc774 \uc788\ub4ef\uc774 \uc774\ubbf8 \ub9cc\ub4e4\uc5b4\uc9c4 \ud574\uacb0 \ubc29\ubc95\uc744 \ub2e4\uc2dc \ub9cc\ub4dc\ub294 \uac74 \uc2dc\uac04 \ub0ad\ube44\uc785\ub2c8\ub2e4.<\/p>\r\n


\uadf8\ub807\uae30 \ub54c\ubb38\uc5d0 \ub514\uc790\uc778 \ud328\ud134\uc774 \ud0c4\uc0dd\ud55c \uac83\uc774\uba70 \uc774\ub97c \uc0ac\uc6a9\ud558\uba74 \uac1c\ubc1c \ud504\ub85c\uc138\uc2a4\uc758 \uc18d\ub3c4\uc640 \ud6a8\uc728\uc744 \ub192\uc77c \ubfd0\ub9cc \uc544\ub2c8\ub77c \ucf54\ub4dc\ub97c \uc77d\uae30 \uc27d\uac8c \ud558\uace0 \uc720\uc9c0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uadf8 \ubc16\uc5d0 \ub514\uc790\uc778 \ud328\ud134\uc774 \ud560 \uc218 \uc788\ub294 \uc77c\uc774 \ubb34\uc5c7\uc778\uc9c0 \uc54c\uc544\ubcfc\uae4c\uc694?<\/p>\r\n

 <\/p>\r\n

\ub514\uc790\uc778 \ud328\ud134\uc758 \uc7a5\uc810\uc740?<\/h2>\r\n

\uac1c\ubc1c\uc790\ub4e4\uc5d0\uac8c \ud45c\uc900 \ud50c\ub7ab\ud3fc \uc81c\uacf5<\/b><\/h3>\r\n

\uc704\uc5d0\uc11c \uc54c\ub824\ub4dc\ub9b0 \uac83\ucc98\ub7fc \ub514\uc790\uc778 \ud328\ud134\uc740 \uc54c\ub824\uc9c4 \ubb38\uc81c\uc5d0 \ub300\ud55c \ud45c\uc900 \uc6a9\uc5b4\uc640 \uc194\ub8e8\uc158\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uadf8\ub807\uae30 \ub54c\ubb38\uc5d0 \uac1c\ubc1c\uc790\ub4e4\uc5d0\uac8c \ud45c\uc900 \uac1c\ubc1c \ud50c\ub7ab\ud3fc\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub514\uc790\uc778 \ud328\ud134 \uc911 \ud558\ub098\uc778 Singleton \ud328\ud134\uc744 \uc608\ub97c \ub4e4\uc5b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\r\n\r\n\r\n\r\n

\"\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3<\/figure>\r\n\r\n\r\n\r\n

Singleton \ud328\ud134\uc740 \uc804\uc5ed \ubcc0\uc218\ub97c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uace0 \uac1d\uccb4\ub97c \ud558\ub098\ub9cc \uc0dd\uc131\ud558\ub3c4\ub85d \ud558\uba70, \uc0dd\uc131\ub41c \uac1d\uccb4\ub97c \uc5b4\ub514\uc11c\ub4e0 \ucc38\uc870\ud560 \uc218 \uc788\ub3c4\ub85d \ud558\ub294 \ud328\ud134\uc744 \ub73b\ud569\ub2c8\ub2e4. \uc774 \ud328\ud134\uc744 \uc0ac\uc6a9\ud558\uba74 \uad6c\ud604\ud55c \uac1c\ubc1c\uc790\uac00 \ub2e4\ub978 \uac1c\ubc1c\uc790\uc5d0\uac8c \ubcc4\ub3c4\uc758 \uc124\uba85 \uc5c6\uc774 \ud2b9\uc815 \ud504\ub85c\uadf8\ub7a8\uc774 Singleton \ud328\ud134\uc744 \ub530\ub974\uace0 \uc788\ub2e4\uace0 \uc27d\uac8c \uc54c\ub824\uc904 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\r\n

 <\/p>\r\n

\ubaa8\ubc94\uc0ac\ub840(Best Practice) \ubcf4\uc7a5<\/b><\/h3>\r\n

\ub514\uc790\uc778 \ud328\ud134\uc740 \uad11\ubc94\uc704\ud55c \uc5f0\uad6c\uc640 \ud14c\uc2a4\ud2b8\uc758 \uacb0\uacfc\ub85c\uc11c \ub9cc\ub4e4\uc5b4\uc84c\uc2b5\ub2c8\ub2e4. \uadf8\ub807\uae30 \ub54c\ubb38\uc5d0 \ub514\uc790\uc778 \ud328\ud134\uc744 \uc0ac\uc6a9\ud558\uba74 \uac1c\ubc1c\uc790\ub294 \uc27d\uac8c \uac1c\ubc1c \ud658\uacbd\uc5d0 \uc27d\uac8c \uc775\uc219\ud574\uc9c8 \uc218 \uc788\uace0 \uc2dc\ud589\ucc29\uc624\ub97c \uac70\uce58\uc9c0 \uc54a\uace0 \ubaa8\ubc94\uc0ac\ub840\ub97c \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\r\n

\uc774\uc81c \ub514\uc790\uc778 \ud328\ud134\uc5d0 \ub300\ud574 \uc774\ud574\ud558\uc168\ub098\uc694? \ub514\uc790\uc778 \ud328\ud134\uc744 \ud6a8\uacfc\uc801\uc73c\ub85c \uc7ac\uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95\uc744 \ubc30\uc6cc \ubcf4\uc2dc\ub824\uba74 \u2018\ub6f0\uc5b4\ub09c \uc544\ud2f0\uc2a4\ud2b8\ub4e4\uc774 \uc7ac\uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95\u2019\uc5d0 \ub300\ud55c \uae30\uc0ac\ub97c \ud655\uc778\ud574\ubcf4\uc138\uc694.<\/p>\r\n\r\n\r\n\r\n

 <\/p>\r\n

React \ub514\uc790\uc778 \ud328\ud134<\/h2>\r\n

\uc2a4\ud14c\uc774\ud2b8\ub9ac\uc2a4 \ucef4\ud3ec\ub10c\ud2b8(Stateless Components)<\/b><\/p>\r\n

\uc2a4\ud14c\uc774\ud2b8\ub9ac\uc2a4 \ucef4\ud3ec\ub10c\ud2b8(Stateless Components)\uc5d0 \uad00\ud574 \uc774\uc57c\uae30\ud558\uae30\uc5d0 \uc55e\uc11c State\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. State\ub780 \ucef4\ud3ec\ub10c\ud2b8 \ub0b4\uc5d0\uc11c \uc815\uc758 \ubc0f \ubcc0\uacbd\uc774 \uac00\ub2a5\ud55c \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc0c1\ud0dc \uac12\uc744 \ub73b\ud558\ub294 \uac1d\uccb4\uc785\ub2c8\ub2e4. \uc27d\uac8c \ub9d0\ud558\uba74 State\ub97c \uc0ac\uc6a9\ud558\uba74 \ub85c\uadf8\uc778\ud588\uc744 \ub54c \u201c\uc548\ub155\ud558\uc138\uc694\u201d\uc640 \uac19\uc774 \uace0\uc815\ub41c \ubb38\uad6c\uac00 \uc544\ub2c8\ub77c \u201c\uc548\ub155\ud558\uc138\uc694, \ub2e8\uad70\uc18c\ud504\ud2b8\ub2d8\u201d\uacfc \uac19\uc774 \uc0ac\uc6a9\uc790\uc5d0 \ub530\ub77c \ub2e4\ub978 \ubb38\uad6c\ub97c \ud654\uba74\uc5d0 \ud45c\uc2dc\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\r\n

<\/p>\r\n

 <\/p>\r\n

State\uac00 \ubb34\uc5c7\uc778\uc9c0 \uc54c\uc558\uc73c\uba74 \uc774\uc81c \uc2a4\ud14c\uc774\ud2b8\ub9ac\uc2a4(Stateless)\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc774\ubbf8 \ub208\uce58\ucc44\uc168\uaca0\uc9c0\ub9cc, \uc2a4\ud14c\uc774\ud2b8\ub9ac\uc2a4 \ucef4\ud3ec\ub10c\ud2b8\ub780 \uc774\ub984 \uadf8\ub798\ub3c4 State\uac00 \uc874\uc7ac\ud558\uc9c0 \uc54a\uc740 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc758\ubbf8\ud569\ub2c8\ub2e4.<\/p>\r\n

Stateless \ucef4\ud3ec\ub10c\ud2b8\ub294 \ud074\ub798\uc2a4\uac00 \ud544\uc694\ud558\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc5d0 \uac04\uacb0\ud558\uac8c \uc791\uc131\ud560 \uc218 \uc788\uc73c\uba70 \uc774\ud574\ud558\uae30 \uc27d\uace0 \uc608\uce21\uc774 \uc6a9\uc774\ud569\ub2c8\ub2e4. \ub610\ud55c Life Cycle\uc774 \uc5c6\uae30 \ub54c\ubb38\uc5d0 \ubd88\ud544\uc694\ud55c \uba54\ubaa8\ub9ac \ud560\ub2f9\uacfc \ucc44\ud0b9\uc774 \ubd88\ud544\uc694\ud574 \uac1c\ubc1c \uc131\ub2a5\uc744 \ud5a5\uc0c1\uc2dc\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\r\n

\uc870\uac74\ubd80 \ub80c\ub354\ub9c1(Conditional Rendering)<\/b><\/p>\r\n

\uc870\uac74\ubd80 \ub80c\ub354\ub9c1\uc774\ub780 \ub9d0 \uadf8\ub300\ub85c \ud2b9\uc815 \uc870\uac74\uc774 \ucda9\uc871\ub418\uba74 \ud574\ub2f9 \uacb0\uacfc\uac00 \ub098\uc624\uac8c \uc791\uc5c5\uc744 \uc704\ud574 \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95\uc785\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \uc0ac\uc6a9\uc790\uac00 \ub85c\uadf8\uc778\uc744 \ud558\uba74 \u201cWelcome back!\u201d\uc774\ub77c\ub294 \ubb38\uad6c\uac00 \ub098\uc624\uac8c \ud558\uace0, \ub85c\uadf8\uc778\uc774 \uc548 \ub41c \uc0ac\uc6a9\uc790\uc5d0\uac8c\ub294 \u201cPlease sign up\u201d\uc774\ub77c\ub294 \ubb38\uad6c\uac00 \ub098\uc624\uac8c \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\uc870\uac74\ubd80 \ub80c\ub354\ub9c1\uc740 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c \ub3d9\uc791\ud558\ub294 \uac83\uacfc \ub3d9\uc77c\ud558\uac8c \ub3d9\uc791\ud558\uba70 \ud544\uc694\uc5d0 \ub530\ub77c \ubcc4\ub3c4\uc758 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4e0 \ub2e4\uc74c \uc751\uc6a9 \ud504\ub85c\uadf8\ub7a8\uc5d0 \ud544\uc694\ud55c \ucef4\ud3ec\ub10c\ud2b8\ub9cc \ub80c\ub354\ub9c1 \ud560 \uc218 \uc788\uae30 \ub54c\ubb38\uc5d0 \ub9e4\uc6b0 \uc720\uc6a9\ud558\uac8c \uc0ac\uc6a9\ub418\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\r\n

 <\/p>\r\n

Render Props<\/b><\/p>\r\n

Render Props\ub294 React \ucef4\ud3ec\ub10c\ud2b8 \uac04\uc5d0 \ucf54\ub4dc\ub97c \uacf5\uc720\ud558\uae30 \uc704\ud574 \ud568\uc218 props\ub97c \uc774\uc6a9\ud558\ub294 \uac04\ub2e8\ud55c \ud14c\ud06c\ub2c9\uc744 \ub73b\ud569\ub2c8\ub2e4. \uc989, \uc11c\ub85c \ub2e4\ub978 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \ub3d9\uc77c\ud55c state\ub97c \uacf5\uc720\ud560 \uc218 \uc788\uae30 \ub54c\ubb38\uc5d0 \uadf8 \ub6f0\uc5b4\ub09c \ud3b8\ub9ac\uc131\uc744 \uc99d\uba85\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.\ub610\ud55c \uac01 \ucef4\ud3ec\ub10c\ud2b8 \ub0b4\ubd80\uc758 \ub80c\ub354\ub9c1 \ub85c\uc9c1\uc744 \uad6c\ud604\ud558\ub294 \ub300\uc2e0 function prop\uc744 \uc0ac\uc6a9\ud558\uc5ec \ub80c\ub354\ub9c1 \ud560 \ud56d\ubaa9\uc744 \uacb0\uc815\ud560 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4. Render Props \ud328\ud134\uc5d0 \ub300\ud574 \ub354 \uc790\uc138\ud55c \ub0b4\uc6a9\uc744 \uc54c\uace0 \uc2f6\uc740 \ubd84\uc740 \uc774\u00a0\ubb38\uc11c<\/a>\uc5d0\uc11c \ud655\uc778\ud574\uc8fc\uc138\uc694.<\/p>\r\n

[Render props\ub97c \uc0ac\uc6a9\ud558\ub294 \uc778\uae30 \ub77c\uc774\ube0c\ub7ec\ub9ac]<\/p>\r\n

– React Router<\/p>\r\n

– Downshift<\/p>\r\n

– Formik<\/p>\r\n

 <\/p>\r\n

\uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8(Controlled Components)<\/b><\/p>\r\n

\uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8(Controlled Components)\ub294 \uc0ac\uc6a9\uc790\uc758 \uc785\ub825\uc744 \uae30\ubc18\uc73c\ub85c \uc790\uc2e0\uc758 state\ub97c onChange()\ub97c \uc774\uc6a9\ud574 \ub370\uc774\ud130\ub85c \uad00\ub9ac\ud558\uace0 \uc5c5\ub370\uc774\ud2b8\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4. \uc27d\uac8c \ub9d0\ud574 \ub370\uc774\ud130\uc640 UI\ub97c \uc644\uc804\ud788 \ub3d9\uae30\ud654\ub41c \uc0c1\ud0dc\ub85c \uc0ac\uc6a9\uc790 \uc785\ub825\uc5d0 \uc989\uc2dc \ubc18\uc751\ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub73b\ud569\ub2c8\ub2e4.\ubcf4\ud1b5 \uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8(Controlled Components)\ub97c \uc0ac\uc6a9\ud558\uba74, input\uc758 \uac12\uc740 \ud56d\uc0c1 React state\uc5d0 \uc758\ud574 \uacb0\uc815\ub429\ub2c8\ub2e4. \ucf54\ub4dc\ub97c \uc870\uae08 \ub354 \uc791\uc131\ud574\uc57c \ud55c\ub2e4\ub294 \uc758\ubbf8\uc774\uc9c0\ub9cc, \ub2e4\ub978 UI \uc5d8\ub9ac\uba3c\ud2b8\uc5d0 input\uc758 \uac12\uc744 \uc804\ub2ec\ud558\uac70\ub098 \ub2e4\ub978 \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec\uc5d0\uc11c \uac12\uc744 \uc7ac\uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uae30\ubcf8\uc801\uc73c\ub85c React \uc591\uc2dd\uc740 \uc81c\uc5b4 \ubc0f \ube44 \uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ubaa8\ub450 \uc9c0\uc6d0\ud558\uc9c0\ub9cc, \uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc744 \uc801\uadf9 \ucd94\ucc9c\ud569\ub2c8\ub2e4.<\/p>\r\n

 <\/p>\r\n

React Hook<\/b><\/p>\r\n

Hook\uc740 React\uc5d0 \ube44\uad50\uc801 \ucd5c\uadfc\uc5d0 \ucd94\uac00\ub41c \uae30\ub2a5\uc785\ub2c8\ub2e4. Hook\uc744 \uc774\uc6a9\ud558\uba74 \uac1c\ubc1c\uc790\ub4e4\uc740 Class \ubc14\ud0d5\uc758 \ucf54\ub4dc\ub97c \uc791\uc131\ud560 \ud544\uc694 \uc5c6\uc774 \uc0c1\ud0dc \uac12\uacfc \uc5ec\ub7ec React\uc758 \uae30\ub2a5\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\uc0ac\uc6a9 \uac00\ub2a5\ud55c Hook\uc758 \uc804\uccb4 \ubaa9\ub85d\uc744 \ubcf4\ub824\uba74 Hooks API \ucc38\uc870 \ubb38\uc11c\uc5d0\uc11c \ud655\uc778\ud574 \ubcf4\uc2ed\uc2dc\uc624. React\uc5d0\uc11c \ubbf8\ub9ac \ube4c\ub4dc \ub41c hook \uc678\uc5d0\ub3c4 \uc5ec\ub7ec\ubd84 \ub9cc\uc758 hook\ub97c \ub9cc\ub4e4 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \ucef4\ud3ec\ub10c\ud2b8\uc758 \ub85c\uc9c1\uc744 \ucd94\ucd9c\ud558\uace0 \uc7ac\uc0ac\uc6a9 \uac00\ub2a5\ud55c \ud568\uc218\ub97c \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub7ec\ub098 \uc778\uc218\uac00 \uac1d\uccb4, \ubc30\uc5f4 \ub610\ub294 \ud568\uc218\uc778 \uacbd\uc6b0 hook \uc791\uc5c5\uc774 \uc57d\uac04 \uae4c\ub2e4\ub85c\uc6cc\uc9c8 \uc218 \uc788\ub2e4\ub294 \uc810 \uc8fc\uc758\ud574\uc8fc\uc138\uc694. \uc2e4\uc81c\ub85c \ud558\ub2e4 \ubcf4\uba74 \ub2e4\uc18c \ud63c\ub780\uc2a4\ub7ec\uc6b8 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\r\n

 <\/p>\r\n

\uacb0\ub860<\/h2>\r\n

React\ub294 \ub9e4\uc6b0 \uc778\uae30 \uc788\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc784\uc774 \uc785\uc99d\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \ucee4\ubba4\ub2c8\ud2f0\ub294 \uc628\ub77c\uc778\uc5d0\uc11c \uac00\uc7a5 \ube60\ub974\uac8c \uc131\uc7a5\ud558\ub294 \uac1c\ubc1c\uc790 \ucee4\ubba4\ub2c8\ud2f0 \uc911 \ud558\ub098\uc785\ub2c8\ub2e4. \ub610\ud55c react.js\ub97c \uc27d\uac8c \ubc30\uc6b0\uace0 \uc801\uc6a9\ud560 \uc218 \uc788\ub294 \uc720\uc6a9\ud55c \uc6f9 \uac1c\ubc1c \ub9ac\uc18c\uc2a4\ub97c \uc628\ub77c\uc778\uc5d0\uc11c \ub9ce\uc774 \ucc3e\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\r\n

React\uc758 \uac15\ub825\ud55c \uae30\ub2a5\uc740 \ub180\ub77c\uc6b4 \uae30\ub2a5\uacfc \uc81c\uacf5\ud558\ub294 \uac15\ub825\ud55c \uc544\ud0a4\ud14d\ucc98 \ub54c\ubb38\uc785\ub2c8\ub2e4. React\uc758 \uac00\uc7a5 \ub450\ub4dc\ub7ec\uc9c0\uace0 \ub110\ub9ac \uc0ac\ub791\ubc1b\ub294 \uae30\ub2a5 \uc911 \ud558\ub098\ub294 \ub514\uc790\uc778 \ud328\ud134\uc785\ub2c8\ub2e4. \ub514\uc790\uc778 \ud328\ud134\uc740 \uc2e4\uc81c\ub85c \uc774 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc5d0 \ud0c1\uc6d4\ud55c \uc2e4\uc6a9\uc131\uacfc \uc720\uc6a9\uc131\uc744 \ubd80\uc5ec\ud569\ub2c8\ub2e4. \ucf54\ub4dc \ucd5c\uc801\ud654 \ubc0f \uc720\uc9c0 \uad00\ub9ac\uac00 \ub354 \uc26c\uc6cc\uc9d1\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \uac1c\ubc1c\uc790\ub294 \ubcf8\uc9c8\uc801\uc73c\ub85c \uc720\uc5f0\ud55c \uc571\uc744 \ub9cc\ub4e4\uace0 \ub354 \ub098\uc740 \uc131\ub2a5\uc744 \uc81c\uacf5\ud558\uba70 \uc720\uc9c0 \uad00\ub9ac\uac00 \ub354 \uc26c\uc6b4 \ucf54\ub4dc\ubca0\uc774\uc2a4\ub97c \uc0dd\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc6b0\ub9ac\ub294 \uc0c1\ud0dc \ube44\uc800\uc7a5 \uae30\ub2a5, \ub80c\ub354\ub9c1 \uc18c\ud488, \uc81c\uc5b4\ub41c \uad6c\uc131 \uc694\uc18c, \uc870\uac74\ubd80 \ub80c\ub354\ub9c1 \ubc0f \ubc18\uc751 \ud6c4\ud06c\uc640 \uac19\uc740 \uba87 \uac00\uc9c0 \uc778\uae30 \uc788\ub294 React \ub514\uc790\uc778 \ud328\ud134\uc5d0 \ub300\ud574 \ub17c\uc758\ud588\uc2b5\ub2c8\ub2e4. \uadf8\ub7ec\ub098 \ubc18\uc751 \ub514\uc790\uc778 \ud328\ud134\uc740 \uc774\ub7ec\ud55c \ud328\ud134\uc5d0\ub9cc \uad6d\ud55c\ub418\uc9c0 \uc54a\uc73c\uba70 \uad6c\ud604\ud560 \uc218 \uc788\ub294 \ub2e4\uc591\ud55c \ub514\uc790\uc778 \ud328\ud134\uc774 \uc788\ub2e4\ub294 \uc810\uc5d0 \uc720\uc758\ud574\uc57c \ud569\ub2c8\ub2e4. \uc77c\ubc18\uc801\uc778 \ub514\uc790\uc778 \ud328\ud134\uc758 \uc0ac\uc6a9\ubc95\uc5d0 \uc775\uc219\ud574\uc9c0\uba74 \ub2e4\ub978 \uac83\uc73c\ub85c \uc804\ud658\ud558\uae30\uac00 \ub354 \uc26c\uc6cc\uc9c8 \uac83\uc785\ub2c8\ub2e4.\u200b<\/p>\r\n

\uc801\uc808\ud55c \ub3c4\uad6c\ub97c \uc0ac\uc6a9\ud558\uba74 React \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc758 \uc9c4\uc815\ud55c \ubcf8\uc9c8\uc744 \ub354 \uc27d\uac8c \ud30c\uc545\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. UXPin\uc5d0\uc11c \uc6b0\ub9ac\ub294 \uc815\ud655\ud558\uac8c \uc81c\uacf5\ud569\ub2c8\ub2e4! \uc124\uacc4 \uc6d0\uce59\uc5d0 \ub300\ud55c \uae4a\uc740 \uc774\ud574\ub97c \ubc14\ud0d5\uc73c\ub85c \uc804\uccb4 \uc124\uacc4 \ud504\ub85c\uc138\uc2a4 \ubc0f \uc804\ub2ec\uc744 \ub2e8\uc21c\ud654\ud558\ub294 \ub3c4\uad6c\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4. UXPin\uc740 \uc804 \uc138\uacc4\uc758 \ud300\uc774 \uc544\uc774\ub514\uc5b4\ub97c \uc81c\ud488\uc73c\ub85c \ub354 \ube60\ub974\uac8c \uc804\ud658\ud560 \uc218 \uc788\ub3c4\ub85d \ub3d5\uc2b5\ub2c8\ub2e4.<\/p>\r\n

Merge\ub97c \uc0ac\uc6a9\ud558\uba74 PayPal\uacfc \uac19\uc740 \ud68c\uc0ac \uc5d0\uc11c React \uad6c\uc131 \uc694\uc18c\ub85c \ub514\uc790\uc778\ud560 \uc218 \uc788\ub3c4\ub85d \ud558\uc5ec DesignOps \ubb38\uc81c\ub97c \uc27d\uac8c \ud574\uacb0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc544\ub798 UXPin Merge \ubc14\ub85c\uac00\uae30\ub97c \ub20c\ub7ec Merge\ub97c \uccb4\ud5d8\ud574\ubcf4\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4.<\/p>\r\n

UXPin Merge \ubc14\ub85c\uac00\uae30<\/b><\/a><\/p>\r\n

\"\"
<\/a>\"\"<\/figure>\r\n\r\n\r\n\r\n
\r\n
\r\n
Discover Merge<\/a><\/center><\/div>\r\n<\/div>\r\n<\/div>\r\n","protected":false},"excerpt":{"rendered":"

React \ub77c\uc774\ube0c\ub7ec\ub9ac, \ub2e4\ub4e4 \ub4e4\uc5b4 \ubcf4\uc168\ub098\uc694~ React\ub294 \uc628\ub77c\uc778 \ucee4\ubba4\ub2c8\ud2f0\uc5d0\uc11c \uac00\uc7a5 \ube60\ub974\uac8c \uc131\uc7a5\ud558\uace0 \uc788\ub294 \uac1c\ubc1c\uc790 \ucee4\ubba4\ub2c8\ud2f0 \uc911 \ud558\ub098\ub85c UXPin\uacfc \ud568\uaed8 \uc0ac\uc6a9\ud558\uba74 \ub354 \ud6a8\uacfc\uc801\uc73c\ub85c \uac1c\ubc1c\uc744 \ud560 \uc218 \uc788\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. \uc2e4\uc81c\ub85c \ub9ce\uc740 \uac1c\ubc1c\uc790\ub4e4\uc774 UXPin\uc758 Merge\uae30\ub2a5\uacfc React\uc758 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc774\uc6a9\ud574 DesignOps\uc758 \ub2e4\uc591\ud55c \ubb38\uc81c\ub97c \uc27d\uac8c \ud574\uacb0\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. React\uc5d0\ub294 \uc218\ub9ce\uc740 \ud6cc\ub96d\ud55c \uae30\ub2a5\uc774 \uc788\uc9c0\ub9cc \uadf8\uc911 \uac1c\ubc1c\uc790\ub4e4\uc5d0\uac8c \uac00\uc7a5 \uc0ac\ub791\ubc1b\ub294 \uae30\ub2a5\uc740 \ub2e8\uc5f0 \ub514\uc790\uc778 \ud328\ud134\uc785\ub2c8\ub2e4. (\u2018\ub514\uc790\uc778 \uc2dc\uc2a4\ud15c\u2019\uacfc\ub294<\/p>\n","protected":false},"author":226,"featured_media":48239,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[446],"tags":[],"class_list":["post-48234","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-446"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/ko\/wp-json\/wp\/v2\/posts\/48234","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/ko\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/ko\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/ko\/wp-json\/wp\/v2\/users\/226"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/ko\/wp-json\/wp\/v2\/comments?post=48234"}],"version-history":[{"count":5,"href":"https:\/\/www.uxpin.com\/studio\/ko\/wp-json\/wp\/v2\/posts\/48234\/revisions"}],"predecessor-version":[{"id":48365,"href":"https:\/\/www.uxpin.com\/studio\/ko\/wp-json\/wp\/v2\/posts\/48234\/revisions\/48365"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/ko\/wp-json\/wp\/v2\/media\/48239"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/ko\/wp-json\/wp\/v2\/media?parent=48234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/ko\/wp-json\/wp\/v2\/categories?post=48234"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/ko\/wp-json\/wp\/v2\/tags?post=48234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}