플러터:변하는 화면(StatefulWidget) - 편집 역사

2026년 1월 7일 (수) 00:38에 Sam님의 편집

2026-01-07T00:38:41Z

← 이전 판		2026년 1월 7일 (수) 00:38 판
4번째 줄:		4번째 줄:
	화면 변화 반영하기.		화면 변화 반영하기.

	어플은 정적인 화면만으로 구성되진 않는다. 화면을 구성하는 요소에 변화를 주어야 하는데, 이때 상태(state)를 어떻게 관리하고 화면에 반영하는지가 매우 중요하다.		* 어플은 정적인 화면만으로 구성되진 않는다. 화면을 구성하는 요소에 변화를 주어야 하는데, 이때 상태(state)를 어떻게 관리하고 화면에 반영하는지가 매우 중요하다.
			* 처음 개념 잡기가 어려운데, 천천히 따라가보길.

			=== 기본 방식 ===

			* StatefulWidget을 제작하여 createState 함수를 오버라이딩 함. 단순하게 특정 상태를 반환한다는 내용.
			* 특정 상태는 정의되어 있지 않기 때문에 State를 작성하여 build 함수를 오버라이딩 함.
			* 변화를 가할 함수를 상태 내부에 작성함. 해당 함수에서 setState 함수가 작동하게끔 구성.
			* setState 함수의 작동이 끝나면 StatefulWidget에 다시 그리라는 신호를 보냄, 그러면 StatefulWidget이 State를 기반으로 다시 작성됨.

	= 기본 카운터 앱 전체 코드 =		= 기본 카운터 앱 전체 코드 =
	아래는 기본적으로 많이 제공되는 예시인 기본 카운터 앱이다.<syntaxhighlight lang="dart">		아래는 기본적으로 많이 제공되는 예시인 기본 카운터 앱이다.<syntaxhighlight lang="dart">
22번째 줄:		31번째 줄:
	colorSchemeSeed: Colors.blue, // 전체적인 색상 팔레트 지정		colorSchemeSeed: Colors.blue, // 전체적인 색상 팔레트 지정
	),		),
	home: const MyHomePage(title: 'Flutter Demo Home Page'), // 첫 화면		home: const MyHomePage(title: 'Flutter Demo Home Page'), // 첫 화면. 굳이 변수로 전달할 필요는 없어 보이는데, 예제에선 학습용으로 둔 듯.
	);		);
	}		}

Sam: /* 개요 */

2025-12-15T08:43:58Z

개요

← 이전 판		2025년 12월 15일 (월) 08:43 판
2번째 줄:		2번째 줄:

	== 개요 ==		== 개요 ==
			화면 변화 반영하기.

	어플은 정적인 화면만으로 구성되진 않는다. 화면을 구성하는 요소에 변화를 주어야 하는데, 이때 상태(state)를 어떻게 관리하고 화면에 반영하는지가 매우 중요하다.		어플은 정적인 화면만으로 구성되진 않는다. 화면을 구성하는 요소에 변화를 주어야 하는데, 이때 상태(state)를 어떻게 관리하고 화면에 반영하는지가 매우 중요하다.
	~~----~~

	= 기본 카운터 앱 전체 코드 =		= 기본 카운터 앱 전체 코드 =
	<syntaxhighlight lang="dart">		아래는 기본적으로 많이 제공되는 예시인 기본 카운터 앱이다.<syntaxhighlight lang="dart">
	import 'package:flutter/material.dart';		import 'package:flutter/material.dart';

2025년 11월 16일 (일) 12:00에 Sam님의 편집

2025-11-16T12:00:57Z

← 이전 판		2025년 11월 16일 (일) 12:00 판
117번째 줄:		117번째 줄:
	\|-		\|-
	\|<code>setState()</code>		\|<code>setState()</code>
	\|State를 상속받은 클래스에서 <code>setState()</code>을 사용하면, 이 함수의 동작이 끝날 때 해당 클래스에 대한 것들을 새로 그린다.		\|<syntaxhighlight lang="dart">
			void _incrementCounter() {
			setState(() {
			_counter++;
			});
			}
			</syntaxhighlight>setState는 함수를 인자로 받는 함수이며, () {} 는 익명함수의 구조이다.
			State를 상속받은 클래스에서 <code>setState()</code>을 사용하면, 이 함수의 동작이 끝날 때 해당 클래스에 대한 것들을 새로 그린다.

	setState가 하는 일(핵심 원리)		setState가 하는 일(핵심 원리)

2025년 11월 16일 (일) 11:52에 Sam님의 편집

2025-11-16T11:52:39Z

← 이전 판		2025년 11월 16일 (일) 11:52 판
122번째 줄:		122번째 줄:

	# <code>_counter</code>를 변경.		# <code>_counter</code>를 변경.
	# 해당 State의 build() 함수를 다시 호출. 화면(UI)이 새 값을 반영해 다시 그려짐.		# 해당 State의 build() 함수를 다시 호출.
			# 화면(UI)이 새 값을 반영해 다시 그려짐.
	\|		\|
	\|}		\|}

			== 의문 ==

			=== State<MyHomePage> 대신 그냥 State로 쓰면 안되나? ===
			상속이나 오버라이딩에서 자연스레 생기는 의문인데, State와 위젯을 안전하게 연결하기 위해선 위처럼 써야 한다. 그냥 State를 쓰면 일반 State와 연결되어 상위 위젯의 값을 사용할 수 없다.

