상태관리 시리즈 2 – StatefulWidget 생명주기 완전 정복

Flutter에서 상태 관리는 단순히 setState()만 알면 끝날까요?

UI가 언제 다시 그려지고, 리소스는 언제 정리되는지 알지 못한다면, 앱은 예상치 못한 동작을 하게 됩니다.

 

이번 글에서는 StatefulWidget이 앱 안에서 어떻게 생성되고,

어떤 과정을 거쳐 화면에 표시되며,

마지막에 어떻게 정리되는지를 전체 흐름으로 살펴보겠습니다.

 

 

 

---

StatefulWidget의 생명주기란?

StatefulWidget은 내부 상태(state)의 변화에 따라
build()가 다시 실행되고 UI가 갱신되는 구조입니다.

그런데, 이 build가 언제 다시 실행되는지,
또 dispose()는 정확히 언제 불리는지 명확하게 아시나요?

Flutter는 위젯을 효율적으로 다시 그리기 위해 Dirty / Clean 상태로 나누고,
정해진 생명주기 메서드를 순차적으로 호출합니다.

이 흐름을 알면 setState()의 타이밍은 물론,
리소스 누수나 예상 못한 상태 꼬임을 예방할 수 있어요.

 

 

 

 

 

 

---

StatefulWidget 생명주기 요약표

메서드	설명	호출 시점
createState()	연결된 State 객체 생성	위젯 최초 생성 시
initState()	상태 초기화 로직 수행	트리에 삽입 직후 단 1회
didChangeDependencies()	종속성 변경 감지	initState() 직후, 또는 InheritedWidget 변경 시
build()	UI 구성	Dirty 상태일 때마다 호출
setState()	상태 변경 트리거	호출 즉시 Dirty 마킹
didUpdateWidget()	부모 위젯으로부터 새 인스턴스를 수신	기존 State 유지됨
deactivate()	트리에서 제거되기 직전	재삽입 가능성 있음
dispose()	영구 제거 직전 호출	리소스 해제 처리 시점

 

 

 

 

 

 

---

🔁 생명주기 흐름 다이어그램

아래는 Flutter에서 StatefulWidget이 생성 → 갱신 → 제거까지
어떻게 순차적으로 흐르는지를 시각화한 그림입니다.

 

 

 

 

---

🔍 흐름 해설 – 3단계로 나눠보기

1. Creation (생성 단계)

메서드	역할
createState()	상태 객체를 생성합니다
initState()	상태 초기화, 컨트롤러 생성 등
didChangeDependencies()	의존하는 상위 데이터 변경 감지

 

 

2. Update Cycle (UI 갱신 단계)

메서드	역할
setState()	Dirty 마킹 후 다음 프레임에 build() 호출
build()	현재 상태에 따라 UI 갱신
didUpdateWidget()	부모 위젯에서 새로운 인스턴스가 전달됨

 

 

3. Disposal (제거 단계)

메서드	역할
deactivate()	위젯이 트리에서 분리되기 직전 호출
dispose()	위젯이 완전히 제거될 때, 리소스 정리 필요

 

 

 

 

 

---

🧠 Dirty vs Clean 상태란?

Flutter는 전체 위젯 트리를 매 프레임마다 다시 그리지 않습니다.
대신 "Dirty 상태"로 표시된 위젯만 선별해 build()를 다시 호출하죠.

 

 

개념	정의
Dirty 상태	setState() 호출 직후. build() 재실행 필요
Clean 상태	UI가 최신 상태로 유지됨. 빌드 불필요

 

 

💡 setState()를 부르면 Dirty로 바뀌고,

 

다음 프레임에서 build()가 실행된 후

 

다시 Clean 상태로 돌아갑니다.

 

 

 

---

📌 실무에서 주의할 점

• initState()는 1회만 실행되므로, 초기화할 리소스는 여기에!
• didChangeDependencies()는 context로부터 상위 데이터를 받을 때 유용합니다.
• dispose()에서는 컨트롤러나 스트림, Timer 등 반드시 해제하세요.
• didUpdateWidget()은 부모 위젯이 재빌드될 때 상태를 유지하면서 내부 데이터를 갱신할 수 있는 기회입니다.

 

 

---

📚 다음 글 예고

다음 글부터는

상태를 변경하는 핵심 메서드

 

setState()를 중심으로,

UI가 어떻게 바뀌는지,

 

어떤 구조로 짜야

 

깔끔하게 동작하는지를

 

실습과 함께 따라가 볼 예정입니다.

 

작은 상태 변화부터 시작해,

 

실무에서 흔히 마주치는 예제들까지

 

단계적으로 다룰 예정이니

끝까지 따라와 주세요!