{"id":437,"date":"2021-03-04T05:25:48","date_gmt":"2021-03-04T05:25:48","guid":{"rendered":"http:\/\/scrutineer.co.kr\/wordpress\/?p=437"},"modified":"2021-03-10T07:58:57","modified_gmt":"2021-03-10T07:58:57","slug":"%eb%a6%ac%eb%8d%95%ec%8a%a4-in-react","status":"publish","type":"post","link":"https:\/\/scrutineer.co.kr\/wordpress\/index.php\/2021\/03\/04\/%eb%a6%ac%eb%8d%95%ec%8a%a4-in-react\/","title":{"rendered":"\ub9ac\ub355\uc2a4 in react"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">&#8216;\ub9ac\ub355\uc2a4&#8217; \uac00 \ubb34\uc5c7\uc774\ub0d0?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\ub531 \uc798\ub77c \ub9d0\ud560 \uc218 \uc5c6\ub294 &#8216;\uac1c\ub150&#8217;\uc801\uc778 \uac83\uc774\ub2e4. \uc77c\uc885\uc758 \ud504\ub808\uc784\uc6cc\ud06c-\ub77c\uc774\ube0c\ub7ec\ub9ac?-\uac19\uc740\uac70\ub77c \uc0dd\uac01\ud558\uba74 \ub428..(&#8216;\uc2a4\ud504\ub9c1 \ud504\ub808\uc784\uc6cc\ud06c\uac00 \ubb34\uc5c7\uc774\ub0d0?&#8217; \ub77c\uace0 \uc9c8\ubb38\ubc1b\uc73c\uba74 \ud560 \ub9d0\uc774 \uc5c6\ub294\uac70\ub791 \ub611\uac19\uc74c&#8230;)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uad73\uc774 \ud55c\ub9c8\ub514\ub85c \ucd95\uc57d\ud558\uc790\uba74<strong><span class=\"has-inline-color has-vivid-red-color\"> &#8216;\uc0c1\ud0dc \uad00\ub9ac \ub77c\uc774\ube0c\ub7ec\ub9ac&#8217; <\/span><\/strong>\uc815\ub3c4\uc774\ub2e4. \uadfc\ub370 \uc790\ubc14 \uac1c\ubc1c\uc790\uc5d0\uac90 \ubcf5\uc7a1\ud568&#8230;.\ud64d\uae38\ub3d9\ub9c8\ub0e5 \ub3d9\uc5d0\ubc88\uca4d \uc11c\uc5d0\ubc88\uca4d&#8230;..;;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc77c\ub2e8 \uc804\ubc18\uc801\uc778 \ub3d9\uc791\uacfc\uc815\uc744 \ucd5c\ub300\ud55c \ucd95\uc57d\ud574\uc11c \ub9d0\ud558\uc790\uba74 \ub2e4\uc74c\uacfc \uac19\uc774 \ub9d0\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\ucef4\ud3ec\ub10c\ud2b8(\ud639\uc740 \ucee8\ud14c\uc774\ub108)\uc5d0\uc11c <strong>action<\/strong>\uc744 <strong>dispatch<\/strong>\ud558\uc5ec, <strong>reducer<\/strong>\uac00 <strong>action<\/strong>\uc5d0 \ub530\ub978 \uc815\ud574\uc9c4 \ub3d9\uc791\uc744 \uc218\ud589\ud55c\ub2e4.<ul><li>\uc774\ub54c, \uba85\uc2dc\uc801\uc73c\ub85c \uc0ac\uc6a9\uc790\uc758 \ub3d9\uc791\uc774 action\uc744 dispatch\ud560 \uc218\ub3c4 \uc788\uace0.<\/li><li>useEffect\ub9c8\ub0e5 \ucef4\ud3ec\ub10c\ud2b8\uac00 &#8216;\ub9c8\uc6b4\ud2b8(\ub85c\ub529?)&#8217; \ub420 \ub54c \ubb35\uc2dc\uc801\uc73c\ub85c action\uc744 dispatch\ud560 \uc218\ub3c4 \uc788\uace0.<\/li><\/ul><\/li><li><strong>reducer<\/strong>\uac00 \ub3d9\uc791\uc744 \uc218\ud589\ud558\uba74 \uc0c8\ub85c\uc6b4 \uc0c1\ud0dc\ub97c \ub9ac\ud134 \ud560\ud150\ub370, \uc774\ub97c <strong>store<\/strong>\uc5d0 \uc800\uc7a5\ud55c\ub2e4.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">use case<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>store\uc5d0\uc11c\uc758 \ud2b9\uc815 \uac12\uc744 \uc77d\uace0 \uc2f6\ub2e4!<ul><li>\uac04\ub2e8\ud568. state\ub97c \uac4d \uc77d\uc73c\uba74 \ub41c\ub2e4.<ul><li>\uc544 \uadf8\ub798\uc11c \uc5b4\ub5bb\uac8c \uc77d\ub0d0\uace0 \u314b\u314b\u314b\u314b\u314b<ul><li>\ucef4\ud3ec\ub10c\ud2b8\uc758 props\uc640 \ub9e4\ud551\uc744 \ud558\uba74 \ub41c\ub2e4.<\/li><li>react-redux \ud328\ud0a4\uc9c0\uc758 connect\ub77c\ub294 \ub0b4\uc7a5 \uba54\uc18c\ub4dc\uac00 \uc788\uc74c<\/li><li>state\uc640 \ucef4\ud3ec\ub10c\ud2b8\uc758 props\ub97c \ub9e4\ud551\ud558\ub294 \uae30\ub2a5 \uc81c\uacf5. \ub9e4\ub274\uc5bc\uc5d0 \ub530\ub77c \ub9e4\ud551\ud558\uba74 \ub428.<\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><li>store\uc5d0\uc11c \ud2b9\uc815 \uac12\uc744 \uc4f0\uace0 \uc2f6\ub2e4!<ul><li>\uc548\uac04\ub2e8\ud568. \uadf8\ub0e5 state\ub97c write\ud560 \uc21c \uc5c6\ub2e4.<ul><li>\uadf8\ub7fc \ubabb\ud568?<ul><li>\uc544\ub2c8. \ub9ac\ub355\uc2a4\uc758 \uac1c\ub150\uc744 \uc798 \uc0dd\uac01\ud574\ubcf4\uc790. action\uc744 dispatch\ud574\uc11c, reducer\uac00 state\ub97c \ubcc0\uacbd\uc2dc\ud0a4\ub294 \uad6c\uc870\uc784<\/li><li>\uadf8\ub807\ub2e4. store\uc758 \uac12\uc744 \ubc14\uafb8\uace0 \uc2f6\uc73c\uba74 action\uc744 dispatch\ud558\uba74 \ub41c\ub2e4!<\/li><\/ul><\/li><li>\uadf8\ub7fc \uadf8 action\uc744 dispatch\ub294 \uc5b4\ucf00 \ud558\ub294\ub370?<ul><li>state\ub97c \uc77d\ub294 \uc0c1\ud669\uacfc \ube44\uc2b7\ud558\uac8c, &#8216;action\uc744 dispatch\ud558\ub294 \ud568\uc218&#8217;\ub97c, props\uc640 \ub9e4\ud551\uc744 \ud558\uba74 \ub41c\ub2e4.<\/li><li>react-redux \ud328\ud0a4\uc9c0\uc758 connect\ub77c\ub294 \ub0b4\uc7a5 \uba54\uc18c\ub4dc\ub97c \ud1b5\ud574 \uac00\ub2a5\ud568.<\/li><li>props \uba54\uc18c\ub4dc\ub97c \ud638\ucd9c\ud558\ub4ef \ud568\uc218 \ucf5c\uc744 \ud574 \ubc84\ub9ac\uba74, (\ud568\uc218\uac00 &#8216;action\uc744 dispatch\ud558\ub294 \ub3d9\uc791&#8217;\uc774 \ucf54\ub529\ub418\uc5b4\uc788\uc73c\ub2c8) \uc790\uc5f0\uc2a4\ub808 action\uc774 dispatch\ub41c\ub2e4.\u3147\u3147<\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\uc561\uc158<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\ub9d0 \uadf8\ub300\ub85c \uc561\uc158 \uadf8 \uc790\uccb4. \uc77c\uc885\uc758 json \uac1d\uccb4\uc778\ub370<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ubc18\ub4dc\uc2dc type \ud504\ub85c\ud37c\ud2f0\ub294 \ud558\ub098 \uc788\uc5b4\uc57c \ud55c\ub2e4.(\ubb34\uc2a8 \ud589\uc704\ub97c \ud574\uc57c \ud560 \uc9c0 \uacb0\uc815\ud558\ub294 &#8216;\ud0a4\uac12&#8217;\uc774\ub77c\uace0 \uc0dd\uac01\ud558\uba74 \ub420\ub4ef)<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\uc561\uc158 \uc0dd\uc131 \ud568\uc218<\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">const changeInput = text => ({\n  type: 'CHANGE_INPUT',\n  text\n});<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc561\uc158 \uac1d\uccb4\ub97c \ub9cc\ub4e4\uc5b4\uc8fc\ub294 \ud568\uc218&#8230; \ub3d9\uc791\uc774 fire\ub420 \ub584\ub9c8\ub2e4 \uc561\uc158\uc744 \uc0c8\ub85c \ub9cc\ub4e4\uc5b4\uc11c \uc0ac\uc6a9\ud558\uba74 \ub418\uaca0\uc9c0\ub9cc, \uc774\ub807\uac8c \uc561\uc158 \uc0dd\uc131\ud558\ub294 \ud568\uc218\ub85c \uad00\ub9ac\ud574 \uc8fc\ub294\uac8c \uc88b\uc73c\ub2c8 \ubb50&#8230;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\ub9ac\ub4c0\uc11c<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\ubcc0\ud654\ub97c \uc77c\uc73c\ud0a4\ub294 \ud568\uc218. \uc561\uc158\uc744 \uc77c\uc73c\ud0a4\ub294\uac8c \uc544\ub2c8\ub77c, \uc561\uc158\uc744 \ubc1b\uace0 &#8216;\uc0c1\ud0dc\ub97c \ubcc0\ud654&#8217; \ud558\ub294 \uac83\uc774\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\ud604\uc7ac \uc0c1\ud0dc &amp;&amp; \uc804\ub2ec\ubc1b\uc740 \uc561\uc158\uac1d\uccb4\ub97c \ud30c\ub77c\ubbf8\ud130\ub85c \ubc1b\uc544\uc634<\/li><li>\uadf8\ub9ac\uace0 \uc774 \ub450\uac12\uc744 \ucc38\uace0\ud574, \uc0c8\ub85c\uc6b4 \uc0c1\ud0dc(\uc561\uc158) \uc744 \ub9cc\ub4e4\uc5b4\uc11c \ubc18\ud658<\/li><li>\uc608<ul><li>\ud604\uc7ac\uc0c1\ud0dc : -7<ul><li>\uc804\ub2ec\ubc1b\uc740 \uc561\uc158\uac1d\uccb4: type\uc774 &#8216;increase&#8217; \uc778 \ubb38\uc790\uc5f4<\/li><li>\ub9ac\ub4c0\uc11c\uc758 \uba54\uc18c\ub4dc \ubc14\ub514 : \ud604\uc7ac\uc0c1\ud0dc+1 &#8211;&gt; -6<\/li><\/ul><\/li><\/ul><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\uc2a4\ud1a0\uc5b4<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\ub9ac\ub355\uc2a4\ub97c \uc801\uc6a9\ud558\uae30 \uc704\ud574 \ub9cc\ub4dc\ub294 \uc2a4\ud1a0\uc5b4. <strong>\uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\ubcc4\ub85c \ud558\ub098\ub9cc \uac00\uc9c8 \uc218 \uc788\uc74c<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ub2e4\uc74c \ub450\uac00\uc9c0 \uc18d\uc131\uc774 \ub4e4\uc5b4\uac00 \uc788\uc74c<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\ud604\uc7ac \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158 \uc0c1\ud0dc<\/li><li>\ub9ac\ub4c0\uc11c<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\ub514\uc2a4\ud328\uce58<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\uc561\uc158\uc744 \ubc1c\uc0dd\ud558\ub294 \ub0b4\uc7a5 \ud568\uc218. \ubcf4\ud1b5 dispatch(action) \ud615\ud0dc\ub85c \ud638\ucd9c\ub428&#8230;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ub514\uc2a4\ud328\uce58\uac00 fire\ub418\uba74, \ub9ac\ub4c0\uc11c\uac00 \uc2e4\ud589\ub418\uba70 \uc0c8\ub85c\uc6b4 \uc0c1\ud0dc(\uc561\uc158\uac1d\uccb4) \uac00 \uc0dd\uc131\ub418\ub294 \uad6c\uc870\uc774\ub2e4.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\uad6c\ub3c5<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:5px\">\uc88b\uc544\uc694,\uc54c\ub9bc\uc124\uc815<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">subscribe\ud568\uc218 \uc548\uc5d0 \ub9ac\uc2a4\ud130 \ud568\uc218\ub97c \ud30c\ub77c\ubbf8\ud130\ub85c \ub123\uc73c\uba74,<\/p>\n\n\n\n<p class=\"has-black-color has-text-color wp-block-paragraph\"><strong>\ub9ac\uc2a4\ub108 \ud568\uc218\uac00 \ub514\uc2a4\ud328\uce58\ub418\uc5b4<\/strong>, \uc0c1\ud0dc\uac00 \uc5c5\ub370\uc774\ud2b8 \ub420 \ub54c \ub9c8\ub2e4 \ud638\ucd9c\ub428<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8216;\ub9ac\ub355\uc2a4&#8217; \uac00 \ubb34\uc5c7\uc774\ub0d0? \ub531 \uc798\ub77c \ub9d0\ud560 \uc218 \uc5c6\ub294 &#8216;\uac1c\ub150&#8217;\uc801\uc778 \uac83\uc774\ub2e4. \uc77c\uc885\uc758 \ud504\ub808\uc784\uc6cc\ud06c-\ub77c\uc774\ube0c\ub7ec\ub9ac?-\uac19\uc740\uac70\ub77c \uc0dd\uac01\ud558\uba74 \ub428..(&#8216;\uc2a4\ud504\ub9c1 \ud504\ub808\uc784\uc6cc\ud06c\uac00 \ubb34\uc5c7\uc774\ub0d0?&#8217; \ub77c\uace0 \uc9c8\ubb38\ubc1b\uc73c\uba74 \ud560 \ub9d0\uc774 \uc5c6\ub294\uac70\ub791 \ub611\uac19\uc74c&#8230;) \uad73\uc774 \ud55c\ub9c8\ub514\ub85c \ucd95\uc57d\ud558\uc790\uba74 &#8216;\uc0c1\ud0dc \uad00\ub9ac \ub77c\uc774\ube0c\ub7ec\ub9ac&#8217; \uc815\ub3c4\uc774\ub2e4. \uadfc\ub370 \uc790\ubc14 \uac1c\ubc1c\uc790\uc5d0\uac90 \ubcf5\uc7a1\ud568&#8230;.\ud64d\uae38\ub3d9\ub9c8\ub0e5 \ub3d9\uc5d0\ubc88\uca4d \uc11c\uc5d0\ubc88\uca4d&#8230;..;; \uc77c\ub2e8 \uc804\ubc18\uc801\uc778 \ub3d9\uc791\uacfc\uc815\uc744 \ucd5c\ub300\ud55c \ucd95\uc57d\ud574\uc11c \ub9d0\ud558\uc790\uba74 \ub2e4\uc74c\uacfc \uac19\uc774 \ub9d0\ud560 \uc218 \uc788\ub2e4. \ucef4\ud3ec\ub10c\ud2b8(\ud639\uc740 \ucee8\ud14c\uc774\ub108)\uc5d0\uc11c action\uc744 dispatch\ud558\uc5ec, reducer\uac00 action\uc5d0 \ub530\ub978 \uc815\ud574\uc9c4 \ub3d9\uc791\uc744 &#8230; <a title=\"\ub9ac\ub355\uc2a4 in react\" class=\"read-more\" href=\"https:\/\/scrutineer.co.kr\/wordpress\/index.php\/2021\/03\/04\/%eb%a6%ac%eb%8d%95%ec%8a%a4-in-react\/\" aria-label=\"Read more about \ub9ac\ub355\uc2a4 in react\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-437","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/scrutineer.co.kr\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/437","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/scrutineer.co.kr\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/scrutineer.co.kr\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/scrutineer.co.kr\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/scrutineer.co.kr\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=437"}],"version-history":[{"count":3,"href":"https:\/\/scrutineer.co.kr\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/437\/revisions"}],"predecessor-version":[{"id":441,"href":"https:\/\/scrutineer.co.kr\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/437\/revisions\/441"}],"wp:attachment":[{"href":"https:\/\/scrutineer.co.kr\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=437"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/scrutineer.co.kr\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=437"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/scrutineer.co.kr\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}