๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐Ÿ“ฑ Cross Platform/Flutter

[Flutter] StatelessWidget๊ณผ StatefulWidget์˜ ์ฐจ์ด์ 

by Fomagran ๐Ÿ’ป 2021. 4. 18.
728x90
๋ฐ˜์‘ํ˜•

์•ˆ๋…•ํ•˜์„ธ์š” Foma ์ž…๋‹ˆ๋‹ค!

์˜ค๋Š˜์€ ํ”Œ๋Ÿฌํ„ฐ์—์„œ ๊ฐ€์žฅ ๊ธฐ๋ณธ์ ์ธ StatelessWidget๊ณผ StatefulWidget์˜ ์ฐจ์ด์ ์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค!

๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”!

 


StatelessWidget

 

 

๊ณต์‹ ๋ฌธ์„œ๋ฅผ ํ•ด์„ํ•ด๋ณด๋ฉด

 

"๋ณ€๊ฒฝ ๊ฐ€๋Šฅํ•œ ์ƒํƒœ๊ฐ€ ํ•„์š”ํ•˜์ง€ ์•Š์€ ์œ„์ ฏ"

 

์ด๋ผ๊ณ  ํ•˜๋„ค์š”.

 

์˜ˆ๋ฅผ ๋“ค๋ฉด ์•„๋ž˜์™€ ๊ฐ™์€ ํ™”๋ฉด์€ ๋” ์ด์ƒ ๋ณ€๊ฒฝ๋  ์ผ์ด ์—†์œผ๋ฏ€๋กœ ์ƒํƒœ๊ฐ€ ํ•„์š”์—†๋Š” ์œ„์ ฏ์ž…๋‹ˆ๋‹ค.

 

 

๊ทธ๋Ÿฌ๋ฏ€๋กœ StatelessWidget์œผ๋กœ ๋งŒ๋“ค์–ด์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

 

class MyApp extends StatelessWidget {...}

StatefulWidget

 

 

๊ณต์‹ ๋ฌธ์„œ๋ฅผ ํ•ด์„ํ•ด๋ณด๋ฉด

 

"๋ณ€๊ฒฝ ๊ฐ€๋Šฅํ•œ ์ƒํƒœ๋ฅผ ๊ฐ€์ง„ ์œ„์ ฏ"

์ด๋ผ๊ณ  ๋˜์–ด์žˆ์Šต๋‹ˆ๋‹ค.

 

๊ทธ๋ ‡๋‹ค๋ฉด State๋Š” ์–ด๋–ค ์ผ์„ ํ• ๊นŒ์š”?๐Ÿค”

 

 

1.์œ„์ ฏ์ด ๋นŒ๋“œ ๋  ๋•Œ ๋™๊ธฐ์ ์œผ๋กœ ์ฝ๋Š”๋‹ค.

 

2.์œ„์ ฏ์˜ ์ˆ˜๋ช… ๋™์•ˆ ๋ณ€๊ฒฝ ๋  ์ˆ˜์žˆ๋Š” ์ •๋ณด๋ฅผ ๊ฐ€์ง„๋‹ค.

 

์ฆ‰, ๋ณ€๊ฒฝํ•˜๋Š” ์ •๋ณด๋ฅผ ๋™๊ธฐ์ ์œผ๋กœ ์ฝ๊ณ  ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค.

 

 

๋˜ํ•œ ๊ณต์‹ ๋ฌธ์„œ์—๋Š” State์˜ setState ๋ฉ”์†Œ๋“œ๋ฅผ ํ™œ์šฉํ•ด์„œ state๊ฐ€ ๋ณ€๊ฒฝ๋ ๋•Œ ์ฆ‰์‹œ ์•Œ๋ฆผ์„ ๋ฐ›๋„๋ก ๊ตฌํ˜„ํ•˜๋ผ๊ณ  ๋˜์–ด์žˆ๋Š”๋ฐ์š”.

 

StatelessWidget์—์„œ ๋“  ์˜ˆ์ œ์—์„œ ๋ฒ„ํŠผ์„ ์ถ”๊ฐ€ํ•ด์„œ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ํœด๋Œ€ํฐ ๋ฒˆํ˜ธ๊ฐ€ ๋ฐ”๋€Œ๋„๋ก ํ•˜๋ ค๋ฉด ์–ด๋–ป๊ฒŒ ํ•ด์•ผํ• ๊นŒ์š”?

 

๋ฐ”๋กœ MyApp ์œ„์ ฏ์„ StatefulWiget์œผ๋กœ ๋ฐ”๊ฟ”์ฃผ๊ณ  State ํด๋ž˜์Šค ๋˜ํ•œ ๊ฐ™์ด ๋งŒ๋“ค์–ด์ค๋‹ˆ๋‹ค.

 

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {...}

 

