[TIL-005] Flutter 위젯 생명 주기(Widget Life Cycle)

위젯 생명 주기

쉽게 말해 위젯이 만들어지고, 변화하고, 사라지는 과정을 말한다.

이 과정에서 실행되는 메서드들이 있고, 위젯의 구분( StatelessWidget과 StatefulWidget )에 따라 생명 주기도 달라진다.

 

알아야 하는 이유

위젯이 생성부터 삭제 및 종료되는 과정을 이해하면 메모리 누수를 방지하고, 비효율적인 UI 갱신을 막으며, 올바른 상태 관리를 할 수 있다.

특히 위젯이 생성될 때, 생성이 완료될 때, 사라질 때 특정 작업을 수행해야 하는 경우가 많기 때문에, 위젯의 라이프사이클을 이해하는 것이 중요하다.

 

StatelessWidget  생명 주기

StatelessWidget Life Cycle

 

StatelessWidget의 생성자가 호출 되면 바로 `build`메서드가 실행되어 위젯을 화면에 그린다.

StatelessWidget은 변하지 않는 상태를 가지므로, 한 번 생성된 이후에는 `build` 메서드가 다시 실행되지 않는다.

 

StatefulWidget  생명 주기

StatefulWidget Life Cycle

 

StatefulWidget은 앱이 처음 실행 될 때, 위젯의 상태가 변경될 때, 부모 위젯이 다시 그려질 때 `build`메서드가 호출되어 화면을 그린다.

그러나 `build`메서드가 호출되는 과정은 각각 다르다.

• 위젯이 처음으로 생성될 때의 순서
  1. StatefulWidget의 생성자가 호출
  2. `createState`메서드 호출
  3. `initState`메서드 호출
  4. `didChangeDependencies`메서드 호출
  5. ` build`메서드 호출되어 위젯이 화면에 그려진다.
• 위젯의 생성된 후, 위젯의 상태가 변경될 때의 순서
  1. `setState`메서드 호출하여 상태를 변경
  2. `build`메서드 호출하여 변경된 상태를 화면에 그린다.
• 부모 위젯이 다시 그려질 때의 순서
  1. `didUpdateWidget`메서드 호출
  2. 상태를 확인하여 변경 사항이 있을 경우 `build`메서드 호출

 

createState 메서드

StatefulWidget이 처음 생성될 때 호출되며 StatefulWidget과 연결된 `State`객체를 생성한다.

 

initState 메서드

`State` 객체가 처음 생성될 때 한 번 호출되며 API 호출과 같은 초기화 작업을 수행할 수 있는 곳이다.

@override
void initState() {
  super.initState();
  // 초기화 작업
}

`@override` 키워드를 이용해 오버라이딩을 해야하며, `super.initState()`를 먼저 호출해야 한다.

 

didChangeDependencies 메서드

`State` 객체가 처음 생성된 후, 또는 `State` 객체의 종속성이 변경될 때 호출된다.

@override
void didChangeDependencies() {
  super.didChangeDependencies();
  // 종속성이 변경될 때 작업
}

`@override` 키워드를 이용해 오버라이딩을 해야하며, `super.didChangeDependencies()`를 먼저 호출해야 한다.

 

build 메서드

`State` 객체가 UI를 그릴 때마다 호출되며 항상 위젯을 반환한다.

 

didUpdateWidget 메서드

부모 위젯이 자식 위젯을 다시 빌드할 때 호출되며 이전 위젯과 새 위젯을 비교하여 상태를 업데이트할 수 있다.

@override
void didUpdateWidget(MyWidget oldWidget) {
  super.didUpdateWidget(oldWidget);
  // 위젯이 업데이트될 때 작업
}

`@override` 키워드를 이용해 오버라이딩을 해야하며, `super.didUpdateWidget(oldWidget)`를 먼저 호출해야 한다.

 

setState 메서드

상태를 변경할 때 호출하는 메서드. 콜백함수 내에서 상태 변경 작업을 해야 한다.

void _updateState() {
  setState(() {
    // 상태 변경 작업
  });
}