효과적인 앱 개발을 위한 Flutter 위젯 수명 주기 이해

May 03 2023

효율적인 Flutter 개발을 위한 위젯 수명 주기 방법 활용 가이드.

일반적으로 수명 주기는 생성부터 소멸까지의 단계를 나타냅니다. 설레임의 맥락에서도 마찬가지입니다.

일반적으로 수명 주기는 생성부터 소멸까지의 단계를 나타냅니다. 설레임의 맥락에서도 마찬가지입니다. 오늘 우리는 위젯 수명 주기 에 대해 논의할 것입니다 (앱 수명 주기와 혼동하지 마십시오).

Flutter 개발자로서 이러한 수명 주기 메서드를 활용하는 방법이 이 기사의 주요 의도이므로 재미있는 부분으로 이동하겠습니다.

생성상태()

Flutter에서 상태 저장 위젯을 생성하면 createState메서드가 즉시 호출되어 연결된 클래스의 상태 인스턴스를 반환합니다.

이것은 Flutter에서 모든 것이 변경 불가능하기 때문에 필수적입니다(상태 저장 위젯 포함). 가변성 작업을 분리하여 상태 클래스에 위임하는 것이 중요합니다. 이러한 방식으로 Flutter는 변경 불가능한 클래스를 변경 가능한 클래스처럼 보이게 하고 작동하도록 할 수 있으며 UI에서 모든 변경 사항을 볼 수 있습니다.

이는 작은 변화로 인해 전체 위젯 트리를 다시 만드는 것보다 Flutter가 상태 변수를 변경하고 최적화된 방식으로 변경 사항을 반영하는 것이 더 쉽기 때문에 성능상의 이점도 있습니다.

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => new _HomePageState();
}

사후 상태 생성이라는 첫 번째 방법입니다. 그리고 한 번만
호출됩니다 . 이 방법은 다음과 같이 사용할 수 있습니다.

늦은 변수 초기화
스트림 구독 등

@override
initState() {
  super.initState();
  _controller=TextEditingController();
  myStream.listen((data) {});
}

그렇다면 종속성은 정확히 무엇입니까?
위젯에서 MediaQuery.of를 사용한다고 가정 하면 위젯이 MediaQuery에 의존한다고 말할 수 있습니다. 따라서 MediaQuery 가 업데이트될 때마다 이 메서드가 트리거됩니다.

따라서 위젯이 Inherited Widget(미디어 쿼리, 테마, 제공자 등)에 의존하고 상속된 위젯 푸시 업데이트가 있을 때마다 이 메서드를 트리거한다고 말할 수 있습니다.

이 build()메서드가 트리거되면 개발자로서 여기에서 사용자 지정 논리를 사용해야 할 수 있는 시나리오가 많지 않지만 공식 문서에 따라 말합니다.

종속성이 변경될 때 비용이 많이 드는 작업(예: 네트워크 가져오기)을 수행해야 하며 해당 작업은 모든 빌드에 대해 수행하기에는 너무 비쌉니다.

예를 들어: 귀하로부터 Inherited Widget일부 값을 받을 수 있으며 해당 값을 기반으로 비용이 많이 드는 작업을 수행하고 UI에 표시해야 합니다. 빌드 방법에서 이 작업을 수행하고 싶지 않을 수 있으므로 didChangeDependencies이를 위한 완벽한 지점이 될 것입니다.

didUpdateWidget

이를 이해하기 위해 예를 들어보자. 당신은 Container빨간색이고 버튼 탭으로 파란색으로 변경합니다.

여기에서 이전 개체 인스턴스와 새 개체 인스턴스는 모두 같은 유형 runtimeType 이지만 데이터가 다르므로 이 경우 이 메서드가 트리거됩니다. 오래된 위젯도 받습니다 didUpdateWidget(Widget oldWidget).

@override
void didUpdateWidget(Widget oldWidget) {
  if (oldWidget.color != widget.color) {
  /// Your logic
  }
}

값 사이를 전환하기 위해 애니메이션에서 한 가지 가능한 시나리오를 사용할 수 있습니다.
다른 하나는 앱 요구 사항에 따라 특정 사용 사례가 될 수 있으며, 새 위젯 값에 따라 몇 가지 다른 작업을 수행합니다. 예: 새 스트림 구독 및 이전 스트림 구독 취소.

짓다()

이것은 프로그래머로서 사용자에게 보여주고자 하는 위젯을 반환해야 하는 중요한 방법입니다.

또한 이 메서드는 여러 번 트리거될 수 있으므로 이 메서드 내에서 비용이 많이 드는 작업을 수행하는 것은 좋지 않습니다 .

이 메서드는 잠재적으로 모든 프레임에서 호출될 수 있으며 위젯을 빌드하는 것 이상의 부작용이 없어야 합니다 .

setState((){})

setState((){})는 메서드를 매개 변수로 사용하고 내부적으로 markNeedsBuild()메서드를 호출하여 새 빌드를 트리거하는 메서드입니다.

/// Implementation of setState() in flutter 
@protected
void setState(VoidCallback fn) {
  final Object? result = fn() as dynamic;
  _element!.markNeedsBuild();
}

setState에 비동기 함수를 전달하면 안 됩니다. 내부적으로 미래가 해결될 때까지 기다리지 않으므로 원하는 UI 반영을 볼 수 없기 때문입니다.

setState(() {
  /// New State values
  color=Colors.red;
});

dispose() 메서드는 상태 개체가 제거될 때 호출됩니다. 이것은 수명 주기에서 트리거되는 마지막 메서드입니다.

따라서 개발자로서 다음을 수행할 수 있습니다.

스트림 구독 취소
컨트롤러 폐기
정지 애니메이션 등

상태 비저장 위젯에는 자체 변경 가능한 상태(이름에서 알 수 있음)가 없기 때문에 일부 수명 주기 메서드(예 initState: dispose등)가 여기에 없습니다.