Sam: /* 기본 카운터 앱 전체 코드 */

2025-11-16T11:49:26Z

기본 카운터 앱 전체 코드

← 이전 판		2025년 11월 16일 (일) 11:49 판
102번째 줄:		102번째 줄:
	// 이 위젯이 사용할 State 객체 생성</syntaxhighlight>createState를 오버라이딩하는데, 타입은 State인데, 또 State 타입은 MyHomePage이고,		// 이 위젯이 사용할 State 객체 생성</syntaxhighlight>createState를 오버라이딩하는데, 타입은 State인데, 또 State 타입은 MyHomePage이고,
	createState의 반환은 _MyHomePageState 타입이다.		createState의 반환은 _MyHomePageState 타입이다.
	<code>_MyHomePageState</code> 객체를 반환하여 Flutter가 화면 상태 관리(State)를 연결하도록
			<code>_MyHomePageState</code> 객체를 반환하여 Flutter가 화면 상태 관리(State)를 연결하도록. 결과적으로 새로운 State가 생성된다.
	\|		\|
	\|-		\|-
109번째 줄:		110번째 줄:
	class _MyHomePageState extends State<MyHomePage> {		class _MyHomePageState extends State<MyHomePage> {
	// 실제로 상태를 가지고 동작하는 부분은 여기(State 클래스)		// 실제로 상태를 가지고 동작하는 부분은 여기(State 클래스)
	</syntaxhighlight>State를 상속받는데, MyHomePage를 타입으로 한 State를 상속받는다.		</syntaxhighlight>

			* State를 상속받는데, MyHomePage를 타입으로 한 State를 상속받는다.
			* <code>State</code> 안에서는 부모 <code>StatefulWidget</code>의 프로퍼티를 <code>widget</code>으로 접근한다.
	\|		\|
	\|-		\|-
118번째 줄:		122번째 줄:

	# <code>_counter</code>를 변경.		# <code>_counter</code>를 변경.
	# 해당 State의 build() 함수를 다시 호출.		# 해당 State의 build() 함수를 다시 호출. 화면(UI)이 새 값을 반영해 다시 그려짐.
	# 화면(UI)이 새 값을 반영해 다시 그려짐.
	\|		\|
	\|}		\|}

2025년 11월 16일 (일) 11:44에 Sam님의 편집

2025-11-16T11:44:14Z

← 이전 판		2025년 11월 16일 (일) 11:44 판
100번째 줄:		100번째 줄:
	@override		@override
	State<MyHomePage> createState() => _MyHomePageState();		State<MyHomePage> createState() => _MyHomePageState();
	// 이 위젯이 사용할 State 객체 생성</syntaxhighlight>createState를 오버라이딩하는데, 타입은 State인데, 또 State 타입은 MyHomePage이고,		// 이 위젯이 사용할 State 객체 생성</syntaxhighlight>createState를 오버라이딩하는데, 타입은 State인데, 또 State 타입은 MyHomePage이고,
			createState의 반환은 _MyHomePageState 타입이다.
	createState의 반환은 _MyHomePageState 타입이다.<syntaxhighlight lang="dart">		<code>_MyHomePageState</code> 객체를 반환하여 Flutter가 화면 상태 관리(State)를 연결하도록
			\|
			\|-
			\|State
			\|<syntaxhighlight lang="dart">
	class _MyHomePageState extends State<MyHomePage> {		class _MyHomePageState extends State<MyHomePage> {
	// 실제로 상태를 가지고 동작하는 부분은 여기(State 클래스)		// 실제로 상태를 가지고 동작하는 부분은 여기(State 클래스)
110번째 줄:		114번째 줄:
	\|<code>setState()</code>		\|<code>setState()</code>
	\|State를 상속받은 클래스에서 <code>setState()</code>을 사용하면, 이 함수의 동작이 끝날 때 해당 클래스에 대한 것들을 새로 그린다.		\|State를 상속받은 클래스에서 <code>setState()</code>을 사용하면, 이 함수의 동작이 끝날 때 해당 클래스에 대한 것들을 새로 그린다.


	setState가 하는 일(핵심 원리)		setState가 하는 일(핵심 원리)

	# <code>_counter</code>를 변경		# <code>_counter</code>를 변경.
	# 해당 State의 build() 함수를 다시 호출		# 해당 State의 build() 함수를 다시 호출.
	# 화면(UI)이 새 값을 반영해 다시 그려짐~~(Rebuild)~~		# 화면(UI)이 새 값을 반영해 다시 그려짐.
	\|		\|
	\|}		\|}

