\n\ud50c\ub7ec\ud130\ub294 \ubaa8\ubc14\uc77c, \uc6f9, \ub370\uc2a4\ud06c\ud0d1 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc27d\uac8c \uc81c\uc791\ud560 \uc218 \uc788\ub3c4\ub85d \ub3d5\ub294 UI \ud234\ud0b7\uc785\ub2c8\ub2e4. \uc774\ubc88 \uac15\uc88c\uc5d0\uc11c\ub294 \ud50c\ub7ec\ud130\uc758 \ud575\uc2ec \uac1c\ub150\uc778 ‘\ud074\ub798\uc2a4’\uc640 ‘\uc704\uc82f’\uc758 \uc815\uccb4\ub97c \uc2ec\ub3c4 \uc788\uac8c \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<\/header>\n\n1. \ud074\ub798\uc2a4(Class)\uc758 \uc774\ud574<\/h2>\n
\n \ud074\ub798\uc2a4\ub294 \uac1d\uccb4 \uc9c0\ud5a5 \ud504\ub85c\uadf8\ub798\ubc0d(OOP)\uc758 \uae30\ubcf8 \ub2e8\uc704\ub85c, \uac1d\uccb4\uc758 \uc124\uacc4\ub3c4\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4. \ub2e4\ud2b8(Dart) \uc5b8\uc5b4\uc5d0\uc11c \ud074\ub798\uc2a4\ub294 \ub370\uc774\ud130 \ud544\ub4dc\uc640 \uba54\uc18c\ub4dc\ub97c \ud3ec\ud568\ud560 \uc218 \uc788\ub294 \uad6c\uc870\uccb4\uc785\ub2c8\ub2e4.
\n \ud074\ub798\uc2a4\ub294 \uac1d\uccb4\ub97c \uc0dd\uc131\ud558\uae30 \uc704\ud55c \ud2c0\uc744 \uc81c\uacf5\ud558\uba70, \uac01 \uac1d\uccb4\ub294 \ud074\ub798\uc2a4\uc758 \uc18d\uc131\uacfc \uba54\uc18c\ub4dc\ub97c \uc0c1\uc18d\ubc1b\uc2b5\ub2c8\ub2e4.\n <\/p>\n
1.1. \ud074\ub798\uc2a4 \uc120\uc5b8<\/h3>\n
\ub2e4\ud2b8\uc5d0\uc11c \ud074\ub798\uc2a4\ub97c \uc120\uc5b8\ud558\ub294 \ubc29\ubc95\uc740 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\nclass Dog {\n String name;\n \n Dog(this.name);\n \n void bark() {\n print('$name\uac00 \uc9d6\uc2b5\ub2c8\ub2e4!');\n }\n}\n<\/code><\/pre>\n\uc704\uc758 \uc608\uc81c\ub294 Dog\ub77c\ub294 \ud074\ub798\uc2a4\ub97c \uc815\uc758\ud558\uace0, name\uc774\ub77c\ub294 \ud544\ub4dc\ub97c \uac00\uc9c0\uace0 \uc788\uc73c\uba70, bark\ub77c\ub294 \uba54\uc18c\ub4dc\ub97c \ud3ec\ud568\ud569\ub2c8\ub2e4.<\/p>\n
1.2. \ud074\ub798\uc2a4\uc758 \uc0c1\uc18d<\/h3>\n
\ud074\ub798\uc2a4\ub294 \ub2e4\ub978 \ud074\ub798\uc2a4\ub85c\ubd80\ud130 \uc0c1\uc18d\ubc1b\uc544 \uc7ac\uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc0c1\uc18d\uc744 \ud1b5\ud574 \uae30\uc874 \ud074\ub798\uc2a4\uc758 \uae30\ub2a5\uc744 \ud655\uc7a5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\nclass Cat extends Animal {\n void meow() {\n print('\uc57c\uc639!');\n }\n}\n<\/code><\/pre>\n\uc704 \ucf54\ub4dc\uc5d0\uc11c Cat \ud074\ub798\uc2a4\ub294 Animal \ud074\ub798\uc2a4\ub97c \uc0c1\uc18d\ubc1b\uc544 \uc0c8\ub85c\uc6b4 \uae30\ub2a5\uc744 \ucd94\uac00\ud569\ub2c8\ub2e4.<\/p>\n<\/section>\n\n2. \uc704\uc82f(Widget)\uc758 \uc815\uccb4<\/h2>\n
\n \ud50c\ub7ec\ud130\uc5d0\uc11c \ubaa8\ub4e0 \uac83\uc740 \uc704\uc82f\uc785\ub2c8\ub2e4. UI \ucef4\ud3ec\ub10c\ud2b8\ub294 \ubb3c\ub860\uc774\uace0, \ub808\uc774\uc544\uc6c3, \uc2a4\ud0c0\uc77c \ub4f1 \ubaa8\ub4e0 \uac83\uc774 \uc704\uc82f\uc744 \ud1b5\ud574 \ud45c\ud604\ub429\ub2c8\ub2e4. \uc704\uc82f\uc740 \uc0c1\ud0dc\ub97c \uac00\uc9c8 \uc218 \uc788\uace0, \uc774\ub97c \ud1b5\ud574 \uc0ac\uc6a9\uc790\uc640 \uc0c1\ud638\uc791\uc6a9\ud569\ub2c8\ub2e4.\n <\/p>\n
2.1. StatelessWidget vs StatefulWidget<\/h3>\n
\ud50c\ub7ec\ud130\uc758 \uc704\uc82f\uc740 \uc8fc\ub85c \ub450 \uac00\uc9c0\ub85c \ub098\ub269\ub2c8\ub2e4: StatelessWidget\uacfc StatefulWidget.<\/p>\n
StatelessWidget<\/h4>\n
\n StatelessWidget\uc740 \uc0c1\ud0dc\ub97c \uac00\uc9c0\uc9c0 \uc54a\ub294 \uc704\uc82f\uc785\ub2c8\ub2e4. \uc774 \uc704\uc82f\uc740 \uc0dd\uc131\ub41c \ud6c4\uc5d0 \ubcc0\uacbd\ub418\uc9c0 \uc54a\uc73c\uba70, UI\uac00 \ud56d\uc0c1 \ub3d9\uc77c\ud55c \ucd9c\ub825\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4.\n <\/p>\n
\nclass MyStatelessWidget extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Text('\uc548\ub155\ud558\uc138\uc694, \ud50c\ub7ec\ud130!');\n }\n}\n<\/code><\/pre>\nStatefulWidget<\/h4>\n
\n StatefulWidget\uc740 \uc0c1\ud0dc\ub97c \uac00\uc9c8 \uc218 \uc788\ub294 \uc704\uc82f\uc73c\ub85c, \ub0b4\ubd80 \uc0c1\ud0dc\uac00 \ubcc0\uacbd\ub418\uba74 UI\ub3c4 \ubcc0\uacbd\ub429\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uc704\uc82f\uc740 \uc8fc\ub85c \uc0ac\uc6a9\uc790 \uc785\ub825\uc744 \ud544\uc694\ub85c \ud560 \ub54c \uc0ac\uc6a9\ub429\ub2c8\ub2e4.\n <\/p>\n
\nclass MyStatefulWidget extends StatefulWidget {\n @override\n _MyStatefulWidgetState createState() => _MyStatefulWidgetState();\n}\n\nclass _MyStatefulWidgetState extends State {\n int _counter = 0;\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: [\n Text('\ubc84\ud2bc\uc744 \ub204\ub978 \ud69f\uc218: $_counter'),\n ElevatedButton(\n onPressed: () {\n setState(() {\n _counter++;\n });\n },\n child: Text('\uc99d\uac00')\n ),\n ],\n );\n }\n}\n<\/mystatefulwidget><\/code><\/pre>\n<\/section>\n\n3. \uc704\uc82f \ud2b8\ub9ac\uc640 \ube4c\ub4dc \uba54\uc18c\ub4dc<\/h2>\n
\ud50c\ub7ec\ud130\uc758 \uc720\uc5f0\uc131\uc740 \uc704\uc82f \ud2b8\ub9ac\uc5d0\uc11c \ube44\ub86f\ub429\ub2c8\ub2e4. \ubaa8\ub4e0 \uc704\uc82f\uc740 \ud2b8\ub9ac \uad6c\uc870\ub97c \ud615\uc131\ud558\uc5ec \uc11c\ub85c \uc5f0\uacb0\ub418\uc5b4 \uc788\uc73c\uba70, \uac01 \uc704\uc82f\uc740 build \uba54\uc18c\ub4dc\ub97c \ud1b5\ud574 UI\ub97c \uad6c\uc131\ud569\ub2c8\ub2e4.<\/p>\n
3.1. \uc704\uc82f \ud2b8\ub9ac \uad6c\uc870<\/h3>\n
\uc704\uc82f \ud2b8\ub9ac\ub294 \ubd80\ubaa8 \uc704\uc82f\uacfc \uc790\uc2dd \uc704\uc82f\uc73c\ub85c \uc774\ub8e8\uc5b4\uc838 \uc788\uc2b5\ub2c8\ub2e4. \ubd80\ubaa8 \uc704\uc82f\uc740 \uc5ec\ub7ec \uac1c\uc758 \uc790\uc2dd \uc704\uc82f\uc744 \ud3ec\ud568\ud560 \uc218 \uc788\uc73c\uba70, \uc774\ub97c \ud1b5\ud574 \ubcf5\uc7a1\ud55c UI\ub97c \uad6c\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
3.2. \ube4c\ub4dc \uba54\uc18c\ub4dc\uc758 \uc5ed\ud560<\/h3>\n
\uac01 \uc704\uc82f\uc740 \uc0dd\uc131 \uc2dc build \uba54\uc18c\ub4dc\ub97c \ud638\ucd9c\ud558\uc5ec \ud654\uba74\uc5d0 \ud45c\uc2dc\ub420 \ub0b4\uc6a9\uc744 \uacb0\uc815\ud569\ub2c8\ub2e4. \uc774 \uba54\uc18c\ub4dc\ub294 \uc704\uc82f\uc758 \uc0c1\ud0dc\ub97c \uae30\ubc18\uc73c\ub85c \ucd5c\uc801\ud654\ub41c UI\ub97c \ud6a8\uacfc\uc801\uc73c\ub85c \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4.<\/p>\n<\/section>\n\n4. \uc704\uc82f\uc758 \ub77c\uc774\ud504 \uc0ac\uc774\ud074 \uc774\ud574\ud558\uae30<\/h2>\n
StatefulWidget\uc758 \uacbd\uc6b0, \uc704\uc82f\uc758 \ub77c\uc774\ud504 \uc0ac\uc774\ud074\uc774 \uc911\uc694\ud569\ub2c8\ub2e4. \uac01 \uc0c1\ud0dc \ubcc0\ud654\uc5d0 \ub530\ub77c \ub2e4\uc591\ud55c \uba54\uc18c\ub4dc\uac00 \ud638\ucd9c\ub429\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \ucd5c\uc801\uc758 \uc131\ub2a5\uacfc \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
4.1. \ub77c\uc774\ud504 \uc0ac\uc774\ud074 \uba54\uc18c\ub4dc<\/h3>\n
StatefulWidget\uc758 \ub77c\uc774\ud504 \uc0ac\uc774\ud074\uc740 \ub2e4\uc74c\uc758 \uba54\uc18c\ub4dc\ub85c \uad6c\uc131\ub429\ub2c8\ub2e4:<\/p>\n
\n- initState()<\/li>\n
- didChangeDependencies()<\/li>\n
- build()<\/li>\n
- setState()<\/li>\n
- dispose()<\/li>\n<\/ul>\n
\uac01 \uba54\uc18c\ub4dc\ub294 \ud2b9\uc815 \uc870\uac74\uc5d0\uc11c \ud638\ucd9c\ub418\uba70, \uc704\uc82f\uc758 \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud558\uace0, \ud544\uc694\ud55c \uacbd\uc6b0 \ub9ac\uc18c\uc2a4\ub97c \uc815\ub9ac\ud558\ub294 \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4.<\/p>\n<\/section>\n