์๋
ํ์ธ์ 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 ์์ ฏ์ ์ฌ์ฉํ๋ฉด ๋ฉ๋๋ค!
ํน์๋ผ๋ ํ๋ฆฐ์ ์ด ์๊ฑฐ๋ ๊ณ ์น ๋ถ๋ถ์ด ์๋ค๋ฉด ๋๊ธ๋ก ์๋ ค์ฃผ์ธ์!
๋๊ธ