(Visual Studio ๊ธฐ์ค€์œผ๋กœ st๋งŒ ์น˜๋ฉด ์•„๋ž˜ Flutter stateful widget์ด๋ผ๊ณ  ๋œจ๋Š”๋ฐ ๋ˆŒ๋Ÿฌ์ฃผ์‹œ๋ฉด ์ž๋™์œผ๋กœ StatefulWidget์— ํ•„์š”ํ•œ ๋ฉ”์†Œ๋“œ์™€ State ํด๋ž˜์Šค๊ฐ€ ๋งŒ๋“ค์–ด์ง‘๋‹ˆ๋‹ค.)

 

 

Stateํด๋ž˜์Šค์— ํœด๋Œ€ํฐ ๋ฒˆํ˜ธ๋ฅผ ๋‹ด์„ ๋ณ€์ˆ˜๋ฅผ ํ•˜๋‚˜ ๋งŒ๋“ค์–ด์ฃผ์‹œ๊ณ 

 

ํœด๋Œ€ํฐ ๋ฒˆํ˜ธ๊ฐ€ ๋ฐ”๋€Œ๋Š” ๋ฉ”์†Œ๋“œ๋„ ๋งŒ๋“ค์–ด์ค๋‹ˆ๋‹ค.

 

๋ฉ”์†Œ๋“œ๋ฅผ ๋ณด๋ฉด setState๊ฐ€ ์žˆ๋Š”๋ฐ ์œ„์—์„œ ์„ค๋ช…ํ•œ๋Œ€๋กœ ์ด ๋ฉ”์†Œ๋“œ๋ฅผ ์ด์šฉํ•˜์—ฌ phoneNumber์˜ ์ƒํƒœ๋ฅผ ๋ณ€๊ฒฝ์‹œํ‚ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

 

setState์•ˆ์˜ ํœด๋Œ€ํฐ ๋ฒˆํ˜ธ ๋ณ€์ˆ˜๋Š” ๋ฐ”๋€” ๋ฒˆํ˜ธ๋ฅผ ์ ์–ด์ค๋‹ˆ๋‹ค.

 

class _MyAppState extends State<MyApp> {

  String phoneNumber = "+82 10 2240 6112";

  void changePhoneNumber() {
    setState(() {
      phoneNumber = "+82 10 1234 5678";
    });
  }

 

ํ…์ŠคํŠธ์˜ ๊ธ€์ž๋ฅผ $์„ ์ด์šฉํ•ด์„œ ๋ณ€์ˆ˜๋ช…์œผ๋กœ ์„ค์ •ํ•˜๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.

 

Text("$phoneNumber",...)

 

๊ทธ๋ฆฌ๊ณ  FlatButton ์œ„์ ฏ์„ ์ด์šฉํ•˜์—ฌ ๋ˆŒ๋ €์„๋•Œ ํœด๋Œ€ํฐ ๋ฒˆํ˜ธ๊ฐ€ ๋ฐ”๋€Œ๋„๋ก ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.

 

  FlatButton(
            onPressed: () {
              changePhoneNumber();
            },

 

์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋ฒ„ํŠผ์„ ๋ˆŒ๋ €์„ ๋•Œ ํœด๋Œ€ํฐ ๋ฒˆํ˜ธ๊ฐ€ ๋ฐ”๋€Œ๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 


์˜ค๋Š˜์€ ์ด๋ ‡๊ฒŒ ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด์„œ StatelessWIdget๊ณผ StatefulWidget์˜ ์ฐจ์ด์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์•˜์Šต๋‹ˆ๋‹ค.

 

ํ•œ๋งˆ๋””๋กœ ์ •๋ฆฌํ•˜๋ฉด ๋ฐ”๋€” ํ•„์š”๊ฐ€ ์—†๋Š” ํ™”๋ฉด์€ Stateless ํ™”๋ฉด์ด ๋ฐ”๋€Œ์–ด์•„์•ผ ํ•˜๋ฉด Stateful ์œ„์ ฏ์„ ์‚ฌ์šฉํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค!

 

ํ˜น์‹œ๋ผ๋„ ํ‹€๋ฆฐ์ ์ด ์žˆ๊ฑฐ๋‚˜ ๊ณ ์น  ๋ถ€๋ถ„์ด ์žˆ๋‹ค๋ฉด ๋Œ“๊ธ€๋กœ ์•Œ๋ ค์ฃผ์„ธ์š”!

728x90
๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€