260730_강의 정리 (Dart와 Flutter 2)

 

mobile · flutter

Flutter와 Dart 정리 — Widget, State, Lifecycle

• Dart 기반 크로스플랫폼 GUI 프레임워크, Widget 트리로 UI 구성
• StatelessWidget vs StatefulWidget, setState()로 리빌드 제어
• Widget Lifecycle과 BuildContext로 화면 생명주기 관리

🎯

1. Dart 언어와 Flutter 개요

Dart 기반으로 동작하는 GUI 프레임워크 — 하나의 코드로 여러 플랫폼 대응

• GUI programming — 그래픽 기반 사용자 인터페이스 구성
• Event based programming — 사용자 입력(터치, 클릭)에 반응하는 방식
• Component(Widget) based programming — 모든 UI 요소를 위젯 단위로 조립
• Object-oriented programming — 클래스와 객체 기반 설계
• Cross platform — 하나의 코드베이스로 iOS/Android/Web 대응
• AOT/JIT 컴파일 지원 — 개발 중엔 JIT(Hot Reload), 배포 시엔 AOT(고속 실행)

💡 새 개념

JIT / AOT 컴파일 Just-In-Time / Ahead-Of-Time

• JIT — 개발 중 실시간 컴파일, Hot Reload 가능
• AOT — 배포 전 네이티브 코드로 미리 컴파일, 실행 속도 빠름

개발할 땐 JIT로 빠르게 수정 확인, 앱스토어 배포 시엔 AOT로 빌드

변수 선언 키워드 dynamic / var / final / const

• dynamic — 타입 자유, 런타임에 타입 결정
• var — 선언 시 타입 추론, 이후 타입 고정
• final — 런타임에 한 번 값 할당 후 불변
• const — 컴파일 타임에 값이 정해지는 완전한 상수

final은 실행 중 계산된 값 저장 가능, const는 실행 전부터 값이 고정돼야 함

Dart는 컴파일 방식을 상황에 따라 전환하며, 개발 속도(JIT)와 실행 속도(AOT)를 동시에 확보하는 전략을 씀

🧩

2. Widget 기본 개념

Flutter의 모든 화면 요소는 Widget이다 — 데이터 표현, 레이아웃, 스타일, 위치 정렬까지 전부 위젯으로 처리

display 데이터 표현 위젯

화면에 보여줄 실제 콘텐츠를 담당

• Text, Image, Icon, Card, ListView, DataTable, Checkbox, Radio

layout 레이아웃 위젯

다른 위젯들을 배치하는 뼈대 역할

• Row, Column, Scaffold, Stack

style 스타일 위젯

텍스트나 색상 등 시각적 속성 지정

• TextStyle, Color

align 정렬 위젯

자식 위젯의 위치와 여백을 조정

• Center, Padding

위젯은 "화면에 보이는 모든 것"이라고 이해하면 됨 — 텍스트 한 줄도, 버튼도, 화면 전체 레이아웃도 위젯

⚖️

3. StatelessWidget vs StatefulWidget

"상태(데이터)가 바뀌는가?" — 두 위젯을 가르는 기준

구분	StatelessWidget	StatefulWidget
상태 변경	불가능 (한 번 그려지면 고정)	가능 (setState()로 재빌드)
사용 예	고정 텍스트, 아이콘	카운터, 폼 입력, 애니메이션
내부 구조	build()만 존재	State 객체 별도 존재

💡 새 개념

setState()

• 상태 값을 변경하고 Flutter에게 "다시 그려야 한다"고 알리는 함수
• 호출 시 dirty flag가 true로 바뀌며 build() 재실행 트리거

카운터 앱에서 버튼 클릭 시 setState(() => count++)로 화면 숫자 갱신

StatefulWidget 다이어그램에서 STATE가 Widget model을 감싸는 구조로 표현되는 이유는, 위젯 자체는 불변이고 State 객체가 별도로 값을 들고 있다가 재빌드를 트리거하기 때문

🌳

4. Widget Tree와 BuildContext

위젯들은 부모-자식 관계의 트리 구조로 조립되며, 각 위젯은 자신의 트리 위치 정보(BuildContext)를 가짐

1

Scaffold

화면 전체 뼈대, 하위에 여러 named parameter를 가짐

2

appBar 파라미터 → AppBar 위젯

화면 상단 바 영역 지정

3

body 파라미터 → Center → Column → Text

중첩 레이아웃 — Center 안에 Column, 그 안에 Text

4

floatingActionButton 파라미터 → FloatingActionButton → Icon

화면 우하단 플로팅 버튼과 그 안의 아이콘

AppBar, Center, FloatingActionButton은 서로 형제 위젯이 아니라, Scaffold의 서로 다른 이름 붙은 파라미터(appBar:, body:, floatingActionButton:)에 각각 들어가는 구조임 — 나란히 그려져 있어도 병렬 관계가 아님

💡 새 개념

BuildContext

• 위젯이 트리 안 어디에 위치하는지를 나타내는 참조 객체
• 부모 위젯 정보 탐색, 테마·미디어쿼리 접근 등에 사용

Navigator.of(context).push(...)처럼 항상 context를 통해 트리 정보에 접근

🔄

5. Widget Lifecycle

StatefulWidget은 생성부터 소멸까지 정해진 순서의 생명주기를 거침

1

createState()

StatefulWidget으로부터 State 객체 생성

2

initState()

State 객체 초기화, 최초 1회만 실행

3

didChangeDependencies()

의존 데이터 변경 시 호출

4

build()

실제 UI 렌더링, dirty=true일 때마다 재실행

5

setState() / didUpdateWidget()

상태 변경 시 dirty=true로 전환 → build() 재호출

6

deactivate()

트리에서 일시적으로 제거될 때

7

dispose()

완전히 제거, 리소스 정리 (mounted=false)

dirty flag가 true가 되는 경로는 두 가지 — setState() 직접 호출, 또는 부모 위젯이 재빌드되며 didUpdateWidget()이 호출되는 경우

🧭

6. Navigator와 화면 전환

화면 이동은 Stack(스택) 구조로 관리됨

• Navigator — 화면(Route)들을 스택 형태로 관리하는 객체
• push — 새 화면을 스택 위에 쌓음
• pop — 현재 화면을 스택에서 제거하고 이전 화면으로 복귀

💡 새 개념

Hot Reload vs Hot Restart

• Hot Reload — 코드 변경분만 반영, 상태(State) 유지, 수 초 내 반영
• Hot Restart — 앱 전체 재시작, 상태 초기화

UI 스타일만 바꿀 땐 Hot Reload, 초기화 로직 바꿀 땐 Hot Restart

정리
· Flutter는 "모든 것이 Widget"이라는 원칙 위에 설계됨
· StatelessWidget/StatefulWidget 구분, Widget Tree 구조, Lifecycle 흐름이 서로 맞물려 동작