Contents

[Flutter Beginner] StatefulWidget

Widget

Widget์€ ๋ชจ๋‘ ๋ถˆ๋ณ€์˜ ๋ฒ•์น™์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์œ„์ ฏ์˜ ๊ฐ’์„ ๋ณ€๊ฒฝํ•ด์•ผ ํ•  ๊ฒฝ์šฐ๊ฐ€ ์ƒ๊ธด๋‹ค. ๋ณ€๊ฒฝ์ด ํ•„์š”ํ•  ๊ฒฝ์šฐ ๊ธฐ์กด ์œ„์ ฏ์„ ์‚ญ์ œํ•ด๋ฒ„๋ฆฌ๊ณ  ์™„์ „ ์ƒˆ๋กœ์šด ์œ„์ ฏ์œผ๋กœ ๋Œ€์ฒดํ•œ๋‹ค.

StatelessWidget Life Cycle

/posts/images/dart-flutter/statelesswidget.png
  • Constructor๋กœ ์ƒ์„ฑ์ด๋˜๊ณ  ์ƒ์„ฑ์ด ๋˜์ž๋งˆ์ž build ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋œ๋‹ค.
  • ๋ณ€๊ฒฝ์ด ํ•„์š”ํ•˜๋ฉด ์ƒˆ๋กœ์šด ์œ„์ ฏ์„ ๋งŒ๋“ ๋‹ค.
  • StatelessWidget์€ ๋ผ์ดํ”„ ์‚ฌ์ดํด ๋™์•ˆ ๋‹จ ํ•œ๋ฒˆ๋งŒ build ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•œ๋‹ค.

StatefulWidget ์ƒ๋ช…์ฃผ๊ธฐ

/posts/images/dart-flutter/statefulWidget_life_cycle.jpg
  1. Construct
  2. createState : State๋ฅผ ์ƒ์„ฑ
  3. initState : State๋ฅผ ์ดˆ๊ธฐํ™”. State๊ฐ€ ์ƒ์„ฑ๋  ๋•Œ ๋‹จ ํ•œ๋ฒˆ๋งŒ ํ˜ธ์ถœ๋œ๋‹ค.
  4. didChangeDependencies
  5. dirty ์ƒํƒœ : ๋ณ€๊ฒฝ์ด ํ•„์š”ํ•œ ์ƒํƒœ๋ฅผ ์˜๋ฏธํ•œ๋‹ค.
  6. build : ์œ„์ ฏ์„ ํ™”๋ฉด์— ๊ทธ๋ ค์ค€๋‹ค.
  7. clean : didUpdateWidget, setState
  8. deactivate : ๊ฑฐ์˜ ์‚ฌ์šฉํ•˜์ง€ ์•Š์Œ
  9. dispose

ํŒŒ๋ผ๋ฏธํ„ฐ๊ฐ€ ๋ณ€๊ฒฝ๋˜์—ˆ์„ ๋•Œ ์ƒ๋ช…์ฃผ๊ธฐ

/posts/images/dart-flutter/statefulWidget_change_parameter.jpg
  1. ๊ธฐ์กด ์œ„์ ฏ์€ ์‚ญ์ œ๋œ๋‹ค. ์ƒˆ๋กœ์šด StatefulWidget์ด ์ƒ์„ฑ๋˜๊ณ  Constructor๊ฐ€ ์‹คํ–‰
  2. ๊ธฐ์กด State ์ฐพ๋Š”๋‹ค.
  3. didUpdateWidget : clean ์ƒํƒœ์ธ ์ƒํƒœ์—์„œ ์‹คํ–‰๋œ๋‹ค.
  4. dirty ์ƒํƒœ๋กœ ๋ณ€๊ฒฝํ•œ๋‹ค.
  5. ๋ณ€๊ฒฝ๋œ ๊ฐ’์„ ๊ธฐ๋ฐ˜์œผ๋กœ build ์‹คํ–‰
  6. clean ์ƒํƒœ๋กœ ๋ณ€๊ฒฝ๋œ๋‹ค.

setState๊ฐ€ ์‹คํ–‰๋  ๋•Œ ์ƒ๋ช…์ฃผ๊ธฐ

/posts/images/dart-flutter/statefulWidget_lifecycle_setState.jpg
  1. clean์ธ ์ƒํƒœ์—์„œ setState๋ฅผ ์‹คํ–‰ํ•œ๋‹ค.
  2. dirty ์ƒํƒœ๋กœ ๋ณ€๊ฒฝ๋˜๊ณ 
  3. build๊ฐ€ ์žฌ์‹คํ–‰๋œ๋‹ค.
  4. clean ์ƒํƒœ๋กœ ๋‹ค์‹œ ๋ณ€๊ฒฝ