[Flutter] 위젯의 상태에 대한 이야기

Angela Jeong·2024년 4월 19일

Flutter & Dart 개념 잡기

목록 보기

4/18

지난 글에서 Flutter의 위젯에 대해 알아보았다. 이어서 상태에 대해 알아보자!

Flutter의 위젯이란? 👉 Flutter의 위젯이란?

위젯의 상태란?

Flutter는 선언형 UI를 사용한다.

선언형 UI란 특정 UI 요소의 변경이 필요할 때마다 해당 UI 요소를 새로 만들어 내는 방식인데 상태가 바뀔 때마다 뷰를 다시 그린다고 생각하면 된다.

예를 들어 Checkbox를 만든다고 해보자. onChanged의 value가 true, false가 되는지에 따라 Checkbox는 체크가 된 상태이거나, 체크 해제가 된 상태가 될 것이고 Flutter는 변경된 상태에 따라 UI를 빌드할 것이다.

Checkbox(
  onChanged: ...
  value: true
  )

즉, 상태는 제시간에, 특정 지점에서, UI 생성에 필요한 모든 데이터로 생각하면 된다.

Flutter는 상태를 기반으로 위젯을 구축하며 UI를 언제든 재구축하기 위해 이 상태를 필요로 한다.

앱의 상태란 앱이 실행될 때 메모리에 존재하는 모든 것이며 UI 재구축을 위해 필요한 데이터다.

Stateless Widget

상태가 없는 위젯이다. (정적이다)
화면이 로드될 때 한 번만 그려지는 위젯이다. (한번 그려지면 변화가 없다)
위에서 상태란 데이터라고 설명했는데 Stateless 위젯은 변경이 필요한 데이터가 없다고 이해하면 된다. 이벤트 혹은 사용자 상호작용에 의해 동작하지 않는다.
ex) Text, icon, Container, image

Stateful Widget

상태가 있는 위젯이다.
위젯이 동작하는 동안 데이터 변경이 필요한 경우 화면을 다시 그려서 변경된 부분을 위젯에 반영하는 동적인 위젯인 것이다.
데이터를 받거나, 사용자 상호 작용에 의해 모양이 바뀐다.
상태에 대해 설명할때 활용한 Checkbox 위젯이 이에 해당한다.
ex) Button, Listview, 애니메이션, Text Field

Stateless Widget: 한 번만 Build 과정이 발생하며 한번 그려진 화면은 계속 유지된다.
Stateful Widget: 상태 변경 발생 시 다시 Build 하는 과정이 일어나며 동적 화면을 구현할 수 있다.
*Stateless 위젯은 렌더링이 필요한 경우에만 다시 그려지기 때문에 성능이 향상될 수 있다는 장점이 있다. 따라서 Stateful Widget만 사용할 수는 없다!

MyApp은 StatelessWidget을 상속하고, build() 함수를 @override 한다.
build() 함수는 parameter로 context (context = 부모 Wiget의 정보)를 받고 있고, Wiget 타입을 return한다.

MyApp은 StatefulWidget 을 상속 받아서 _createState() 함수를 @override한다.
_createState() 함수는 _MyAppState() Class를 생성하고, State를 상속 받아 build() 함수를 @override 한다.
Stateful 위젯은 _createstate() 메소드로 State(상태)를 생성한다.

Ephemeral State와 App State

Ephemeral State (임시 상태/로컬상태)

임시상태는 특정 StatefulWidget에 국한된 상태를 말하는데, 말그대로 단일 위젯에만 포함되는 상태로 다른 위젯들은 이 위젯의 상태에 대해 몰라도 된다.
즉, 해당 위젯에만 영향을 미친다는 의미이다.
사용자가 앱을 닫았다가 다시 시작하면 초기값으로 재설정되도 되는 상태이다.
setState() 메서드를 사용하여 UI를 업데이트 하고, dispose될 때 함께 소멸되므로 다른 위젯과 공유되지 않는 것이다.
ex) TextField 위젯에서 사용자 입력 관리, ListView에서 사용자의 스크롤 위치를 기억하는 기능

App State (앱 상태)/ global state