Sam: 새 문서: {{플러터}} == 개요 == 어플은 정적인 화면만으로 구성되진 않는다. 화면을 구성하는 요소에 변화를 주어야 하는데, 이때 상태(state)를 어떻게 관리하고 화면에 반영하는지가 매우 중요하다. ---- = 기본 카운터 앱 전체 코드 = import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({super.key}); @override...

2025-11-16T11:40:56Z

새 문서: {{플러터}} == 개요 == 어플은 정적인 화면만으로 구성되진 않는다. 화면을 구성하는 요소에 변화를 주어야 하는데, 이때 상태(state)를 어떻게 관리하고 화면에 반영하는지가 매우 중요하다. ---- = 기본 카운터 앱 전체 코드 = <syntaxhighlight lang="dart"> import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({super.key}); @override...

새 문서

{{플러터}}

== 개요 ==
어플은 정적인 화면만으로 구성되진 않는다. 화면을 구성하는 요소에 변화를 주어야 하는데, 이때 상태(state)를 어떻게 관리하고 화면에 반영하는지가 매우 중요하다.
----

= 기본 카운터 앱 전체 코드 =
<syntaxhighlight lang="dart">
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo', // 앱 이름
debugShowCheckedModeBanner: false, // 오른쪽 상단의 "debug" 띠 제거
theme: ThemeData(
colorSchemeSeed: Colors.blue, // 전체적인 색상 팔레트 지정
),
home: const MyHomePage(title: 'Flutter Demo Home Page'), // 첫 화면
);
}
}

class MyHomePage extends StatefulWidget {
// StatefulWidget = 상태(state)를 가지고 변경 가능한 화면을 만들 때 사용
final String title; // 화면 상단 AppBar에 표시할 제목

const MyHomePage({super.key, required this.title});

@override
State<MyHomePage> createState() => _MyHomePageState();
// 이 위젯이 사용할 State 객체 생성
}

class _MyHomePageState extends State<MyHomePage> {
// 실제로 상태를 가지고 동작하는 부분은 여기(State 클래스)

int _counter = 0; // 화면에 표시될 숫자 상태 값 (초기값 = 0)

void _incrementCounter() {
// FloatingActionButton을 눌렀을 때 실행되는 함수
setState(() {
// setState()를 호출해야 화면을 다시 그리게(Rebuild) 된다. 이 함수 동작이 끝나면 이 상태를 다시 그림.
_counter++; // 상태 값 증가
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
// widget.title → 부모(StatefulWidget)에서 받은 title 값
),

body: Center( // Center = 가운데로 정렬
child: Column( // Column = 세로로 위젯을 쌓는 레이아웃
mainAxisAlignment: MainAxisAlignment.center, // mainAxisAlignment.center → 세로 가운데 정렬
children: [
const Text('You have pushed the button this many times:'),
// 설명 문장 (고정 텍스트이므로 const 사용)
Text(
'$_counter', // 화면에 상태 값 표시
style: Theme.of(context).textTheme.headlineMedium, // 앱 테마에서 지정된 큰 글씨 스타일 사용
),
],
),
),

floatingActionButton: FloatingActionButton( // 오른쪽 아래 떠있는 버튼 (FAB)
onPressed: _incrementCounter, // 버튼 클릭 → 상태에 정의된 함수 실행
tooltip: 'Increment', // 버튼 길게 누르면 뜨는 설명
child: const Icon(Icons.add), // + 아이콘
),
);
}
}

</syntaxhighlight>

= 이해를 위한 추가 설명 =
{| class="wikitable"
!요소
!설명
!비고
|-
|<code>StatefulWidget</code>
|“상태를 가질 수 있는 위젯”. UI 틀(설계도) 역할
이를 상속한 클래스는 State를 작성해야 한다.<syntaxhighlight lang="dart">class MyHomePage extends StatefulWidget {
// StatefulWidget = 상태(state)를 가지고 변경 가능한 화면을 만들 때 사용
final String title; // 화면 상단 AppBar에 표시할 제목

const MyHomePage({super.key, required this.title});

@override
State<MyHomePage> createState() => _MyHomePageState();
// 이 위젯이 사용할 State 객체 생성</syntaxhighlight>createState를 오버라이딩하는데, 타입은 State인데, 또 State 타입은 MyHomePage이고,

createState의 반환은 _MyHomePageState 타입이다.<syntaxhighlight lang="dart">
class _MyHomePageState extends State<MyHomePage> {
// 실제로 상태를 가지고 동작하는 부분은 여기(State 클래스)
</syntaxhighlight>State를 상속받는데, MyHomePage를 타입으로 한 State를 상속받는다.
|
|-
|<code>setState()</code>
|State를 상속받은 클래스에서 <code>setState()</code>을 사용하면, 이 함수의 동작이 끝날 때 해당 클래스에 대한 것들을 새로 그린다.

setState가 하는 일(핵심 원리)

# <code>_counter</code>를 변경
# 해당 State의 build() 함수를 다시 호출
# 화면(UI)이 새 값을 반영해 다시 그려짐(Rebuild)
|
|}