\uc548\ub155\ud558\uc138\uc694, \uc5ec\ub7ec\ubd84! \uc624\ub298\uc740 \ud50c\ub7ec\ud130\uc758 \uae30\ubcf8 \uac1c\ub150 \uc911 \ud558\ub098\uc778 ‘\uc704\uc82f(widget)’\uc5d0 \ub300\ud574 \uc2ec\ub3c4 \uae4a\uc740 \uac15\uc88c\ub97c \ub2e4\ub904\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc704\uc82f\uc740 \uc571\uc758 UI\ub97c \uad6c\uc131\ud558\ub294 \ud575\uc2ec \uc694\uc18c\ub85c, \ub808\uace0 \ube14\ub85d\ucc98\ub7fc \uc870\ud569\ud558\uc5ec \ub2e4\uc591\ud55c \ud615\ud0dc\uc758 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c\ub294 \uc704\uc82f\uc758 \uac1c\ub150, \uc720\ud615, \uc0ac\uc6a9 \ubc29\ubc95 \ubc0f \uc608\uc81c \ub4f1\uc744 \uc790\uc138\ud788 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
\ud50c\ub7ec\ud130\uc5d0\uc11c \uc704\uc82f\uc740 UI\uc758 \uae30\ubcf8 \uad6c\uc131 \uc694\uc18c\uc785\ub2c8\ub2e4. Flutter\uc758 \ubaa8\ub4e0 \uac83\uc740 \uc704\uc82f\uc73c\ub85c \uad6c\uc131\ub418\uc5b4 \uc788\uc73c\uba70, \uc774\ub294 \uc0c1\ud0dc(state)\uc640 \ubaa8\uc591(shape)\uc744 \ubaa8\ub450 \uc124\uba85\ud569\ub2c8\ub2e4. \uc704\uc82f\uc740 \ud558\ub098\uc758 \uac1d\uccb4\ub85c\uc11c, \uc0ac\uc6a9\uc790\uc5d0\uac8c \ubcf4\uc5ec\uc9c8 UI\uc758 \uc77c\ubd80\ubd84\uc744 \uc815\uc758\ud569\ub2c8\ub2e4. \ub2e8\uc21c\ud55c \ubc84\ud2bc\ubd80\ud130 \ubcf5\uc7a1\ud55c \ucee8\ud14c\uc774\ub108\uae4c\uc9c0 \ub2e4\uc591\ud55c \ud615\ud0dc\uac00 \uc874\uc7ac\ud558\uba70, \ubaa8\ub4e0 \uac83\uc774 \uc704\uc82f\uc73c\ub85c \ud45c\ud604\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\uc571\uc744 \uad6c\ucd95\ud560 \ub54c, \uc6b0\ub9ac\ub294 \uc77c\ubc18\uc801\uc73c\ub85c \ub2e4\uc591\ud55c UI \uad6c\uc131 \uc694\uc18c\ub97c \ud544\uc694\ub85c \ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4 \ubc84\ud2bc, \ud14d\uc2a4\ud2b8, \uc774\ubbf8\uc9c0, \ub9ac\uc2a4\ud2b8 \ub4f1\uc740 \ubaa8\ub450 \uac01\uac01\uc758 \uc704\uc82f\uc73c\ub85c \ub098\ud0c0\ub0b4\uc5b4\uc9d1\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uc704\uc82f\ub4e4\uc740 \ubd80\ubaa8-\uc790\uc2dd \uad00\uacc4\ub97c \ud1b5\ud574 \uc11c\ub85c \uc870\ud569\ud558\uc5ec \ub354 \ubcf5\uc7a1\ud55c \uad6c\uc870\ub97c \ud615\uc131\ud569\ub2c8\ub2e4.<\/p>\n
\uc704\uc82f\uc744 \ub808\uace0 \ube14\ub85d\uc5d0 \ube44\uc720\ud558\ub294 \uc774\uc720\ub294 \uc774\ub4e4\uc774 \ub3c5\ub9bd\uc801\uc774\uba70, \uc870\ud569\ud558\uc5ec \ub354 \ud070 \uad6c\uc870\ub97c \ub9cc\ub4e4 \uc218 \uc788\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4. \ub808\uace0 \ube14\ub85d\ucc98\ub7fc \uac01 \uc704\uc82f\uc740 \ub2e4\uc591\ud55c \ud06c\uae30\uc640 \ubaa8\uc591\uc744 \uac00\uc9c0\uace0 \uc788\uc73c\uba70, \uc790\uc720\ub86d\uac8c \uacb0\ud569\ud558\uc5ec \uc0c8\ub85c\uc6b4 \ud615\ud0dc\ub97c \ub9cc\ub4e4\uc5b4\ub0bc \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub610\ud55c, \uc704\uc82f\uc744 \uad50\uccb4\ud558\uac70\ub098 \uc774\ub3d9\ud558\ub294 \uac83\ub3c4 \ub9e4\uc6b0 \uc26c\uc6cc, \uac1c\ubc1c \uacfc\uc815\uc5d0\uc11c \ube60\ub978 \uc2e4\ud5d8\uacfc \ubcc0\ud654\ub97c \uac00\ub2a5\ud558\uac8c \ud569\ub2c8\ub2e4.<\/p>\n
\ud50c\ub7ec\ud130\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 \uc704\uc82f\uc740 \ud06c\uac8c \ub450 \uac00\uc9c0\ub85c \ub098\ub20c \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n
class MyStatelessWidget extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Text('\uc548\ub155\ud558\uc138\uc694, Stateless Widget!');\n }\n }<\/code><\/pre>\n\uc704\uc758 \uc608\uc81c\uc640 \uac19\uc774 Stateless Widget\uc740 build \uba54\uc11c\ub4dc\ub97c \ud1b5\ud574 \ud654\uba74\uc5d0 \ubcf4\uc5ec\uc904 \ub0b4\uc6a9\uc744 \uc815\uc758\ud569\ub2c8\ub2e4. \uc774 Widget\uc740 immutable\ud558\uc5ec \ud55c \ubc88 \uc0dd\uc131\ub41c \ud6c4\uc5d0\ub294 \uc0c1\ud0dc\uac00 \ubcc0\uacbd\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/p>\n
2.2 Stateful Widget: \uc608\uc81c<\/h3>\nclass MyStatefulWidget extends StatefulWidget {\n @override\n _MyStatefulWidgetState createState() => _MyStatefulWidgetState();\n }\n\n class _MyStatefulWidgetState extends State {\n int _counter = 0;\n\n void _incrementCounter() {\n setState(() {\n _counter++;\n });\n }\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: [\n Text('You have pushed the button this many times:'),\n Text(\n '$_counter',\n style: Theme.of(context).textTheme.headline4,\n ),\n ElevatedButton(\n onPressed: _incrementCounter,\n child: Text('Increment'),\n ),\n ],\n );\n }\n }<\/mystatefulwidget><\/code><\/pre>\nStateful Widget\uc740 setState \uba54\uc11c\ub4dc\ub97c \ud1b5\ud574 \uc704\uc82f\uc758 \uc0c1\ud0dc\ub97c \uc5c5\ub370\uc774\ud2b8\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc704 \uc608\uc81c\uc5d0\uc11c\ub294 \ubc84\ud2bc\uc744 \ud074\ub9ad\ud560 \ub54c\ub9c8\ub2e4 \uce74\uc6b4\ud130\uac00 \uc99d\uac00\ud569\ub2c8\ub2e4.<\/p>\n
3. \uc704\uc82f\uc758 \ud2b8\ub9ac \uad6c\uc870<\/h2>\n
\ud50c\ub7ec\ud130\ub294 \uc704\uc82f\uc758 \ud2b8\ub9ac \uad6c\uc870\ub97c \uc0ac\uc6a9\ud558\uc5ec UI\ub97c \uad6c\uc131\ud569\ub2c8\ub2e4. \ud2b8\ub9ac\ub294 \uac01 \uc704\uc82f\uc774 \ubd80\ubaa8 \uc704\uc82f\uc744 \uac00\uc9c0\uba70, \uc11c\ub85c \uc5f0\uacb0\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \ub808\uc774\uc544\uc6c3\uc744 \uc815\uc758\ud558\uace0, \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
3.1 \uc704\uc82f \ud2b8\ub9ac\uc758 \uad6c\uc131<\/h3>\n
\uc704\uc82f \ud2b8\ub9ac\ub294 \ucd5c\uc0c1\uc704 \uc704\uc82f(root widget)\uacfc \uadf8 \ud558\uc704\uc5d0 \uc704\uce58\ud55c \uc704\uc82f\ub4e4\ub85c \uad6c\uc131\ub429\ub2c8\ub2e4. \ubaa8\ub4e0 \uc704\uc82f\uc740 \uc774 \ud2b8\ub9ac \uad6c\uc870\uc5d0\uc11c \ubd80\ubaa8-\uc790\uc2dd \uad00\uacc4\uc5d0 \uc758\ud574 \uc5f0\uacb0\ub429\ub2c8\ub2e4. \ud2b8\ub9ac\uc758 \uac01 \ub808\ubca8\uc740 \ub2e4\ub978 UI \uad6c\uc131 \uc694\uc18c\ub97c \ub098\ud0c0\ub0c5\ub2c8\ub2e4.<\/p>\n
3.2 \ud2b8\ub9ac \uad6c\uc870\uc758 \uc608\uc81c<\/h3>\nvoid main() {\n runApp(MyApp());\n }\n\n class MyApp extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return MaterialApp(\n home: Scaffold(\n appBar: AppBar(\n title: Text('\uc704\uc82f \ud2b8\ub9ac \uc608\uc81c'),\n ),\n body: Center(\n child: MyStatefulWidget(),\n ),\n ),\n );\n }\n }<\/code><\/pre>\n\uc774 \uc608\uc81c\uc5d0\uc11c\ub294 MyApp\uc774\ub77c\ub294 \ucd5c\uc0c1\uc704 \uc704\uc82f\uc774 \ub2e4\ub978 \uc704\uc82f\ub4e4\uc744 \ud3ec\ud568\ud55c \uc704\uc82f \ud2b8\ub9ac\ub97c \uad6c\uc131\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. Scaffold, AppBar, Center\ub294 \uac01\uae30 \ub2e4\ub978 \uc704\uc82f\uc73c\ub85c, \uc11c\ub85c \uc870\ud569\ud558\uc5ec \ud654\uba74\uc744 \ub9cc\ub4ed\ub2c8\ub2e4.<\/p>\n
4. \ub808\uace0 \ube14\ub85d\uc73c\ub85c\uc11c\uc758 \uc704\uc82f<\/h2>\n
\uc704\uc82f\uc758 \uc870\ud569 \uac00\ub2a5\uc131\uc740 \ub9e4\uc6b0 \uac15\ub825\ud569\ub2c8\ub2e4. \uac1c\ubc1c\uc790\ub294 \ud544\uc694\uc5d0 \ub530\ub77c \uc704\uc82f\uc744 \uc7ac\uc0ac\uc6a9\ud558\uace0 \uc870\ud569\ud558\uc5ec \uc0c8\ub85c\uc6b4 UI\ub97c \ub9cc\ub4e4\uc5b4 \ub0bc \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uc870\ud569\uc744 \ud1b5\ud574 \uc571\uc758 \ubcf5\uc7a1\uc131\uc744 \uad00\ub9ac\ud558\ub294 \uac83\uc774 \uac00\ub2a5\ud574\uc9d1\ub2c8\ub2e4.<\/p>\n
4.1 \ucee4\uc2a4\ud140 \uc704\uc82f \ub9cc\ub4e4\uae30<\/h3>\n
\ud50c\ub7ec\ud130\uc5d0\uc11c\ub294 \uc0ac\uc6a9\uc790 \uc815\uc758 \uc704\uc82f\uc744 \uc0dd\uc131\ud558\uc5ec \ub3c5\ud2b9\ud55c UI\ub97c \uc0dd\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \uc5ec\ub7ec \ubc88 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucf54\ub4dc \ube14\ub85d\uc744 \ub9cc\ub4e4 \uc218 \uc788\uc73c\uba70, \uc720\uc9c0 \ubcf4\uc218\ub97c \uc6a9\uc774\ud558\uac8c \ub9cc\ub4e4\uc5b4 \uc90d\ub2c8\ub2e4.<\/p>\n
class CustomButton extends StatelessWidget {\n final String text;\n final Function onPressed;\n\n CustomButton({required this.text, required this.onPressed});\n\n @override\n Widget build(BuildContext context) {\n return ElevatedButton(\n onPressed: () => onPressed(),\n child: Text(text),\n );\n }\n }<\/code><\/pre>\n\uc704 \uc608\uc81c\uc5d0\uc11c CustomButton\uc774\ub77c\ub294 \ucee4\uc2a4\ud140 \uc704\uc82f\uc744 \ub9cc\ub4e4\uc5c8\uc2b5\ub2c8\ub2e4. \uc774 \uc704\uc82f\uc740 \uc6d0\ud558\ub294 \ud14d\uc2a4\ud2b8\uc640 \ud074\ub9ad \uc2dc \uc2e4\ud589\ud560 \ud568\uc218\ub97c \ub9e4\uac1c\ubcc0\uc218\ub85c \ubc1b\uc2b5\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \ub2e4\uc591\ud55c \ud14d\uc2a4\ud2b8\ub97c \uac00\uc9c4 \ubc84\ud2bc\uc744 \uc27d\uac8c \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
4.2 \uc704\uc82f \uc7ac\uc0ac\uc6a9\uc758 \uc7a5\uc810<\/h3>\n
\uc704\uc82f\uc744 \uc7ac\uc0ac\uc6a9\ud558\uba74 \ucf54\ub4dc\uc758 \uc911\ubcf5\uc744 \uc904\uc77c \uc218 \uc788\uc73c\uba70 \uc720\uc9c0 \ubcf4\uc218\ub97c \uac04\uc18c\ud654\ud569\ub2c8\ub2e4. UI\uc758 \uc77c\uad00\uc131\uc744 \uc9c0\ud0a4\uba74\uc11c\ub3c4 \uc2e0\uaddc \uac1c\ubc1c\uc774 \uc6a9\uc774\ud574\uc9c0\ubbc0\ub85c, \ud300 \uc791\uc5c5\uc5d0\uc11c \ud2b9\ud788 \uc720\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c, \ubcf5\uc7a1\ud55c UI\ub97c \ub2e8\uc21c\ud654\ud558\uace0, \uac01 \uad6c\uc131 \uc694\uc18c\uc5d0 \ub300\ud55c \ub3c5\ub9bd\uc801\uc778 \ud14c\uc2a4\ud2b8\uc640 \ub514\ubc84\uae45\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4.<\/p>\n
5. \uacb0\ub860<\/h2>\n
\uc624\ub298\uc740 \ud50c\ub7ec\ud130\uc758 \uc704\uc82f \uac1c\ub150\uacfc \ub808\uace0 \ube14\ub85d\uc5d0 \ube44\uc720\ud55c \ub514\uc790\uc778 \ud328\ud134\uc744 \uc0b4\ud3b4\ubcf4\uc558\uc2b5\ub2c8\ub2e4. \uc704\uc82f\uc740 UI\ub97c \uad6c\uc131\ud558\ub294 \uae30\ubcf8 \uc694\uc18c\ub85c\uc11c, \ub3c5\ub9bd\uc801\uc774\uace0 \uc870\ud569\uc774 \uc6a9\uc774\ud558\uc5ec \uac15\ub825\ud55c \uad6c\uc870\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \uac1c\ubc1c\uc790\ub294 \ubcf5\uc7a1\ud55c UI\ub97c \ud6a8\uc728\uc801\uc73c\ub85c \uad00\ub9ac\ud558\uace0, \uc571\uc744 \ubcf4\ub2e4 \uac04\ud3b8\ud558\uac8c \uad6c\ucd95\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\uc5ec\ub7ec\ubd84\ub3c4 \uc774\uc81c \ud50c\ub7ec\ud130\uc5d0\uc11c \uc704\uc82f\uc744 \ub808\uace0 \ube14\ub85d\ucc98\ub7fc \uc790\uc720\ub86d\uac8c \uc870\ud569\ud558\uc5ec \uba4b\uc9c4 \uc571\uc744 \ub9cc\ub4e4\uc5b4\ubcf4\uc138\uc694! \ub2e4\uc74c \uac15\uc88c\uc5d0\uc11c\ub294 \ud50c\ub7ec\ud130\uc5d0\uc11c\uc758 \ub808\uc774\uc544\uc6c3 \uad6c\uc131\uacfc \ub2e4\uc591\ud55c \ub808\uc774\uc544\uc6c3 \uc704\uc82f\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4. \uac10\uc0ac\ud569\ub2c8\ub2e4!<\/p>\n
<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"