\ub9ac\uc561\ud2b8(React)\ub294 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uad6c\ucd95\ud558\uae30 \uc704\ud55c JavaScript \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. \ub9ac\uc561\ud2b8\ub294 \ucef4\ud3ec\ub10c\ud2b8 \uae30\ubc18 \uc544\ud0a4\ud14d\ucc98\ub97c \ucc44\ud0dd\ud558\uace0 \uc788\uc73c\uba70, \uc774\ub85c \uc778\ud574 \uac1c\ubc1c\uc790\ub294 \uc7ac\uc0ac\uc6a9 \uac00\ub2a5\ud55c UI \uad6c\uc131 \uc694\uc18c\ub97c \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ubcf8 \uac15\uc88c\uc5d0\uc11c\ub294 \ub9ac\uc561\ud2b8\uc758 \ud575\uc2ec \uac1c\ub150\uc778 ‘\ucef4\ud3ec\ub10c\ud2b8’\uc640 ‘\uc0c1\ud0dc’\uc5d0 \ub300\ud574 \uae4a\uc774 \uc788\uac8c \ub2e4\ub8f0 \uac83\uc785\ub2c8\ub2e4.<\/p>\n
\ucef4\ud3ec\ub10c\ud2b8\ub294 \ub9ac\uc561\ud2b8\uc758 \uae30\ubcf8 \ube4c\ub529 \ube14\ub85d\uc73c\ub85c, UI\ub97c \uad6c\uc131\ud558\ub294 \uc791\uc740 \uc870\uac01\uc785\ub2c8\ub2e4. \uac01 \ucef4\ud3ec\ub10c\ud2b8\ub294 \ub3c5\ub9bd\uc801\uc73c\ub85c \uc791\ub3d9\ud558\uba70, \ub2e4\ub978 \ucef4\ud3ec\ub10c\ud2b8\uc640 \uacb0\ud569\ud558\uc5ec \ubcf5\uc7a1\ud55c \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \ud615\uc131\ud569\ub2c8\ub2e4.<\/p>\n
\ub9ac\uc561\ud2b8 \ucef4\ud3ec\ub10c\ud2b8\ub294 \ud06c\uac8c \ub450 \uac00\uc9c0 \uc885\ub958\ub85c \ubd84\ub958\ub429\ub2c8\ub2e4.<\/p>\n
\ub9ac\uc561\ud2b8 \ucef4\ud3ec\ub10c\ud2b8\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 \uc0dd\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
import React from 'react';\n\nclass MyComponent extends React.Component {\n render() {\n return <h1>\uc548\ub155\ud558\uc138\uc694, \ub9ac\uc561\ud2b8!<\/h1>;\n }\n}<\/code><\/pre>\n\uc704\uc758 \uc608\uc81c\ub294 \ud074\ub798\uc2a4\ub97c \uc120\uc5b8\ud558\uc5ec ‘MyComponent’\ub77c\ub294 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc815\uc758\ud558\uace0, \uc774\ub97c \uc0ac\uc6a9\ud558\uc5ec “\uc548\ub155\ud558\uc138\uc694, \ub9ac\uc561\ud2b8!”\ub77c\ub294 \ud14d\uc2a4\ud2b8\ub97c \ud654\uba74\uc5d0 \ub80c\ub354\ub9c1\ud558\ub294 \uac04\ub2e8\ud55c \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.<\/p>\n
2. \uc0c1\ud0dc(state)\ub780?<\/h2>\n
\uc0c1\ud0dc\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc758 \ub370\uc774\ud130\ub098 \uac12\uc744 \uc758\ubbf8\ud569\ub2c8\ub2e4. \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc0c1\ud0dc\ub294 \ub0b4\ubd80\uc801\uc73c\ub85c \uc800\uc7a5\ub418\uba70, \uc0c1\ud0dc\uac00 \ubcc0\uacbd\ub420 \uacbd\uc6b0 \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc790\ub3d9\uc73c\ub85c \ub2e4\uc2dc \ub80c\ub354\ub9c1\ub429\ub2c8\ub2e4.<\/p>\n
2.1. \uc0c1\ud0dc\uc758 \uc0ac\uc6a9<\/h3>\n
\ud074\ub798\uc2a4 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc0c1\ud0dc\ub97c \uc0ac\uc6a9\ud558\ub824\uba74, constructor \uba54\uc11c\ub4dc\uc5d0\uc11c \ucd08\uae30 \uc0c1\ud0dc\ub97c \uc815\uc758\ud558\uace0, `this.setState()` \uba54\uc11c\ub4dc\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc0c1\ud0dc\ub97c \uc5c5\ub370\uc774\ud2b8\ud569\ub2c8\ub2e4.<\/p>\n
class MyStateComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = { count: 0 };\n }\n \n increment = () => {\n this.setState({ count: this.state.count + 1 });\n }\n \n render() {\n return (\n <div>\n <p>\ud604\uc7ac \uce74\uc6b4\ud2b8: {this.state.count}<\/p>\n <button onClick={this.increment}>\uc99d\uac00<\/button>\n <\/div>\n );\n }\n}<\/code><\/pre>\n\uc704\uc758 \uc608\uc81c\uc5d0\uc11c ‘MyStateComponent’\ub294 \uce74\uc6b4\ud2b8\ub97c \uc99d\uac00\uc2dc\ud0a4\ub294 \uae30\ub2a5\uc744 \uac00\uc9c4 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4. `increment` \uba54\uc11c\ub4dc\ub97c \ud638\ucd9c\ud558\uba74 \uc0c1\ud0dc\uac00 \ubcc0\uacbd\ub418\uace0, \uc774\ub85c \uc778\ud574 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub2e4\uc2dc \ub80c\ub354\ub9c1\ub429\ub2c8\ub2e4.<\/p>\n
2.2. \ud568\uc218\ud615 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c\uc758 \uc0c1\ud0dc \uad00\ub9ac<\/h3>\n
\ud568\uc218\ud615 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud558\uae30 \uc704\ud574 React\uc758 `useState` Hook\uc744 \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \uc544\ub798\ub294 \uc0c1\ud0dc\ub97c \uc0ac\uc6a9\ud558\ub294 \ud568\uc218\ud615 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc608\uc2dc\uc785\ub2c8\ub2e4.<\/p>\n
import React, { useState } from 'react';\n\nconst MyFunctionalComponent = () => {\n const [count, setCount] = useState(0);\n \n const increment = () => {\n setCount(count + 1);\n }\n \n return (\n <div>\n <p>\ud604\uc7ac \uce74\uc6b4\ud2b8: {count}<\/p>\n <button onClick={increment}>\uc99d\uac00<\/button>\n <\/div>\n );\n}<\/code><\/pre>\n3. \uc0c1\ud0dc\uac00 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ubbf8\uce58\ub294 \uc601\ud5a5<\/h2>\n
\uc0c1\ud0dc\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc758 UI\ub97c \ub3d9\uc801\uc73c\ub85c \ubcc0\ud654\uc2dc\ud0a4\ub294 \uc911\uc694\ud55c \uc694\uc18c\uc785\ub2c8\ub2e4. \uc0c1\ud0dc\uac00 \ubc14\ub00c\uba74 \ucef4\ud3ec\ub10c\ud2b8\uc640 \uad00\ub828\ub41c \ubaa8\ub4e0 \ubd80\ubd84\uc774 \ub2e4\uc2dc \ub80c\ub354\ub9c1\ub418\uba70, \uc774\ub85c \uc778\ud574 \ucd5c\uc2e0 \uc0c1\ud0dc\ub97c \ubc18\uc601\ud55c UI\uac00 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n
3.1. Props\uc640 State\uc758 \ucc28\uc774\uc810<\/h3>\n
\ucef4\ud3ec\ub10c\ud2b8 \uac04\uc5d0 \ub370\uc774\ud130 \uc804\ub2ec \uc2dc \uc0ac\uc6a9\ub418\ub294 ‘props’\uc640, \ucef4\ud3ec\ub10c\ud2b8 \ub0b4\ubd80\uc758 \ub370\uc774\ud130\ub97c \uad00\ub9ac\ud558\ub294 ‘state’\ub294 \uc11c\ub85c \ub2e4\ub978 \uac1c\ub150\uc785\ub2c8\ub2e4. props\ub294 \ubd80\ubaa8 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub85c \uc804\ub2ec\ub418\ub294 \uc77d\uae30 \uc804\uc6a9 \ub370\uc774\ud130\uc774\uba70, state\ub294 \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc790\uccb4\uc801\uc73c\ub85c \uad00\ub9ac\ud558\ub294 \ub370\uc774\ud130\uc785\ub2c8\ub2e4.<\/p>\n
4. \ub9ac\uc561\ud2b8\uc5d0\uc11c \ucef4\ud3ec\ub10c\ud2b8\uc640 \uc0c1\ud0dc \uad00\ub9ac\ud558\uae30<\/h2>\n
\ub9ac\uc561\ud2b8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc740 \ubcf4\ud1b5 \uc5ec\ub7ec \uac1c\uc758 \ucef4\ud3ec\ub10c\ud2b8\ub85c \uad6c\uc131\ub418\uba70, \uc774\ub4e4 \uac04\uc758 \ub370\uc774\ud130 \ud750\ub984\uc740 \uc0c1\uc704 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \ud558\uc704 \ucef4\ud3ec\ub10c\ud2b8\ub85c \uc774\ub8e8\uc5b4\uc9d1\ub2c8\ub2e4. \uc544\ub798\uc5d0\uc11c\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc640 \uc0c1\ud0dc\ub97c \uc5b4\ub5bb\uac8c \ud6a8\uacfc\uc801\uc73c\ub85c \uad00\ub9ac\ud560 \uc218 \uc788\ub294\uc9c0\uc5d0 \ub300\ud574 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
4.1. \uc0c1\ud0dc \ub04c\uc5b4\uc62c\ub9ac\uae30<\/h3>\n
\ubd80\ubaa8 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud558\uace0, \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\uc5d0 props\ub85c \uc804\ub2ec\ud558\ub294 \ubc29\ubc95\uc744 ‘\uc0c1\ud0dc \ub04c\uc5b4\uc62c\ub9ac\uae30’\ub77c\uace0 \ud569\ub2c8\ub2e4. \uc774\ub807\uac8c \ud558\uba74 \uc5ec\ub7ec \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub3d9\uc77c\ud55c \uc0c1\ud0dc\ub97c \uacf5\uc720\ud558\uba70, \uc774\ub97c \ud1b5\ud574 \ub354\uc6b1 \uc77c\uad00\ub41c UI\ub97c \uad6c\ucd95\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
class ParentComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = { sharedState: 0 };\n }\n \n updateSharedState = (newValue) => {\n this.setState({ sharedState: newValue });\n }\n \n render() {\n return (\n <div>\n <ChildComponent sharedState={this.state.sharedState} updateSharedState={this.updateSharedState} \/>\n <\/div>\n );\n }\n}<\/code><\/pre>\n4.2. \uc0c1\ud0dc \uad00\ub9ac \ub77c\uc774\ube0c\ub7ec\ub9ac<\/h3>\n
\ud504\ub85c\uc81d\ud2b8\uac00 \ucee4\uc9c0\uba74\uc11c \uc0c1\ud0dc \uad00\ub9ac\uac00 \ubcf5\uc7a1\ud574\uc9c0\uba74, Redux, MobX\uc640 \uac19\uc740 \uc0c1\ud0dc \uad00\ub9ac \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \uc88b\uc2b5\ub2c8\ub2e4. \uc774\ub7ec\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac\ub294 \uc804\uc5ed \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud558\ub294\ub370 \uc720\uc6a9\ud558\uba70, \ubcf5\uc7a1\ud55c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc0c1\ud0dc \uad00\ub9ac\ub97c \uc27d\uac8c \ud560 \uc218 \uc788\uac8c \ub3c4\uc640\uc90d\ub2c8\ub2e4.<\/p>\n
\uc608\ub97c \ub4e4\uc5b4, Redux\ub97c \uc0ac\uc6a9\ud558\ub294 \uacbd\uc6b0 \ub2e4\uc74c\uacfc \uac19\uc740 \ubc29\uc2dd\uc73c\ub85c \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
import { createStore } from 'redux';\n\nconst initialState = { count: 0 };\n\nconst reducer = (state = initialState, action) => {\n switch (action.type) {\n case 'INCREMENT':\n return { count: state.count + 1 };\n default:\n return state;\n }\n};\n\nconst store = createStore(reducer);<\/code><\/pre>\n5. \ub9ac\uc561\ud2b8 \ucef4\ud3ec\ub10c\ud2b8\uc758 \ub77c\uc774\ud504\uc0ac\uc774\ud074<\/h2>\n
\ub9ac\uc561\ud2b8 \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc0dd\uc131, \uc5c5\ub370\uc774\ud2b8, \uc81c\uac70\uc758 \uacfc\uc815\uc744 \uac70\uce58\uba70, \uc774 \uac01 \ub2e8\uacc4\uc5d0\uc11c \ud2b9\uc815 \uba54\uc11c\ub4dc\uac00 \ud638\ucd9c\ub429\ub2c8\ub2e4. \uc774\ub97c ‘\ub77c\uc774\ud504\uc0ac\uc774\ud074’\uc774\ub77c\uace0 \ud569\ub2c8\ub2e4.<\/p>\n
5.1. \ub77c\uc774\ud504\uc0ac\uc774\ud074 \uba54\uc11c\ub4dc<\/h3>\n
\ud074\ub798\uc2a4 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \uc8fc\uc694 \ub77c\uc774\ud504\uc0ac\uc774\ud074 \uba54\uc11c\ub4dc\ub85c\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \uac83\ub4e4\uc774 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\n- componentDidMount:<\/strong> \ucef4\ud3ec\ub10c\ud2b8\uac00 \uccab \ub80c\ub354\ub9c1\uc744 \ub05d\ub0b8 \ud6c4 \ud638\ucd9c\ub429\ub2c8\ub2e4.<\/li>\n
- componentDidUpdate:<\/strong> \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc5c5\ub370\uc774\ud2b8\ub41c \ud6c4 \ud638\ucd9c\ub429\ub2c8\ub2e4.<\/li>\n
- componentWillUnmount:<\/strong> \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc5b8\ub9c8\uc6b4\ud2b8(\uc81c\uac70)\ub420 \ub54c \ud638\ucd9c\ub429\ub2c8\ub2e4.<\/li>\n<\/ul>\n
6. \uacb0\ub860<\/h2>\n
\ub9ac\uc561\ud2b8\uc5d0\uc11c \ucef4\ud3ec\ub10c\ud2b8\uc640 \uc0c1\ud0dc\ub294 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uad6c\uc870\uc640 \ub3d9\uc791\uc5d0 \ub9e4\uc6b0 \uc911\uc694\ud55c \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4. \ucef4\ud3ec\ub10c\ud2b8\ub97c \ud1b5\ud574 UI\ub97c \uad6c\uc131\ud558\uace0, \uc0c1\ud0dc\ub97c \ud1b5\ud574 \ub3d9\uc801\uc778 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \uc81c\uacf5\ud558\uc5ec, \ucd5c\uc885 \uc0ac\uc6a9\uc790\uac00 \ub9cc\uc871\ud558\ub294 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ubcf8 \uac15\uc88c\ub97c \ud1b5\ud574 \ub9ac\uc561\ud2b8\uc758 \uae30\ubcf8 \uac1c\ub150\uc744 \uc774\ud574\ud558\uace0, \ub2e4\uc591\ud55c \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4e4\uba70, \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud558\ub294 \ubc29\ubc95\uc744 \uc775\ud788\uae30\ub97c \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n
7. \ucd94\uac00 \uc790\ub8cc<\/h2>\n
\ub9ac\uc561\ud2b8 \uacf5\uc2dd \ubb38\uc11c\uc640 \ub2e4\uc591\ud55c \uc628\ub77c\uc778 \uac15\uc758\ub4e4\uc744 \ud1b5\ud574 \ub354 \ub9ce\uc740 \uc815\ubcf4\ub97c \ucc3e\uc544\ubcf4\uc2e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc544\ub798\ub294 \uc720\uc6a9\ud55c \ub9c1\ud06c\uc785\ub2c8\ub2e4:<\/p>\n