[노마드코더] #4 Stateful Widgets

State

State · joseph-106/toonflix@463dee8

• StatelessWidget은 단지 build 메서드를 통해 정적인 UI를 출력하는 역할
• StatefulWidget은 위젯에 데이터를 저장하고 변화를 UI에 실시간 반영
• App의 State를 반환하는 createState 함수를 override하며, State 내에서 UI 구축
• App의 State를 상속받은 클래스의 필드 값으로 동적인 데이터 관리 (final 제거)
• 데이터는 String Interpolation으로 문자열에 넣거나 함수의 매개변수 등으로 활용
• IconButton 위젯으로 데이터를 변경하는 함수를 실행하는 아이콘 버튼 생성
• But, 단순히 이렇게 변수를 변경하는 방식은 Flutter UI에 적용되지 않음!

 

setState

setState · joseph-106/toonflix@afcb55a

• 데이터들이 변경될 때 위젯도 그 변화를 스스로 반영하게 하려면 setState 함수 사용
• 익명 함수를 포함한 setState 함수의 데이터 변경을 Flutter가 감지해 build 메소드 재실행
• (setState 함수 외부라도 같은 함수 안이라면 build 메소드가 동작은 하지만 가독성이 떨어짐)
• setState 함수 외에도 InheritedWidget이나 Riverpod 등 다양한 방식으로 UI 업데이트 가능
• 개발 과정에서는 print()로 콘솔에 데이터를 찍어보며 디버깅 (JS console.log()와 비슷)

 

BuildContext

자식 위젯에서 부모 위젯의 정보에 접근하려면?

BuildContext · joseph-106/toonflix@8464d6d

• MaterialApp theme 옵션의 ThemeData에서 사용할 위젯 커스텀 스타일 정의 가능
• Code Actions의 Extract Widget 기능으로 여러 자식 위젯을 분리해 관리하는 경우
• build 메소드의 기본 파라미터인 context는 부모 요소들의 모든 정보를 포함
• 즉, 자식 위젯에서 부모 context에 접근해 Theme 등의 다양한 정보 사용 가능
• 최상위 위젯까지 타고 올라갈 수 있지만 기본적으로 가장 가까운 부모 요소 접근

 

Widget Lifecycle

initState > build > dispose

• StatefulWidget에는 이벤트에 반응하는 생명 주기(life cycle)가 존재
• API나 부모 요소에 의존하는 상태 데이터를 초기화하는 경우 initState 메서드 override
• initState 메서드는 super.initState()를 포함하며, build 메서드보다 먼저 한 번만 호출
• 위젯이 위젯 트리에서 제거되기 전에 무언가를 취소하는 경우 dispose 메서드 override
• dispose 메서드는 super.dispose()를 포함하며, 위젯이 스크린에서 제거될 때 한번만 호출

 

본 내용은 노마드코더의 'Dart 시작하기'를 바탕으로 작성되었습니다