\uc548\ub155\ud558\uc138\uc694! \uc774\ubc88 \uae00\uc5d0\uc11c\ub294 \ub9ac\uc561\ud2b8(React)\uc5d0\uc11c \ub2e4\uc591\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc5b4\ub5bb\uac8c \uc0ac\uc6a9\ud558\uace0, \ud65c\uc6a9\ud560 \uc218 \uc788\ub294\uc9c0\ub97c \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \ub9ac\uc561\ud2b8\ub294 UI\ub97c \uad6c\ucd95\ud558\uae30 \uc704\ud55c \uac15\ub825\ud55c JavaScript \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c, \ub2e4\uc591\ud55c \uc11c\ub4dc\ud30c\ud2f0 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc640 \ud568\uaed8 \uc0ac\uc6a9\ud558\uc5ec \ub354\uc6b1 \ud6a8\uc728\uc801\uc774\uace0 \ud3b8\ub9ac\ud55c \uc791\uc5c5\uc744 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ubc88 \uac15\uc88c\uc5d0\uc11c\ub294 \ub9ac\uc561\ud2b8\uc640 \ud568\uaed8 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \uba87 \uac00\uc9c0 \uc778\uae30 \uc788\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc18c\uac1c\ud558\uace0, \uc774\ub97c \ud1b5\ud574 \uc5b4\ub5bb\uac8c \uc0dd\uc0b0\uc131\uc744 \ub192\uc77c \uc218 \uc788\ub294\uc9c0\ub97c \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
\ub9ac\uc561\ud2b8\ub294 Facebook\uc5d0\uc11c \uac1c\ubc1c\ud55c \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4(UI) \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c, \ucef4\ud3ec\ub10c\ud2b8 \uae30\ubc18 \uc544\ud0a4\ud14d\ucc98\uc640 \uac00\uc0c1 DOM\uc744 \ud65c\uc6a9\ud574 UI\ub97c \ud6a8\uc728\uc801\uc73c\ub85c \uc5c5\ub370\uc774\ud2b8\ud558\ub294 \ud2b9\uc9d5\uc774 \uc788\uc2b5\ub2c8\ub2e4. \ub9ac\uc561\ud2b8\ub97c \ud65c\uc6a9\ud558\uba74 \ubcf5\uc7a1\ud55c \ub2e8\uc77c \ud398\uc774\uc9c0 \uc560\ud50c\ub9ac\ucf00\uc774\uc158(SPA)\uc744 \uac04\ub2e8\ud558\uac8c \uad6c\ucd95\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
Redux\ub294 \ub9ac\uc561\ud2b8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc0c1\ud0dc \uad00\ub9ac\ub97c \ub2e8\uc21c\ud654\ud558\uae30 \uc704\ud574 \uac1c\ubc1c\ub41c \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \ubaa8\ub4e0 \uc0c1\ud0dc\ub97c \uc911\uc559 \uc9d1\uc911\uc2dd \uc800\uc7a5\uc18c\uc5d0\uc11c \uad00\ub9ac\ud558\ubbc0\ub85c, \uc5ec\ub7ec \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc0c1\ud0dc\ub97c \uacf5\uc720\ud574\uc57c \ud560 \ub54c \uc720\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n
npm install redux react-redux<\/code><\/pre>\n\uc0ac\uc6a9 \uc608\uc81c<\/h4>\n
\uc544\ub798\ub294 Redux\ub97c \uc0ac\uc6a9\ud558\uc5ec \uac04\ub2e8\ud55c \uce74\uc6b4\ud130 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4dc\ub294 \ubc29\ubc95\uc785\ub2c8\ub2e4.<\/p>\n
\nimport React from 'react';\nimport { createStore } from 'redux';\nimport { Provider, connect } from 'react-redux';\n\n\/\/ \uc561\uc158 \ud0c0\uc785\nconst INCREMENT = 'INCREMENT';\n\n\/\/ \uc561\uc158 \uc0dd\uc131\uc790\nconst increment = () => ({\n type: INCREMENT,\n});\n\n\/\/ \ub9ac\ub4c0\uc11c\nconst counter = (state = 0, action) => {\n switch (action.type) {\n case INCREMENT:\n return state + 1;\n default:\n return state;\n }\n};\n\n\/\/ \uc2a4\ud1a0\uc5b4 \uc0dd\uc131\nconst store = createStore(counter);\n\n\/\/ \ucef4\ud3ec\ub10c\ud2b8\nconst Counter = ({ count, increment }) => (\n \n {count}<\/h1>\n