{"id":320,"date":"2017-01-22T21:17:46","date_gmt":"2017-01-22T12:17:46","guid":{"rendered":"http:\/\/www.mukgee.com\/?p=320"},"modified":"2017-01-22T21:17:46","modified_gmt":"2017-01-22T12:17:46","slug":"reactjs-reactjs-%ed%8a%9c%ed%86%a0%eb%a6%ac%ec%96%bc-%eb%94%b0%eb%9d%bc%ed%95%98%ea%b8%b0-%ea%b0%9c%eb%b0%9c-%ed%99%98%ea%b2%bd-%ea%b5%ac%ec%84%b1","status":"publish","type":"post","link":"http:\/\/mukgee.com\/?p=320","title":{"rendered":"[ReactJS] ReactJS \ud29c\ud1a0\ub9ac\uc5bc \ub530\ub77c\ud558\uae30"},"content":{"rendered":"<p>\uc774 \uae00\uc740\u00a0<a href=\"https:\/\/facebook.github.io\/react\/tutorial\/tutorial.html\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/facebook.github.io\/react\/tutorial\/tutorial.html<\/a>\u00a0\uc758 \ud29c\ud1a0\ub9ac\uc5bc\uc744 \ub530\ub77c\ud574\ubcf8 \uac83\uc774\ub2e4.<\/p>\n<p>\ud658\uacbd \uc124\uc815\uc744 \ub9c8\ucce4\ub2e4\uba74(\ud658\uacbd \uc124\uc815\uc774 \uc548\ub418\uc5b4 \uc788\ub2e4\uba74 <span style=\"color: #008080;\"><a style=\"color: #008080;\" href=\"http:\/\/www.mukgee.com\/?p=305\">\uc774\uae00<\/a><\/span>\uc744 \ud655\uc778),\u00a0<a href=\"https:\/\/codepen.io\/ericnakagawa\/pen\/vXpjwZ?editors=0010\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/codepen.io\/ericnakagawa\/pen\/vXpjwZ?editors=0010<\/a>\u00a0\uc5d0\uc11c starter code\ub97c \ubc1b\uc544\ubcf4\uc790.<\/p>\n<ol>\n<li><strong>components \ubc11\uc5d0 app.jsx \ud30c\uc77c\uc744 \ub9cc\ub4e4\uc5b4\u00a0Square ,\u00a0Board ,\u00a0Game class\ub97c \uc0dd\uc131\ud558\uc5ec export \ud55c\ub4a4 entry.jsx \uc5d0\uc11c \ud574\ub2f9 \ubaa8\ub4c8\ub4e4\uc744 \uad6c\ud604\ud55c\ub2e4. <\/strong><\/li>\n<li><strong>src\/css \ud3f4\ub354 \ubc11\uc5d0 style.css\ub97c \ub9cc\ub4e4\uc5b4 starter code\uc5d0 \uc788\ub294 css\ub97c \uadf8\ub0e5 \ubcf5\ubd99\ud558\uc790. <\/strong><\/li>\n<li><strong>index.html \uc5d0 html \u00a0\ucf54\ub4dc\ub4e4\ub3c4 \ubcf5\ubd99\ud574\uc11c \ud29c\ud1a0\ub9ac\uc5bc\uc744 \ub530\ub77c\ud560 \uae30\ubcf8\uc801\uc778 \ucf54\ub4dc\ub97c \uad6c\uc131\ud55c\ub2e4.<\/strong><\/li>\n<li><strong>webpack \uc73c\ub85c \ube4c\ub4dc\ud574\uc11c \ube0c\ub77c\uc6b0\uc838\uc5d0\uc11c \ud655\uc778\ud574\ubcf4\uc790<\/strong><\/li>\n<\/ol>\n<p>\ud658\uacbd \uc124\uc815\uacfc starter code\uac00 \ube0c\ub77c\uc6b0\uc838\uc5d0\uc11c \uc2e4\ud589 \ub418\uc5c8\ub2e4\uba74 \ud29c\ud1a0\ub9ac\uc5bc\uc744 \ub530\ub77c\uac00\ub294\ub370 \ud070 \ubb38\uc81c\uac00 \uc5c6\uc744 \uac83\uc774\ub2e4.<\/p>\n<p>\ud29c\ud1a0\ub9ac\uc5bc\uc5d0 \ub098\uc624\ub294 \uba87\uac00\uc9c0 \uc911\uc694\ud55c \uc810\ub9cc \ud655\uc778\ud574\ubcf4\uc790<\/p>\n<ul>\n<li><strong><strong><span style=\"color: #000000;\">Immutability<\/span><br \/>\n<\/strong><\/strong>\uadf8 \uc911\uac04\uc5d0 \uac1d\uccb4\uc758 \uac12\uc744 \ubcc0\uacbd\ud558\ub294\ub370 slice() \ub97c \uc0ac\uc6a9\ud558\uc5ec \ubcf5\uc81c\ud55c\ub2e4\uc74c \uac12\uc744 \ubcc0\uacbd\ud558\uace0 \ub2e4\uc2dc state\uc5d0 \ud560\ub2f9\ud558\ub294 \uc791\uc5c5\uc774 \uc788\ub2e4. \uc774 \ubd80\ubd84\uc5d0 \ub300\ud574 \ud29c\ud1a0\ub9ac\uc5bc\uc5d0\uc11c \uaf64\ub098 \uc911\uc694\ud558\uac8c \uc5b8\uae09(bold \ucc98\ub9ac\ub41c \ud14d\uc2a4\ud2b8)\ud558\ub294\ub370,\uc65c \ubcf5\uc0ac\ud574\uc11c \uac12\uc744 \ubcc0\uacbd\ud558\uace0 \ub2e4\uc2dc \ud560\ub2f9 \ud558\ub294 \uc791\uc5c5(Immutability \ub77c\uace0 \ubd80\ub978\ub2e4)\uac00 \uc911\uc694\ud558\ub0d0\uba74, ReactJS\ub294 \ubcc0\uacbd\ub41c \ub370\uc774\ud130\uc5d0 \ub300\ud574 re-rendering \uc791\uc5c5\uc744 \ud558\ub294\ub370 \uac12\uc744 \ubcc0\uacbd\ud558\ub294 \uc791\uc5c5\uc744 immutability\ud558\uac8c \uc9c4\ud589 \ub418\uc5c8\ub2e4\uba74 \ubcc0\uacbd\uc5ec\ubd80\ub97c \ud310\ub2e8\ud558\ub294\uac8c \uac04\ub2e8\ud558\uace0 \uc27d\uc9c0\ub9cc(\uc8fc\uc18c\uac12\ub9cc \uccb4\ud06c)\u00a0mutated \uac1d\uccb4\uc758 \uacbd\uc6b0 \ubcc0\uacbd \uc5ec\ubd80 \ud655\uc778\uc744 \uc704\ud574 \ub0b4\ubd80 \ubaa8\ub4e0 \uac12\uc744 \ud655\uc778\ud574\uc57c\ud558\uace0 \uac12 \ubcc0\uacbd \uc791\uc5c5\uc774 \ubcf5\uc7a1\ud588\uc744 \uacbd\uc6b0 re-rendering \uc744 \uc704\ud55c \uac12 \ubcc0\uacbd \uc5ec\ubd80 \uccb4\ud06c \ud504\ub85c\uc138\uc2a4\uac00 \uae30\ud558\uae09\uc218\uc801\uc73c\ub85c \ubcf5\uc7a1\ud574\uc9c0\uae30 \ub54c\ubb38\uc774\ub2e4. \ub530\ub77c\uc11c <span style=\"color: #0000ff;\">ReactJS\uc5d0\uc11c\ub294 \ud2b9\ud788\u00a0Immutability\uac00 \uc911\uc694\ud558\ub2e4.<\/span><\/li>\n<\/ul>\n<ul>\n<li><span style=\"color: #000000;\"><strong>Functional Components<br \/>\n<\/strong><\/span>\uc774 \ud568\uc218\ub294 stateless functional components \ub77c\uace0 \ubd88\ub9ac\ub294\ub370<strong>\u00a0\u00a0<\/strong>render() \ud568\uc218\ub9cc \uac00\uc9c0\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc774\ub2e4 Functional Components \uc758 \uacbd\uc6b0\uc791\uc131\ud558\uae30\uac00 \uc27d\uace0 \ud5a5\ud6c4\uc5d0 ReactJS\uac00 \ud574\ub2f9 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ub300\ud574 \ucd5c\uc801\ud654\ub97c \uc9c4\ud589\ud558\uae30 \ub54c\ubb38\uc5d0 \ubaa9\uc801\uc5d0 \ub530\ub77c \ud574\ub2f9 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc815\uc758\ud558\ub294\uac83\uc774 \uc911\uc694\ud560 \uac83 \uac19\ub2e4.<\/li>\n<li><strong><span style=\"color: #000000;\">Key<\/span><br \/>\n<\/strong>ReactJS\uc5d0\uc11c \ub9ac\uc2a4\ud2b8 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1 \ud560 \ub54c \uc911\uc694\ud55c \ud3ec\uc778\ud2b8\uac00 Key \uc774\ub2e4. \ub9ac\uc2a4\ud2b8 \uc544\uc774\ud15c\uc774 \uc5c5\ub370\uc774\ud2b8(\ucd94\uac00,\uc0ad\uc81c,\uc218\uc815)\uac00 \ub420 \ub54c React\ub294 \uadf8 \uc911 \uc5b4\ub5a4 \uac1d\uccb4\uac00 \ubcc0\uacbd \ub418\uc5b4\uc11c re-rendering \ud574\uc57c\ud558\ub294\uc9c0 \ud30c\uc545\ud574\uc57c\ud55c\ub2e4. \uadf8\ub54c \uc0ac\uc6a9\ub418\ub294\uac83\uc774 Key \uc774\ub2e4. \ub9ac\uc2a4\ud2b8 \uac1d\uccb4\uc5d0 Key\ub97c \ud560\ub2f9\ud558\ub294\uac83\uc740\u00a0<strong>strongly recommended <\/strong>\ud558\ub2e4. (Global unique \uc77c \ud544\uc694\ub294 \uc5c6\uace0 \uadf8 \ub9ac\uc2a4\ud2b8 \ub0b4\uc5d0\uc11c\ub9cc unique \ud574\ub3c4 \ubb38\uc81c \uc5c6\ub2e4.)<\/li>\n<\/ul>\n<p>AngularJS\uc758 \ubb38\uc81c\uc810\uc73c\ub85c \ub290\ub9b0 \uc18d\ub3c4\uac00 \ub9ce\uc774 \uc9c0\uc801\ub418\uc5c8\ub358 \uac83\uc73c\ub85c \uc544\ub294\ub370 \uc774\ub7f0 \uba87\uac00\uc9c0 \uc694\uc18c\ub4e4\uc744 \uc9c0\ucf1c \uc900\ub2e4\uba74 \uc18d\ub3c4 \uc774\uc288 \uc5c6\uc774 View\ub97c \uad6c\uc131 \ud560 \uc218 \uc788\uc744\uac83\uc73c\ub85c \uc0dd\uac01\ub41c\ub2e4.<\/p>\n<p>\ud29c\ud1a0\ub9ac\uc5bc \uc790\uccb4\ub294 \uc5b4\ub835\uc9c0 \uc54a\uc9c0\ub9cc ReactJS\ub97c \ucc98\uc74c \uc2dc\uc791\ud558\uae30 \uc704\ud574\uc11c\ub294 ReactJS\uc640 \ud568\uaed8 \uc791\ub3d9\ud558\ub294 \uc5d0\ucf54\uc2dc\uc2a4\ud15c\ub4e4(\ud30c\uc774\ud504\ub77c\uc778)\uc5d0 \ub300\ud574 \uc774\ud574\ud558\uace0 \uc0ac\uc6a9\ud560 \uc904 \uc54c\uc544\uc57c \ud55c\ub2e4\ub294 \uc810\uc774 \uaf64\ub098 \ud53c\uace4\ud55c\uac83 \uac19\ub2e4.(\ub7ec\ub2dd\ucee4\ube0c\uac00 ReactJS\uc5d0\uc11c\ub9cc \ubc1c\uc0dd\ud558\ub294 \uac83\uc774 \uc544\ub2c8\ub77c webpack\uc774\ub098 Babel , \uc0ac\uc2e4\uc0c1 webpack\uc5d0\uc11c \ubc1c\uc0dd).<\/p>\n<p>\ud29c\ud1a0\ub9ac\uc5bc \uc790\uccb4\ub294 step by step \uc73c\ub85c \uaf64\ub098 \uce5c\uc808\ud558\uac8c \uadf8\ub9ac\uace0 \ucd94\uac00 \ubb38\uc81c\uae4c\uc9c0 \uc81c\uacf5\ud574\uc8fc\ub294\ub370 \ub530\ub77c\uac00\uae30 \uc27d\ub2e4. Square\uc5d0\uc11c\ub9cc \uc774\ubca4\ud2b8\uac00 \uc2dc\uc791\ub418\ub294 \ucd08\uae30 \ub2e8\uacc4\uc5d0\uc11c Square\uc5d0\uc11c \ubc1c\uc0dd\ub41c \uc774\ubca4\ud2b8\uac00 Game \uac1d\uccb4\uc758 state\ub97c \ubcc0\uacbd\uc2dc\ud0a4\ub294 \uac83\uae4c\uc9c0\ub85c \ub9c8\ubb34\ub9ac \ub41c\ub2e4. \uc18c\uc2a4\ucf54\ub4dc\ub97c \ub2e4\uc2dc \ubcf4\uace0 \ucd94\uac00 \ubb38\uc81c\ub97c \ud480\uc5b4\ubd10\uc57c\uaca0\ub2e4.<\/p>\n<p>ReactJS\uc5d0\uc11c \ub610\ub2e4\ub978 \ud2b9\uc9d5\uc774 Server-side Rendering \uc73c\ub85c \uc54c\uace0 \uc788\ub294\ub370, \ud29c\ud1a0\ub9ac\uc5bc \ud6c4\uc5d0 \uadf8 \ubd80\ubd84\uacfc Ajax\ucc98\ub9ac.. Fetch \uc778\uc9c0 Request\uc778\uc9c0 \uadf8 \ubd80\ubd84\ub3c4\u00a0\uacf5\ubd80\ud574\uc57c\ud560 \ud544\uc694\uac00 \uc788\uc744\uac83 \uac19\ub2e4.<\/p>\n<p>\ud29c\ud1a0\ub9ac\uc5bc\uc744 \ub530\ub77c\uac00\uba70 \ub9cc\ub4e4\uc5c8\ub358 \uc18c\uc2a4\ub294 github\uc5d0 \uc62c\ub824\ub450\uc790<\/p>\n<p><a href=\"https:\/\/github.com\/sok891111\/reactJStutorial\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/github.com\/sok891111\/reactJStutorial<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uc774 \uae00\uc740\u00a0https:\/\/facebook.github.io\/react\/tutorial\/tutorial.html\u00a0\uc758 \ud29c\ud1a0\ub9ac\uc5bc\uc744 \ub530\ub77c\ud574\ubcf8 \uac83\uc774\ub2e4. \ud658\uacbd \uc124\uc815\uc744 \ub9c8\ucce4\ub2e4\uba74(\ud658\uacbd \uc124\uc815\uc774 \uc548\ub418\uc5b4 \uc788\ub2e4\uba74 \uc774\uae00\uc744 \ud655\uc778),\u00a0https:\/\/codepen.io\/ericnakagawa\/pen\/vXpjwZ?editors=0010\u00a0\uc5d0\uc11c starter code\ub97c \ubc1b\uc544\ubcf4\uc790. components \ubc11\uc5d0 app.jsx \ud30c\uc77c\uc744 \ub9cc\ub4e4\uc5b4\u00a0Square ,\u00a0Board ,\u00a0Game class\ub97c \uc0dd\uc131\ud558\uc5ec&hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":""},"categories":[3],"tags":[20,30],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/mukgee.com\/index.php?rest_route=\/wp\/v2\/posts\/320"}],"collection":[{"href":"http:\/\/mukgee.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/mukgee.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/mukgee.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/mukgee.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=320"}],"version-history":[{"count":0,"href":"http:\/\/mukgee.com\/index.php?rest_route=\/wp\/v2\/posts\/320\/revisions"}],"wp:attachment":[{"href":"http:\/\/mukgee.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=320"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/mukgee.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=320"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/mukgee.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}