{"id":1638,"date":"2026-03-05T21:47:36","date_gmt":"2026-03-05T21:47:36","guid":{"rendered":"https:\/\/wayhope.kro.kr\/?p=1638"},"modified":"2026-08-31T07:32:33","modified_gmt":"2026-08-31T07:32:33","slug":"flutter-%ea%b0%9c%eb%b0%9c-%ed%95%b5%ec%8b%ac-%ec%a0%95%eb%a6%ac","status":"publish","type":"post","link":"https:\/\/wayhope.kro.kr\/?p=1638","title":{"rendered":"Flutter \uac1c\ubc1c \ud575\uc2ec \uc815\ub9ac"},"content":{"rendered":"\n

Flutter\ub294 Google\uc774 \uac1c\ubc1c\ud55c UI \ud504\ub808\uc784\uc6cc\ud06c\ub85c, Dart \uc5b8\uc5b4\ub97c \uc0ac\uc6a9\ud574 \ud558\ub098\uc758 \ucf54\ub4dc\ubca0\uc774\uc2a4\ub85c \uc5ec\ub7ec \ud50c\ub7ab\ud3fc\uc758 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud560 \uc218 \uc788\ub3c4\ub85d \ub9cc\ub4e4\uc5b4\uc84c\ub2e4.<\/strong><\/p>\n\n\n\n

\ubaa8\ubc14\uc77c \uc571 \uac1c\ubc1c\uc744 \uc2dc\uc791\ud558\uba74 Android\uc640 iOS\ub97c \uac01\uac01 \uac1c\ubc1c\ud574\uc57c \ud558\ub294 \uacbd\uc6b0\uac00 \ub9ce\ub2e4. Android\ub294 Kotlin\uc774\ub098 Java, iOS\ub294 Swift\ub098 Objective-C\ub97c \uc0ac\uc6a9\ud558\ub294 \uc2dd\uc774\ub2e4.<\/p>\n\n\n\n

Flutter\ub294 \uc774 \ubb38\uc81c\ub97c \ub2e4\ub978 \ubc29\uc2dd\uc73c\ub85c \ud574\uacb0\ud55c\ub2e4.<\/p>\n\n\n\n

Dart\ub85c \uc791\uc131\ud55c \ud558\ub098\uc758 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ucf54\ub4dc\uc5d0\uc11c UI\uc640 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ub85c\uc9c1\uc744 \uad6c\uc131\ud558\uace0, Flutter\uac00 \uc81c\uacf5\ud558\ub294 \ub80c\ub354\ub9c1 \uc2dc\uc2a4\ud15c\uacfc \ud50c\ub7ab\ud3fc \uc5f0\ub3d9 \uae30\ub2a5\uc744 \uc774\uc6a9\ud574 Android, iOS, Web, Desktop \ub4f1 \ub2e4\uc591\ud55c \ud658\uacbd\uc5d0\uc11c \uc2e4\ud589\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n

Dart Code -> Flutter Framework -> Platform -> Application<\/code><\/pre>\n\n\n\n
Flutter\uc5d0\uc11c \uac00\uc7a5 \uba3c\uc800 \uc774\ud574\ud574\uc57c \ud558\ub294 \uac1c\ub150\uc740 Widget<\/strong>\uc774\ub2e4.<\/p>\n\n\n\n
Flutter\uc5d0\uc11c\ub294 \ud654\uba74\uc744 \uad6c\uc131\ud558\ub294 \uac70\uc758 \ubaa8\ub4e0 \uc694\uc18c\ub97c Widget\uc73c\ub85c \ud45c\ud604\ud55c\ub2e4.<\/p>\n\n\n\n
\ud14d\uc2a4\ud2b8\ub3c4 Widget\uc774\uace0 \ubc84\ud2bc\ub3c4 Widget\uc774\uba70, \ub808\uc774\uc544\uc6c3\uc744 \ub2f4\ub2f9\ud558\ub294 Row<\/code>, Column<\/code>\ub3c4 Widget\uc774\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
Flutter\uc758 \uae30\ubcf8 \uad6c\uc870<\/h2>\n\n\n\n
Flutter\ub294 Dart\ub85c \uc791\uc131\ud558\ub294 UI \ud504\ub808\uc784\uc6cc\ud06c\ub2e4.<\/p>\n\n\n\n
\ud654\uba74\uc744 \uad6c\uc131\ud558\ub294 \uac70\uc758 \ubaa8\ub4e0 \uac83\uc774 Widget\uc73c\ub85c \ud45c\ud604\ub41c\ub2e4.<\/p>\n\n\n\n
Widget build(BuildContext context) {\n  return Column(\n    children: [\n      Text('Hello'),\n      ElevatedButton(\n        onPressed: () {},\n        child: Text('Start'),\n      ),\n    ],\n  );\n}\n<\/code><\/pre>\n\n\n\n
Text<\/code>, Column<\/code>, ElevatedButton<\/code> \ubaa8\ub450 Widget\uc774\ub2e4.<\/p>\n\n\n\n
HTML\ucc98\ub7fc \ud654\uba74 \uc694\uc18c\uc640 \ub3d9\uc791\uc744 \uac01\uac01 \ubcc4\ub3c4\uc758 \uc2dc\uc2a4\ud15c\uc73c\ub85c \ub098\ub204\uae30\ubcf4\ub2e4, UI\uc758 \uad6c\uc870\uc640 \uc18d\uc131\uc744 Widget Tree\ub85c \ud45c\ud604\ud558\ub294 \ubc29\uc2dd\uc5d0 \uac00\uae5d\ub2e4.<\/p>\n\n\n\n
MaterialApp -> Scaffold -> AppBar \/ Body -> Column -> Text \/ ElevatedButton\n<\/code><\/pre>\n\n\n\n
Flutter\ub97c \uc774\ud574\ud560 \ub54c \uc774 Widget Tree\uac00 \ucd9c\ubc1c\uc810\uc774\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
StatelessWidget\uacfc StatefulWidget<\/h2>\n\n\n\n
Flutter\uc5d0\uc11c UI\ub97c \ub9cc\ub4e4\ub2e4 \ubcf4\uba74 \uacb0\uad6d \uc0c1\ud0dc\ub97c \uc5b4\ub5bb\uac8c \uad00\ub9ac\ud560 \uac83\uc778\uc9c0\uac00 \ubb38\uc81c\uac00 \ub41c\ub2e4.<\/p>\n\n\n\n
\uc0c1\ud0dc\uac00 \ud544\uc694 \uc5c6\ub294 UI\ub77c\uba74 StatelessWidget<\/code>\uc744 \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n\n\n\n
class Profile extends StatelessWidget {\n  final String name;\n\n  const Profile({\n    super.key,\n    required this.name,\n  });\n\n  @override\n  Widget build(BuildContext context) {\n    return Text(name);\n  }\n}\n<\/code><\/pre>\n\n\n\n
\uc785\ub825\uc73c\ub85c \ubc1b\uc740 \uac12\uc5d0 \ub530\ub77c UI\ub97c \ub9cc\ub4e4\uace0, \ub0b4\ubd80\uc5d0\uc11c \ubcc0\uacbd\ub418\ub294 \uc0c1\ud0dc\ub97c \uc9c1\uc811 \uad00\ub9ac\ud558\uc9c0 \uc54a\ub294\ub2e4.<\/p>\n\n\n\n
\ubc18\uba74 UI\uac00 \uc2dc\uac04\uc5d0 \ub530\ub77c \ubcc0\ud574\uc57c \ud55c\ub2e4\uba74 StatefulWidget<\/code>\uc774 \ud544\uc694\ud558\ub2e4.<\/p>\n\n\n\n
class Counter extends StatefulWidget {\n  const Counter({super.key});\n\n  @override\n  State<Counter> createState() => _CounterState();\n}\n\nclass _CounterState extends State<Counter> {\n  int count = 0;\n\n  void increment() {\n    setState(() {\n      count++;\n    });\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Text('$count');\n  }\n}\n<\/code><\/pre>\n\n\n\n
\uc5ec\uae30\uc11c \uc911\uc694\ud55c \uac83\uc740 StatefulWidget<\/code> \uc790\uccb4\uc5d0 \uc0c1\ud0dc\ub97c \ub123\ub294 \uac83\uc774 \uc544\ub2c8\ub77c State<\/code> \uac1d\uccb4\uac00 \uc0c1\ud0dc\ub97c \uac00\uc9c0\uace0 \uc788\ub2e4\ub294 \uc810\uc774\ub2e4.<\/p>\n\n\n\n
StatefulWidget -> State -> count \/ build()\n<\/code><\/pre>\n\n\n\n
Widget\uc740 UI\ub97c \uad6c\uc131\ud558\uae30 \uc704\ud55c \ubd88\ubcc0 \uac1d\uccb4\uc774\uace0, \uc2e4\uc81c\ub85c \ubcc0\uacbd\ub418\ub294 \ub370\uc774\ud130\ub294 State\uac00 \uad00\ub9ac\ud55c\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
setState()\uac00 \ud558\ub294 \uc77c<\/h2>\n\n\n\n
setState()<\/code>\ub294 \uac12\uc744 \ubcc0\uacbd\ud558\ub294 \ud2b9\ubcc4\ud55c \ubb38\ubc95\uc774 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n
\ub2e4\uc74c \ucf54\ub4dc\uc5d0\uc11c \uc2e4\uc81c \uac12 \ubcc0\uacbd\uc740 \uadf8\ub0e5 count++<\/code>\ub2e4.<\/p>\n\n\n\n
setState(() {\n  count++;\n});\n<\/code><\/pre>\n\n\n\n
setState()<\/code>\uc758 \uc5ed\ud560\uc740 \ud574\ub2f9 State\uac00 \ubcc0\uacbd\ub418\uc5c8\ub2e4\ub294 \uc0ac\uc2e4\uc744 Flutter\uc5d0 \uc54c\ub9ac\ub294 \uac83\uc774\ub2e4.<\/p>\n\n\n\n
\uc0c1\ud0dc \ubcc0\uacbd -> setState() -> Flutter\uc5d0 \ubcc0\uacbd \uc54c\ub9bc -> build() \ud638\ucd9c -> \uc0c8\ub85c\uc6b4 Widget Tree \uad6c\uc131 -> \ubcc0\uacbd\ub41c \ubd80\ubd84 \ubc18\uc601\n<\/code><\/pre>\n\n\n\n
\uadf8\ub798\uc11c \ub2e4\uc74c\ucc98\ub7fc \uc791\uc131\ud558\uba74 \ubb38\uc81c\uac00 \uc0dd\uae34\ub2e4.<\/p>\n\n\n\n
count++;\n<\/code><\/pre>\n\n\n\n
\uac12 \uc790\uccb4\ub294 \ubc14\ub00c\uc9c0\ub9cc Flutter\uc5d0\uac8c UI\ub97c \ub2e4\uc2dc \uad6c\uc131\ud574\uc57c \ud55c\ub2e4\ub294 \uc0ac\uc2e4\uc744 \uc54c\ub9ac\uc9c0 \uc54a\ub294\ub2e4.<\/p>\n\n\n\n
\uc0c1\ud0dc \ubcc0\uacbd\uacfc \ud654\uba74 \uac31\uc2e0 \uc694\uccad\uc744 \uac19\uc774 \ucc98\ub9ac\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
Widget\uc740 \uc65c \uacc4\uc18d \ub2e4\uc2dc \ub9cc\ub4e4\uc5b4\uc9c0\ub294\uac00<\/h2>\n\n\n\n
Flutter\ub97c \ucc98\uc74c \ubcf4\uba74 build()<\/code>\uac00 \ub2e4\uc2dc \ud638\ucd9c\ub420 \ub54c\ub9c8\ub2e4 Widget\uc744 \uc0c8\ub85c \ub9cc\ub4dc\ub294 \uac83\uc774 \ube44\ud6a8\uc728\uc801\uc73c\ub85c \ub290\uaef4\uc9c4\ub2e4.<\/p>\n\n\n\n
\uc2e4\uc81c\ub85c Widget\uc740 \ub9e4\uc6b0 \uac00\ubccd\uac8c \ucde8\uae09\ub41c\ub2e4.<\/p>\n\n\n\n
@override\nWidget build(BuildContext context) {\n  return Container(\n    child: Text('Hello'),\n  );\n}\n<\/code><\/pre>\n\n\n\n
\uc0c1\ud0dc\uac00 \ubcc0\uacbd\ub418\uba74 build()<\/code>\uac00 \ub2e4\uc2dc \uc2e4\ud589\ub418\uace0 \uc0c8\ub85c\uc6b4 Widget \uac1d\uccb4\ub4e4\uc774 \ub9cc\ub4e4\uc5b4\uc9c8 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
\ud558\uc9c0\ub9cc Flutter\ub294 Widget \uac1d\uccb4 \uc790\uccb4\ub97c \ud654\uba74\uc5d0 \uc9c1\uc811 \uadf8\ub9ac\ub294 \uac83\uc774 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n
Widget\uc740 UI\uc758 \uc120\uc5b8\uc801\uc778 \uc124\uba85\uc5d0 \uac00\uae5d\uace0, Flutter \ub0b4\ubd80\uc5d0\uc11c\ub294 \uc774\ub97c Element\uc640 RenderObject\uac00 \uad00\ub9ac\ud55c\ub2e4.<\/p>\n\n\n\n
Widget -> Element -> RenderObject\n<\/code><\/pre>\n\n\n\n
\ub530\ub77c\uc11c build()<\/code>\uac00 \ub2e4\uc2dc \uc2e4\ud589\ub418\ub294 \uac83 \uc790\uccb4\ub97c \uc131\ub2a5 \ubb38\uc81c\ub85c \ubcfc \ud544\uc694\ub294 \uc5c6\ub2e4.<\/p>\n\n\n\n
\ubb38\uc81c\ub294 build()<\/code> \uc548\uc5d0\uc11c \ubb34\uac70\uc6b4 \uc791\uc5c5\uc744 \uacc4\uc18d \uc218\ud589\ud558\ub294 \uacbd\uc6b0\ub2e4.<\/p>\n\n\n\n
\uc608\ub97c \ub4e4\uc5b4 \ub124\ud2b8\uc6cc\ud06c \uc694\uccad\uc774\ub098 \ub300\uaddc\ubaa8 \uacc4\uc0b0\uc744 build()<\/code>\uc5d0\uc11c \uc9c1\uc811 \uc2e4\ud589\ud558\ub294 \uac83\uc740 \ud53c\ud558\ub294 \ud3b8\uc774 \uc88b\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
BuildContext<\/h2>\n\n\n\n
Flutter \ucf54\ub4dc\uc5d0\uc11c BuildContext<\/code>\ub294 \uac70\uc758 \ud56d\uc0c1 \ubcf4\uc778\ub2e4.<\/p>\n\n\n\n
Widget build(BuildContext context) {\n  ...\n}\n<\/code><\/pre>\n\n\n\n
BuildContext<\/code>\ub294 \ud604\uc7ac Widget\uc774 Widget Tree\uc5d0\uc11c \uc5b4\ub514\uc5d0 \uc704\uce58\ud558\uace0 \uc788\ub294\uc9c0\ub97c \ub098\ud0c0\ub0b4\ub294 \ud578\ub4e4\uc5d0 \uac00\uae5d\ub2e4.<\/p>\n\n\n\n
\uc774\uac83\uc744 \ud1b5\ud574 \uc0c1\uc704 Widget\uc774 \uc81c\uacf5\ud558\ub294 \uc815\ubcf4\ub098 \ud2b9\uc815 \uae30\ub2a5\uc5d0 \uc811\uadfc\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
\ub300\ud45c\uc801\uc73c\ub85c \ub2e4\uc74c\uacfc \uac19\uc740 \ucf54\ub4dc\uac00 \uc788\ub2e4.<\/p>\n\n\n\n
Theme.of(context)\n<\/code><\/pre>\n\n\n\n
\ud604\uc7ac \uc704\uce58\ub97c \uae30\uc900\uc73c\ub85c \uc801\uc6a9\ub418\ub294 Theme\uc744 \uac00\uc838\uc628\ub2e4.<\/p>\n\n\n\n
Navigator.of(context)\n<\/code><\/pre>\n\n\n\n
\ud604\uc7ac \uc704\uce58\uc5d0\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 Navigator\ub97c \uac00\uc838\uc628\ub2e4.<\/p>\n\n\n\n
MediaQuery.of(context)\n<\/code><\/pre>\n\n\n\n
\ud654\uba74 \ud06c\uae30\ub098 \uc2dc\uc2a4\ud15c UI \uad00\ub828 \uc815\ubcf4\ub97c \uac00\uc838\uc62c \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
\uadf8\ub798\uc11c context<\/code>\ub294 \ub2e8\uc21c\ud55c \ud30c\ub77c\ubbf8\ud130\uac00 \uc544\ub2c8\ub77c Widget Tree\uc640 \ud604\uc7ac Widget\uc758 \uc704\uce58\ub97c \uc5f0\uacb0\ud558\ub294 \uc5ed\ud560\uc744 \ud55c\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
InheritedWidget\uacfc \uc0c1\ud0dc \uc804\ub2ec<\/h2>\n\n\n\n
Widget Tree\uac00 \uae4a\uc5b4\uc9c0\uba74 \ubb38\uc81c\uac00 \ud558\ub098 \uc0dd\uae34\ub2e4.<\/p>\n\n\n\n
\ud558\uc704 Widget\uc5d0 \ub370\uc774\ud130\ub97c \uc804\ub2ec\ud558\ub824\uace0 \uacc4\uc18d \ud30c\ub77c\ubbf8\ud130\ub97c \ub118\uae30\uba74 \ucf54\ub4dc\uac00 \ubcf5\uc7a1\ud574\uc9c4\ub2e4.<\/p>\n\n\n\n
A -> B -> C -> D -> E\n<\/code><\/pre>\n\n\n\n
A\uac00 \uac00\uc9c0\uace0 \uc788\ub294 \ub370\uc774\ud130\ub97c E\uac00 \ud544\uc694\ud558\ub2e4\uace0 \ud574\uc11c \ubaa8\ub4e0 \ub2e8\uacc4\uc5d0\uc11c \ub370\uc774\ud130\ub97c \uc804\ub2ec\ud560 \ud544\uc694\ub294 \uc5c6\ub2e4.<\/p>\n\n\n\n
Flutter\uc5d0\ub294 \uc774\ub7f0 \uc0c1\ud669\uc744 \uc704\ud574 InheritedWidget<\/code> \uacc4\uc5f4\uc758 \uba54\ucee4\ub2c8\uc998\uc774 \uc874\uc7ac\ud55c\ub2e4.<\/p>\n\n\n\n
\uc0c1\uc704\uc5d0\uc11c \ub370\uc774\ud130\ub97c \uc81c\uacf5\ud558\uace0 \ud558\uc704 Widget\uc774 BuildContext<\/code>\ub97c \ud1b5\ud574 \uac00\uc838\uc624\ub294 \uad6c\uc870\ub2e4.<\/p>\n\n\n\n
Provider -> Widget A \/ Widget B \/ Widget C -> \ub370\uc774\ud130 \uc811\uadfc\n<\/code><\/pre>\n\n\n\n
Flutter\uc758 \uc0c1\ud0dc \uad00\ub9ac \ub77c\uc774\ube0c\ub7ec\ub9ac\ub4e4\uc774 \uacb0\uad6d \uc774 Widget Tree \uad6c\uc870\uc640 \ubc00\uc811\ud558\uac8c \uc5f0\uacb0\ub418\ub294 \uc774\uc720\ub3c4 \uc5ec\uae30\uc5d0 \uc788\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
\uc0c1\ud0dc \uad00\ub9ac<\/h2>\n\n\n\n
Flutter\uc5d0\uc11c \ud504\ub85c\uc81d\ud2b8\uac00 \ucee4\uc9c0\uba74 setState()<\/code>\ub9cc\uc73c\ub85c \ubaa8\ub4e0 \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud558\uae30 \uc5b4\ub824\uc6cc\uc9c4\ub2e4.<\/p>\n\n\n\n
\uc0c1\ud0dc\ub97c \ud06c\uac8c \ub098\ub204\uba74 \uc0dd\uac01\ud558\uae30 \ud3b8\ud558\ub2e4.<\/p>\n\n\n\n
Local State \/ Global State \/ Shared State \/ Server State\n<\/code><\/pre>\n\n\n\n
\ubc84\ud2bc\uc744 \ub20c\ub800\ub294\uc9c0, \ud2b9\uc815 \uc704\uc82f\uc774 \uc5f4\ub824 \uc788\ub294\uc9c0\ucc98\ub7fc \ud574\ub2f9 \ud654\uba74\uc5d0\uc11c\ub9cc \ud544\uc694\ud55c \uc0c1\ud0dc\ub294 \ub85c\uceec \uc0c1\ud0dc\ub85c \ucc98\ub9ac\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
\ubc18\uba74 \ub85c\uadf8\uc778 \uc0ac\uc6a9\uc790, \uc7a5\ubc14\uad6c\ub2c8, \uc124\uc815\uac12\ucc98\ub7fc \uc5ec\ub7ec \ud654\uba74\uc5d0\uc11c \uacf5\uc720\ud574\uc57c \ud558\ub294 \uc0c1\ud0dc\ub294 \ubcc4\ub3c4\uc758 \uc0c1\ud0dc \uad00\ub9ac \uad6c\uc870\uac00 \ud544\uc694\ud558\ub2e4.<\/p>\n\n\n\n
Flutter \uc0dd\ud0dc\uacc4\uc5d0\ub294 \ub2e4\uc591\ud55c \ubc29\ubc95\uc774 \uc788\ub2e4.<\/p>\n\n\n\n
    \n
  • Provider<\/li>\n\n\n\n
  • Riverpod<\/li>\n\n\n\n
  • BLoC \/ Cubit<\/li>\n\n\n\n
  • GetX<\/li>\n\n\n\n
  • ValueNotifier<\/li>\n\n\n\n
  • ChangeNotifier<\/li>\n<\/ul>\n\n\n\n
    \uc5b4\ub5a4 \ub77c\uc774\ube0c\ub7ec\ub9ac\uac00 \ubb34\uc870\uac74 \uc815\ub2f5\uc774\ub77c\uace0 \ubcf4\uae30\ub294 \uc5b4\ub835\ub2e4.<\/p>\n\n\n\n
    \uc791\uc740 \ud654\uba74\uc5d0\uc11c \uc0c1\ud0dc \ud558\ub098\ub97c \ubc14\uafb8\ub824\uace0 \uac70\ub300\ud55c \uc0c1\ud0dc \uad00\ub9ac \uad6c\uc870\ub97c \ub3c4\uc785\ud558\ub294 \uac83\ub3c4 \uacfc\ud558\ub2e4.<\/p>\n\n\n\n
    \ubc18\ub300\ub85c \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uc804\uccb4\uc5d0\uc11c \uacf5\uc720\ub418\ub294 \uc0c1\ud0dc\ub97c \uac01\uac01\uc758 Widget \ub0b4\ubd80\uc5d0\uc11c \uad00\ub9ac\ud558\uba74 \ub098\uc911\uc5d0 \uad6c\uc870\uac00 \uaf2c\uc778\ub2e4.<\/p>\n\n\n\n
    \uc0c1\ud0dc\uc758 \ubc94\uc704\ub97c \uba3c\uc800 \ud310\ub2e8\ud558\uace0 \ub3c4\uad6c\ub97c \uc120\ud0dd\ud558\ub294 \ud3b8\uc774 \ub0ab\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    \ube44\ub3d9\uae30 \ucc98\ub9ac<\/h2>\n\n\n\n
    Flutter \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c\ub294 \ub124\ud2b8\uc6cc\ud06c \uc694\uccad, \ud30c\uc77c \uc811\uadfc, \ub370\uc774\ud130\ubca0\uc774\uc2a4 \ucc98\ub9ac\ucc98\ub7fc \uc2dc\uac04\uc774 \uac78\ub9ac\ub294 \uc791\uc5c5\uc774 \uc790\uc8fc \ubc1c\uc0dd\ud55c\ub2e4.<\/p>\n\n\n\n
    Dart\uc5d0\uc11c\ub294 Future<\/code>\uc640 async \/ await<\/code>\ub97c \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n\n\n\n
    Future<User> fetchUser() async {\n  final response = await api.getUser();\n  return response;\n}\n<\/code><\/pre>\n\n\n\n
    await<\/code>\ub294 \uc791\uc5c5\uc774 \ub05d\ub0a0 \ub54c\uae4c\uc9c0 \ud574\ub2f9 \ube44\ub3d9\uae30 \ud568\uc218\uc758 \uc2e4\ud589\uc744 \uc774\uc5b4\uac00\uc9c0 \uc54a\uace0 \uae30\ub2e4\ub9b0\ub2e4.<\/p>\n\n\n\n
    \uc911\uc694\ud55c \uac83\uc740 \uc774 \uacfc\uc815\uc774 UI \uc2a4\ub808\ub4dc\ub97c \uadf8\ub300\ub85c \uba48\ucd94\uac8c \ud558\ub294 \ubc29\uc2dd\uc774 \uc544\ub2c8\ub77c\ub294 \uc810\uc774\ub2e4.<\/p>\n\n\n\n
    Flutter\uc5d0\uc11c \ube44\ub3d9\uae30 \uc791\uc5c5\uc744 \uc81c\ub300\ub85c \ucc98\ub9ac\ud558\uba74 \ub124\ud2b8\uc6cc\ud06c \uc694\uccad \uc911\uc5d0\ub3c4 UI\ub294 \uacc4\uc18d \ub3d9\uc791\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    \uc2e4\uc81c UI\uc5d0\uc11c\ub294 \ubcf4\ud1b5 \uc0c1\ud0dc\ub97c \ud568\uaed8 \uad00\ub9ac\ud55c\ub2e4.<\/p>\n\n\n\n
    Loading -> Request -> Success \/ Error\n<\/code><\/pre>\n\n\n\n
    \uc774 \uc138 \uac00\uc9c0 \uc0c1\ud0dc\ub97c \uba85\ud655\ud558\uac8c \ub098\ub204\uba74 UI \ucf54\ub4dc\ub3c4 \uc790\uc5f0\uc2a4\ub7fd\uac8c \uc815\ub9ac\ub41c\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    FutureBuilder<\/h2>\n\n\n\n
    \uac04\ub2e8\ud55c \ube44\ub3d9\uae30 \ub370\uc774\ud130\ub97c \ud654\uba74\uc5d0 \ud45c\uc2dc\ud560 \ub54c\ub294 FutureBuilder<\/code>\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    FutureBuilder<User>(\n  future: fetchUser(),\n  builder: (context, snapshot) {\n    if (snapshot.connectionState == ConnectionState.waiting) {\n      return const CircularProgressIndicator();\n    }\n\n    if (snapshot.hasError) {\n      return const Text('Error');\n    }\n\n    return Text(snapshot.data!.name);\n  },\n)\n<\/code><\/pre>\n\n\n\n
    FutureBuilder<\/code>\ub294 Future\uc758 \uc0c1\ud0dc\uc5d0 \ub530\ub77c Widget\uc744 \ub2e4\uc2dc \uad6c\uc131\ud558\uae30 \ud3b8\ud558\uac8c \ub9cc\ub4e4\uc5b4\uc900\ub2e4.<\/p>\n\n\n\n
    \ub2e4\ub9cc build()<\/code>\uac00 \ubc18\ubcf5 \ud638\ucd9c\ub420 \uc218 \uc788\ub2e4\ub294 \uc810\uc744 \uc0dd\uac01\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n
    \ub2e4\uc74c\ucc98\ub7fc future<\/code>\ub97c \uc9c1\uc811 \uc0dd\uc131\ud558\uba74 \uc758\ub3c4\ud558\uc9c0 \uc54a\uc740 \uc694\uccad\uc774 \ubc18\ubcf5\ub420 \uac00\ub2a5\uc131\uc774 \uc788\ub2e4.<\/p>\n\n\n\n
    FutureBuilder(\n  future: fetchUser(),\n  ...\n)\n<\/code><\/pre>\n\n\n\n
    \ube44\ub3d9\uae30 \uc791\uc5c5\uc758 \uc0dd\uba85\uc8fc\uae30\ub97c \uc5b4\ub514\uc5d0\uc11c \uad00\ub9ac\ud560 \uac83\uc778\uc9c0 \uba3c\uc800 \uacb0\uc815\ud558\ub294 \uac83\uc774 \uc88b\ub2e4.<\/p>\n\n\n\n
    \uac04\ub2e8\ud55c \ud654\uba74\uc5d0\uc11c\ub294 FutureBuilder<\/code>\uac00 \ud3b8\ud558\uc9c0\ub9cc, \ubcf5\uc7a1\ud55c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c\ub294 \uc0c1\ud0dc \uad00\ub9ac \uacc4\uce35\uc5d0\uc11c \ube44\ub3d9\uae30 \uc0c1\ud0dc\uae4c\uc9c0 \uad00\ub9ac\ud558\ub294 \uacbd\uc6b0\uac00 \ub9ce\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    Navigator\uc640 \ud654\uba74 \uc774\ub3d9<\/h2>\n\n\n\n
    Flutter\uc5d0\uc11c \ud654\uba74 \uc804\ud658\uc740 Navigator<\/code>\uac00 \ub2f4\ub2f9\ud55c\ub2e4.<\/p>\n\n\n\n
    \uae30\ubcf8\uc801\uc778 \ubc29\uc2dd\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n
    Navigator.push(\n  context,\n  MaterialPageRoute(\n    builder: (_) => const DetailPage(),\n  ),\n);\n<\/code><\/pre>\n\n\n\n
    \ud604\uc7ac \ud654\uba74 \uc704\uc5d0 \uc0c8\ub85c\uc6b4 Route\ub97c \ucd94\uac00\ud55c\ub2e4.<\/p>\n\n\n\n
    Route A -> push -> Route B -> push -> Route C\n<\/code><\/pre>\n\n\n\n
    \ub4a4\ub85c \uac00\uae30\ub294 Stack\uc758 \ub9c8\uc9c0\ub9c9 Route\ub97c \uc81c\uac70\ud558\ub294 \ubc29\uc2dd\uc774\ub2e4.<\/p>\n\n\n\n
    Navigator.pop(context);\n<\/code><\/pre>\n\n\n\n
    \uadf8\ub798\uc11c Navigator\ub294 \uc0ac\uc2e4\uc0c1 \ud654\uba74 \uc804\ud658\uc744 Stack \uad6c\uc870\ub85c \uad00\ub9ac\ud55c\ub2e4\uace0 \uc774\ud574\ud558\uba74 \ud3b8\ud558\ub2e4.<\/p>\n\n\n\n
    \ud504\ub85c\uc81d\ud2b8\uac00 \ucee4\uc9c0\uba74 \uc9c1\uc811 push()<\/code>\uc640 pop()<\/code>\uc744 \uad00\ub9ac\ud558\ub294 \uac83\ubcf4\ub2e4 \uc120\uc5b8\uc801\uc778 \ub77c\uc6b0\ud305 \uad6c\uc870\ub97c \uc0ac\uc6a9\ud558\ub294 \uacbd\uc6b0\ub3c4 \uc788\ub2e4.<\/p>\n\n\n\n
    \ub300\ud45c\uc801\uc73c\ub85c go_router<\/code> \uac19\uc740 \ud328\ud0a4\uc9c0\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    Layout\uc758 \uae30\ubcf8<\/h2>\n\n\n\n
    Flutter\uc5d0\uc11c \ud654\uba74 \ubc30\uce58\ub294 Widget\uc758 \uc870\ud569\uc73c\ub85c \ub9cc\ub4e4\uc5b4\uc9c4\ub2e4.<\/p>\n\n\n\n
    \uc790\uc8fc \uc0ac\uc6a9\ud558\ub294 \uac83\uc740 \ub2e4\uc74c \uc815\ub3c4\ub2e4.<\/p>\n\n\n\n
    Row \/ Column \/ Stack \/ Container \/ Expanded \/ Flexible \/ Padding \/ Align \/ Center \/ ListView \/ GridView\n<\/code><\/pre>\n\n\n\n
    \uc5ec\uae30\uc11c \uc911\uc694\ud55c \uac74 Row<\/code>\uc640 Column<\/code> \uc790\uccb4\ubcf4\ub2e4 Flutter\uc758 Layout \uaddc\uce59\uc774\ub2e4.<\/p>\n\n\n\n
    Flutter\uc758 \ub808\uc774\uc544\uc6c3\uc740 \ub300\ub7b5 \ub2e4\uc74c \ud750\ub984\uc73c\ub85c \uc0dd\uac01\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    Parent\uac00 \uc81c\uc57d \uc870\uac74\uc744 \uc804\ub2ec -> Child\uac00 \uc790\uc2e0\uc758 \ud06c\uae30\ub97c \uacb0\uc815 -> Parent\uac00 Child\uc758 \uc704\uce58\ub97c \uacb0\uc815\n<\/code><\/pre>\n\n\n\n
    \ud754\ud788<\/p>\n\n\n\n
    \n
    Constraints go down, sizes go up, parent sets position<\/p>\n<\/blockquote>\n\n\n\n
    \uc774\ub77c\ub294 \uc2dd\uc73c\ub85c \uc124\uba85\ud55c\ub2e4.<\/p>\n\n\n\n
    \uc774 \uad6c\uc870\ub97c \uc774\ud574\ud558\uc9c0 \ubabb\ud558\uba74 RenderFlex overflowed<\/code>, unbounded constraints<\/code> \uac19\uc740 \uc624\ub958\uac00 \ub098\uc654\uc744 \ub54c \uc6d0\uc778\uc744 \ucc3e\uae30 \uc5b4\ub835\ub2e4.<\/p>\n\n\n\n
    \uc608\ub97c \ub4e4\uc5b4 Column<\/code> \uc548\uc5d0\uc11c ListView<\/code>\ub97c \ubb34\uc791\uc815 \uc0ac\uc6a9\ud558\uba74 \uc138\ub85c \ubc29\ud5a5\uc758 \ud06c\uae30 \uc81c\uc57d\uc774 \ucda9\ub3cc\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    \uadf8\ub798\uc11c \ub2e4\uc74c\uacfc \uac19\uc740 \uad6c\uc870\ub97c \uc790\uc8fc \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n\n\n\n
    Column(\n  children: [\n    const Header(),\n    Expanded(\n      child: ListView(\n        children: [...],\n      ),\n    ),\n  ],\n)\n<\/code><\/pre>\n\n\n\n
    Expanded<\/code>\uac00 \ub0a8\uc740 \uacf5\uac04\uc744 ListView<\/code>\uc5d0 \ud560\ub2f9\ud574 \uc8fc\uae30 \ub54c\ubb38\uc5d0 \ub808\uc774\uc544\uc6c3 \uc81c\uc57d\uc774 \ub9de\ub294\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    ListView\uc640 \uc131\ub2a5<\/h2>\n\n\n\n
    \uae34 \ubaa9\ub85d\uc744 \ubcf4\uc5ec\uc904 \ub54c\ub294 \ubaa8\ub4e0 \ud56d\ubaa9\uc744 \ud55c \ubc88\uc5d0 \ub9cc\ub4e4\uc5b4 \ub193\uae30\ubcf4\ub2e4 \ud544\uc694\ud55c \uc601\uc5ed\uc744 \uc911\uc2ec\uc73c\ub85c \ucc98\ub9ac\ud558\ub294 \uac83\uc774 \uc88b\ub2e4.<\/p>\n\n\n\n
    ListView.builder(\n  itemCount: items.length,\n  itemBuilder: (context, index) {\n    return ListTile(\n      title: Text(items[index].name),\n    );\n  },\n)\n<\/code><\/pre>\n\n\n\n
    ListView.builder()<\/code>\ub294 \ub300\ub7c9\uc758 \ub370\uc774\ud130\ub97c \ud45c\uc2dc\ud560 \ub54c \uc0ac\uc6a9\ud558\ub294 \ub300\ud45c\uc801\uc778 \ubc29\uc2dd\uc774\ub2e4.<\/p>\n\n\n\n
    \ud2b9\ud788 \uac8c\uc784\uc758 \uc778\ubca4\ud1a0\ub9ac, \ucc44\ud305 \ubaa9\ub85d, \uc0c1\ud488 \ubaa9\ub85d\ucc98\ub7fc \ub370\uc774\ud130\uac00 \uacc4\uc18d \ubcc0\ud558\ub294 UI\uc5d0\uc11c \uc790\uc8fc \uc0ac\uc6a9\ud558\uac8c \ub41c\ub2e4.<\/p>\n\n\n\n
    \ub2e8\uc21c\ud788 \ub9ac\uc2a4\ud2b8\ub97c \ubcf4\uc5ec\uc8fc\ub294 \uac83\ubcf4\ub2e4 \uc544\uc774\ud15c\uc758 \uc0c1\ud0dc\uc640 \ud0a4, \uc774\ubbf8\uc9c0 \ub85c\ub529, \ubd88\ud544\uc694\ud55c rebuild\uae4c\uc9c0 \uac19\uc774 \ubd10\uc57c \uc2e4\uc81c \uc131\ub2a5\uc744 \uad00\ub9ac\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    Key<\/h2>\n\n\n\n
    Flutter\uc5d0\uc11c Key<\/code>\ub294 Widget\uc744 \uc2dd\ubcc4\ud560 \ub54c \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n\n\n\n
    \ud2b9\ud788 \ub9ac\uc2a4\ud2b8\ucc98\ub7fc Widget\uc758 \uc704\uce58\uac00 \ubcc0\uacbd\ub420 \uc218 \uc788\ub294 \uc0c1\ud669\uc5d0\uc11c \uc911\uc694\ud558\ub2e4.<\/p>\n\n\n\n
    ListTile(\n  key: ValueKey(item.id),\n  title: Text(item.name),\n)\n<\/code><\/pre>\n\n\n\n
    \uc608\ub97c \ub4e4\uc5b4 \ub2e4\uc74c\uacfc \uac19\uc740 \ub370\uc774\ud130\uac00 \uc788\ub2e4\uace0 \ud558\uc790.<\/p>\n\n\n\n
    A \/ B \/ C\n<\/code><\/pre>\n\n\n\n
    \uc21c\uc11c\uac00<\/p>\n\n\n\n
    C \/ A \/ B\n<\/code><\/pre>\n\n\n\n
    \ub85c \ubcc0\uacbd\ub418\uc5c8\ub2e4.<\/p>\n\n\n\n
    Flutter\uac00 Widget\uc758 \uc704\uce58\ub9cc \ubcf4\uace0 \uc0c1\ud0dc\ub97c \uc5f0\uacb0\ud558\uba74 \uae30\uc874 \uc0c1\ud0dc\uac00 \ub2e4\ub978 \ub370\uc774\ud130\uc5d0 \ubd99\ub294 \ubb38\uc81c\uac00 \uc0dd\uae38 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    \uace0\uc720\ud55c Key<\/code>\ub97c \uc0ac\uc6a9\ud558\uba74 \uc5b4\ub5a4 Widget\uc774 \uc5b4\ub5a4 \ub370\uc774\ud130\ub97c \ub098\ud0c0\ub0b4\ub294\uc9c0 \uc2dd\ubcc4\ud558\ub294 \ub370 \ub3c4\uc6c0\uc744 \uc904 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    \ud2b9\ud788 StatefulWidget<\/code> \ub9ac\uc2a4\ud2b8\uc5d0\uc11c \uc0c1\ud0dc\uac00 \uc774\uc0c1\ud558\uac8c \uc774\ub3d9\ud558\ub294 \ubb38\uc81c\uac00 \ubc1c\uc0dd\ud558\uba74 Key\ub97c \uba3c\uc800 \uc758\uc2ec\ud574\ubcfc \ub9cc\ud558\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    Flutter\uc758 \ub80c\ub354\ub9c1 \uad6c\uc870<\/h2>\n\n\n\n
    Flutter\uc758 \ud654\uba74 \ucd9c\ub825 \uad6c\uc870\ub97c \uc870\uae08 \ub354 \ubcf4\uba74 \uc138 \uac00\uc9c0 \ud2b8\ub9ac\ub97c \uc0dd\uac01\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    Widget Tree -> Element Tree -> RenderObject Tree\n<\/code><\/pre>\n\n\n\n
    Widget<\/h3>\n\n\n\n
    UI\ub97c \uc120\uc5b8\ud558\ub294 \ubd88\ubcc0 \uac1d\uccb4\ub2e4.<\/p>\n\n\n\n
    Text('Hello')\n<\/code><\/pre>\n\n\n\n
    Element<\/h3>\n\n\n\n
    Widget\uacfc \uc2e4\uc81c \ud2b8\ub9ac\uc758 \uc5f0\uacb0\uc744 \uc720\uc9c0\ud55c\ub2e4.<\/p>\n\n\n\n
    Widget\uc774 rebuild\ub418\uc5b4 \uc0c8\ub85c\uc6b4 \uac1d\uccb4\uac00 \ub9cc\ub4e4\uc5b4\uc838\ub3c4 Element\ub97c \ud1b5\ud574 \uae30\uc874 \uc0c1\ud0dc\uc640 \uc5f0\uacb0 \uad00\uacc4\ub97c \uc720\uc9c0\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    RenderObject<\/h3>\n\n\n\n
    \uc2e4\uc81c \ub808\uc774\uc544\uc6c3\uacfc \ud398\uc778\ud305\uc5d0 \uad00\uc5ec\ud55c\ub2e4.<\/p>\n\n\n\n
    \ud06c\uae30\uc640 \uc704\uce58\ub97c \uacc4\uc0b0\ud558\uace0 \ud654\uba74\uc5d0 \uadf8\ub9b4 \uc815\ubcf4\ub97c \uad00\ub9ac\ud55c\ub2e4.<\/p>\n\n\n\n
    \uac1c\ubc1c\ud560 \ub54c \ub9e4\ubc88 \uc774 \uc138 \uac00\uc9c0\ub97c \uc9c1\uc811 \ub2e4\ub8f0 \ud544\uc694\ub294 \uc5c6\ub2e4.<\/p>\n\n\n\n
    \ub2e4\ub9cc build()<\/code>\uac00 \ub2e4\uc2dc \uc2e4\ud589\ub41c\ub2e4\uace0 \ud574\uc11c \ud654\uba74 \uc804\uccb4\ub97c \ucc98\uc74c\ubd80\ud130 \ubb34\uc791\uc815 \ub2e4\uc2dc \uadf8\ub9ac\ub294 \uac83\uc740 \uc544\ub2c8\ub77c\ub294 \uc815\ub3c4\ub294 \uc54c\uace0 \uc788\ub294 \ud3b8\uc774 \uc88b\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    Flutter\uc5d0\uc11c \uc131\ub2a5\uc744 \ubcfc \ub54c<\/h2>\n\n\n\n
    Flutter \uc131\ub2a5 \ubb38\uc81c\ub294 \ub2e8\uc21c\ud788 Widget \uac1c\uc218\uac00 \ub9ce\uc544\uc11c \ubc1c\uc0dd\ud55c\ub2e4\uace0 \ubcf4\uba74 \uc548 \ub41c\ub2e4.<\/p>\n\n\n\n
    \ub2e4\uc74c\uacfc \uac19\uc740 \ubd80\ubd84\uc744 \ud655\uc778\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n
      \n
    • \ubd88\ud544\uc694\ud55c rebuild<\/li>\n\n\n\n
    • \ubb34\uac70\uc6b4 build()<\/code> \ub85c\uc9c1<\/li>\n\n\n\n
    • \ud070 \uc774\ubbf8\uc9c0 \ucc98\ub9ac<\/li>\n\n\n\n
    • \uacfc\ub3c4\ud55c layout \/ paint<\/li>\n\n\n\n
    • \ube44\ud6a8\uc728\uc801\uc778 \ub9ac\uc2a4\ud2b8<\/li>\n\n\n\n
    • \uba54\uc778 isolate\uc5d0\uc11c \uc218\ud589\ud558\ub294 \ubb34\uac70\uc6b4 \uc5f0\uc0b0<\/li>\n\n\n\n
    • \ubd88\ud544\uc694\ud55c \ub124\ud2b8\uc6cc\ud06c \uc694\uccad<\/li>\n\n\n\n
    • \uc0c1\ud0dc \ubc94\uc704\uac00 \uc9c0\ub098\uce58\uac8c \ub113\uc740 \uacbd\uc6b0<\/li>\n<\/ul>\n\n\n\n
      const<\/code> Widget\uc744 \uc0ac\uc6a9\ud558\ub294 \uac83\ub3c4 \ub3c4\uc6c0\uc774 \ub41c\ub2e4.<\/p>\n\n\n\n
      const Text('Hello');\n<\/code><\/pre>\n\n\n\n
      \ubcc0\ud558\uc9c0 \uc54a\ub294 Widget\uc744 const<\/code>\ub85c \ub9cc\ub4e4\uba74 Flutter\uac00 \uac1d\uccb4\ub97c \uc7ac\uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \uc5ec\uc9c0\uac00 \uc0dd\uae34\ub2e4.<\/p>\n\n\n\n
      \ub2e4\ub9cc const<\/code>\ub97c \ubd99\uc774\ub294 \uac83 \uc790\uccb4\ub97c \uc131\ub2a5 \ucd5c\uc801\ud654\uc758 \uc804\ubd80\ucc98\ub7fc \uc0dd\uac01\ud560 \ud544\uc694\ub294 \uc5c6\ub2e4.<\/p>\n\n\n\n
      \uc2e4\uc81c\ub85c \ubb38\uc81c\uac00 \ubc1c\uc0dd\ud558\uba74 DevTools\uc758 \uc131\ub2a5 \ub3c4\uad6c\ub97c \uc774\uc6a9\ud574\uc11c \uc5b4\ub514\uc5d0\uc11c \ube44\uc6a9\uc774 \ubc1c\uc0dd\ud558\ub294\uc9c0 \ud655\uc778\ud558\ub294 \uac83\uc774 \ub354 \uc911\uc694\ud558\ub2e4.<\/p>\n\n\n\n
      \n\n\n\n
      Isolate<\/h2>\n\n\n\n
      Dart\ub294 \uae30\ubcf8\uc801\uc73c\ub85c \uc774\ubca4\ud2b8 \ub8e8\ud504\ub97c \uc0ac\uc6a9\ud558\ub294 \uad6c\uc870\uc774\uace0, Flutter\uc758 UI \uc791\uc5c5\uc740 \uba54\uc778 isolate\uc5d0\uc11c \ucc98\ub9ac\ub41c\ub2e4.<\/p>\n\n\n\n
      \ub530\ub77c\uc11c CPU\ub97c \ub9ce\uc774 \uc0ac\uc6a9\ud558\ub294 \uc791\uc5c5\uc744 \uba54\uc778 isolate\uc5d0\uc11c \uc624\ub798 \uc2e4\ud589\ud558\uba74 \ud654\uba74\uc774 \ub04a\uae38 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
      \uc608\ub97c \ub4e4\uc5b4 \ub300\uaddc\ubaa8 JSON \ud30c\uc2f1\uc774\ub098 \ubcf5\uc7a1\ud55c \uacc4\uc0b0\uc744 \ud55c \ubc88\uc5d0 \uc218\ud589\ud558\uba74 UI\uac00 \ubc84\ubc85\uc77c \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
      \uc774\ub7f0 \uc791\uc5c5\uc740 \ud544\uc694\uc5d0 \ub530\ub77c \ubcc4\ub3c4\uc758 isolate\uc5d0\uc11c \ucc98\ub9ac\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
      Main Isolate -> UI \/ Input \/ Rendering\nWorker Isolate -> Heavy Computation\n<\/code><\/pre>\n\n\n\n
      \ub2e4\ub9cc \ubaa8\ub4e0 \ube44\ub3d9\uae30 \uc791\uc5c5\uc5d0 isolate\uac00 \ud544\uc694\ud55c \uac83\uc740 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n
      \ub124\ud2b8\uc6cc\ud06c \uc694\uccad\ucc98\ub7fc I\/O\ub97c \uae30\ub2e4\ub9ac\ub294 \uc791\uc5c5\uacfc CPU\ub97c \uacc4\uc18d \uc0ac\uc6a9\ud558\ub294 \uc791\uc5c5\uc740 \uad6c\ubd84\ud574\uc11c \uc0dd\uac01\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n
      \n\n\n\n
      \ud504\ub85c\uc81d\ud2b8 \uad6c\uc870<\/h2>\n\n\n\n
      Flutter \ud504\ub85c\uc81d\ud2b8\ub97c \ucc98\uc74c \ub9cc\ub4e4\uba74 \ubaa8\ub4e0 \ucf54\ub4dc\ub97c lib\/<\/code> \uc544\ub798\uc5d0 \ub123\uae30 \uc2dc\uc791\ud558\uae30 \uc27d\ub2e4.<\/p>\n\n\n\n
      \uc791\uc744 \ub54c\ub294 \ubb38\uc81c\uac00 \uc5c6\uc9c0\ub9cc \uaddc\ubaa8\uac00 \ucee4\uc9c0\uba74 \uae30\ub2a5\ubcc4\ub85c \uc5ed\ud560\uc744 \ubd84\ub9ac\ud558\ub294 \ud3b8\uc774 \uad00\ub9ac\ud558\uae30 \uc88b\ub2e4.<\/p>\n\n\n\n
      \uc608\ub97c \ub4e4\uc5b4 \uc774\ub7f0 \uad6c\uc870\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
      lib\/ -> core \/ features \/ main.dart\ncore -> network \/ storage \/ theme\nfeatures -> auth \/ profile\nauth -> data \/ domain \/ presentation\nprofile -> data \/ domain \/ presentation\n<\/code><\/pre>\n\n\n\n
      \uc5ec\uae30\uc11c \uc911\uc694\ud55c \uac74 \ud3f4\ub354 \uc774\ub984 \uc790\uccb4\uac00 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n
      UI \ucf54\ub4dc\uc640 \ub124\ud2b8\uc6cc\ud06c \uc694\uccad, \ub370\uc774\ud130 \ubaa8\ub378, \ube44\uc988\ub2c8\uc2a4 \ub85c\uc9c1\uc774 \ud55c Widget \uc548\uc5d0 \ub4a4\uc11e\uc774\uc9c0 \uc54a\uac8c \ub9cc\ub4dc\ub294 \uac83\uc774\ub2e4.<\/p>\n\n\n\n
      \uc608\ub97c \ub4e4\uc5b4 \ubc84\ud2bc\uc744 \ub20c\ub800\ub2e4\uace0 \ud574\uc11c Widget\uc5d0\uc11c \uc9c1\uc811 HTTP \uc694\uccad\uc744 \ub9cc\ub4e4\uace0 JSON\uc744 \ud30c\uc2f1\ud558\uace0 DB\uae4c\uc9c0 \uc218\uc815\ud558\uae30 \uc2dc\uc791\ud558\uba74 \ub098\uc911\uc5d0 \ud14c\uc2a4\ud2b8\uc640 \uc720\uc9c0\ubcf4\uc218\uac00 \uc5b4\ub824\uc6cc\uc9c4\ub2e4.<\/p>\n\n\n\n
      Presentation -> State \/ Controller -> Repository -> Data Source -> API \/ Database\n<\/code><\/pre>\n\n\n\n
      \uc815\ub3c4\uc758 \uacbd\uacc4\ub97c \uc7a1\uc544\ub450\uba74 \ucf54\ub4dc\uc758 \ucc45\uc784\uc774 \ubd84\uba85\ud574\uc9c4\ub2e4.<\/p>\n\n\n\n
      \n\n\n\n
      Flutter \uac1c\ubc1c\uc5d0\uc11c \uc790\uc8fc \ub9c8\uc8fc\uce58\ub294 \ubb38\uc81c<\/h2>\n\n\n\n
      Flutter\ub97c \uc0ac\uc6a9\ud560 \ub54c \uacb0\uad6d \uc790\uc8fc \ub9cc\ub098\ub294 \ubb38\uc81c\ub294 \uba87 \uac00\uc9c0\ub85c \uc555\ucd95\ub41c\ub2e4.<\/p>\n\n\n\n
      \ud654\uba74\uc774 \uac31\uc2e0\ub418\uc9c0 \uc54a\ub294\ub2e4<\/h3>\n\n\n\n
      \uc0c1\ud0dc\ub294 \ubcc0\uacbd\ud588\ub294\ub370 setState()<\/code>\ub098 \uc0c1\ud0dc \uad00\ub9ac \uc2dc\uc2a4\ud15c\uc744 \ud1b5\ud574 \ubcc0\uacbd \uc0ac\uc2e4\uc744 \uc54c\ub9ac\uc9c0 \uc54a\uc740 \uacbd\uc6b0\uac00 \ub9ce\ub2e4.<\/p>\n\n\n\n
      Overflow \uc624\ub958\uac00 \ubc1c\uc0dd\ud55c\ub2e4<\/h3>\n\n\n\n
      \ub300\ubd80\ubd84 Widget\uc758 \ud06c\uae30 \uc81c\uc57d\uc744 \ub2e4\uc2dc \ubd10\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n
      \ud2b9\ud788 Row<\/code>, Column<\/code>, ListView<\/code>, Expanded<\/code>, Flexible<\/code>\uc758 \uad00\uacc4\ub97c \ud655\uc778\ud55c\ub2e4.<\/p>\n\n\n\n
      \ube44\ub3d9\uae30 \uc694\uccad\uc774 \ubc18\ubcf5\ub41c\ub2e4<\/h3>\n\n\n\n
      build()<\/code>\uac00 \ub2e4\uc2dc \ud638\ucd9c\ub418\ub294 \uad6c\uc870\uc640 Future\uc758 \uc0dd\uc131 \uc704\uce58\ub97c \ud655\uc778\ud55c\ub2e4.<\/p>\n\n\n\n
      \ub9ac\uc2a4\ud2b8\uc758 \uc0c1\ud0dc\uac00 \uc774\uc0c1\ud558\ub2e4<\/h3>\n\n\n\n
      Widget \uc7ac\uc0ac\uc6a9 \uacfc\uc815\uc5d0\uc11c Key<\/code>\uac00 \ud544\uc694\ud55c \uc0c1\ud669\uc778\uc9c0 \ud655\uc778\ud55c\ub2e4.<\/p>\n\n\n\n
      \ud654\uba74\uc774 \ubc84\ubc85\uc778\ub2e4<\/h3>\n\n\n\n
      \ubb34\uc870\uac74 Widget \uac1c\uc218\ubd80\ud130 \uc904\uc77c \uac8c \uc544\ub2c8\ub77c rebuild, layout, paint, \uc774\ubbf8\uc9c0, CPU \uc791\uc5c5 \ub4f1\uc744 DevTools\ub85c \ud655\uc778\ud558\ub294 \uac8c \uba3c\uc800\ub2e4.<\/p>\n\n\n\n
      \n\n\n\n
      Flutter\ub97c \uc774\ud574\ud558\ub294 \ud558\ub098\uc758 \ud750\ub984<\/h2>\n\n\n\n
      \uc9c0\uae08\uae4c\uc9c0\uc758 \ub0b4\uc6a9\uc744 \ud558\ub098\ub85c \ubb36\uc73c\uba74 \ub300\ub7b5 \uc774\ub7f0 \uad6c\uc870\uac00 \ub41c\ub2e4.<\/p>\n\n\n\n
      Flutter App -> Widget Tree -> StatelessWidget \/ StatefulWidget -> State -> setState() -> Build -> Element Tree -> RenderObject Tree -> Layout \/ Paint -> \ud654\uba74\n<\/code><\/pre>\n\n\n\n
      \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uad6c\uc870\ub97c \ubd99\uc774\uba74 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n
      UI -> State Management -> Repository -> API \/ Database\n<\/code><\/pre>\n\n\n\n
      \uc774 \uad6c\uc870\ub97c \uae30\ubc18\uc73c\ub85c \ubcf4\uba74 Flutter\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 \uc218\ub9ce\uc740 API\uc640 \ud328\ud0a4\uc9c0\ub3c4 \uac01\uac01 \uc5b4\ub514\uc5d0 \uc18d\ud558\ub294\uc9c0 \ud310\ub2e8\ud558\uae30 \uc26c\uc6cc\uc9c4\ub2e4.<\/p>\n\n\n\n
      \n\n\n\n
      \uc815\ub9ac<\/h2>\n\n\n\n
      Flutter\ub97c \uacf5\ubd80\ud558\uba74\uc11c \ub290\ub080 \uac74 Widget \ubb38\ubc95\uc744 \ub9ce\uc774 \uc544\ub294 \uac83\uacfc Flutter\ub97c \uc774\ud574\ud558\ub294 \uac74 \uc870\uae08 \ub2e4\ub978 \ubb38\uc81c\ub77c\ub294 \uac83\uc774\ub2e4.<\/p>\n\n\n\n
      \uc911\uc2ec\uc5d0\ub294 Widget Tree\uac00 \uc788\uace0, \uc0c1\ud0dc\uac00 \ubcc0\uacbd\ub418\uba74 \uc0c8\ub85c\uc6b4 UI \uad6c\uc131\uc774 \ub9cc\ub4e4\uc5b4\uc9c4\ub2e4. Flutter\ub294 Widget, Element, RenderObject\ub97c \ud1b5\ud574 \uc774 \uad6c\uc870\ub97c \uad00\ub9ac\ud558\uace0 \uc2e4\uc81c \ud654\uba74\uc744 layout\ud558\uace0 paint\ud55c\ub2e4.<\/p>\n\n\n\n
      \uac1c\ubc1c\ud558\uba74\uc11c \uc790\uc8fc \ub9cc\ub098\ub294 setState()<\/code>, BuildContext<\/code>, Key<\/code>, FutureBuilder<\/code>, Navigator<\/code>, Expanded<\/code> \uac19\uc740 \uac83\ub4e4\ub3c4 \uac01\uac01 \ub530\ub85c \uc678\uc6b0\uae30\ubcf4\ub2e4 \uc774 \uad6c\uc870 \uc548\uc5d0\uc11c \ubcf4\uba74 \uc5ed\ud560\uc774 \uba85\ud655\ud574\uc9c4\ub2e4.<\/p>\n\n\n\n
      Widget -> State -> Build -> Element -> RenderObject -> Layout \/ Paint -> \ud654\uba74\n<\/code><\/pre>\n\n\n\n
      \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uaddc\ubaa8\uac00 \ucee4\uc9c0\uba74 \uc5ec\uae30\uc5d0 \uc0c1\ud0dc \uad00\ub9ac, \ub77c\uc6b0\ud305, \ub124\ud2b8\uc6cc\ud06c, \uc800\uc7a5\uc18c, \uc544\ud0a4\ud14d\ucc98\uac00 \ucd94\uac00\ub41c\ub2e4.<\/p>\n\n\n\n
      \uacb0\uad6d Flutter \uac1c\ubc1c\uc5d0\uc11c \uc911\uc694\ud55c \uac74 Widget API\ub97c \uc5bc\ub9c8\ub098 \ub9ce\uc774 \uc678\uc6e0\ub290\ub0d0\ubcf4\ub2e4 UI, \uc0c1\ud0dc, \ub370\uc774\ud130, \ub80c\ub354\ub9c1\uc758 \ucc45\uc784\uc744 \uc5b4\ub514\uc5d0 \ub458 \uac83\uc778\uac00<\/strong>\ub97c \ud310\ub2e8\ud558\ub294 \ub2a5\ub825\uc5d0 \uac00\uae5d\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"
      Flutter\ub294 Google\uc774 \uac1c\ubc1c\ud55c UI \ud504\ub808\uc784\uc6cc\ud06c\ub85c, Dart \uc5b8\uc5b4\ub97c \uc0ac\uc6a9\ud574 \ud558\ub098\uc758 \ucf54\ub4dc\ubca0\uc774\uc2a4\ub85c \uc5ec\ub7ec \ud50c\ub7ab\ud3fc\uc758 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud560 \uc218 \uc788\ub3c4\ub85d \ub9cc\ub4e4\uc5b4\uc84c\ub2e4. \ubaa8\ubc14\uc77c \uc571 \uac1c\ubc1c\uc744 \uc2dc\uc791\ud558\uba74 Android\uc640 iOS\ub97c \uac01\uac01 \uac1c\ubc1c\ud574\uc57c \ud558\ub294 \uacbd\uc6b0\uac00 \ub9ce\ub2e4. Android\ub294 Kotlin\uc774\ub098 Java, iOS\ub294 Swift\ub098 Objective-C\ub97c \uc0ac\uc6a9\ud558\ub294 \uc2dd\uc774\ub2e4. Flutter\ub294 \uc774 \ubb38\uc81c\ub97c \ub2e4\ub978 \ubc29\uc2dd\uc73c\ub85c \ud574\uacb0\ud55c\ub2e4. Dart\ub85c \uc791\uc131\ud55c \ud558\ub098\uc758 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ucf54\ub4dc\uc5d0\uc11c UI\uc640 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ub85c\uc9c1\uc744 \uad6c\uc131\ud558\uace0, Flutter\uac00 \uc81c\uacf5\ud558\ub294 \ub80c\ub354\ub9c1 \uc2dc\uc2a4\ud15c\uacfc […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[48],"tags":[],"class_list":["post-1638","post","type-post","status-publish","format-standard","hentry","category-client"],"_links":{"self":[{"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/posts\/1638","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1638"}],"version-history":[{"count":3,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/posts\/1638\/revisions"}],"predecessor-version":[{"id":1931,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/posts\/1638\/revisions\/1931"}],"wp:attachment":[{"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1638"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1638"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1638"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}