[Flutter] 위젯 생명주기

위젯 생명 주기란?

위젯이 화면에 그려지는 순간부터 삭제되는 순간까지의 주기를 의미함.

플러터에서 UI를 표현할 때 사용되는 위젯인 `StatelessWidget`과 `StatefulWidget`이 있음

 

이걸 왜 알아야하냐?

1. UI 상태 관리: `StatefulWidget`은 상태를 가지는 위젯으로, 사용자 인터페이스의 상태를 관리하는 데 사용됨.
   위젯이 화면에 표시되고 변경될 때마다 생명주기 메서드가 호출되며, 이를 통해 화면의 상태를 업데이트하고 반응적인 UI를 구현가능.
   
   
2. 상태 변경 감지: `StatefulWidget`의 생명주기 메서드를 이용하면 상태의 변화를 감지하고, 이에 따라 필요한 작업을 수행할 수 있음.
   예를 들어, 사용자의 입력에 따라 화면을 업데이트하거나 데이터를 로드하는 등의 작업을 수행할 수 있음.
   
   
3. 자원 관리: App에서 사용되는 자원(메모리, 네트워크 등)을 효율적으로 관리하려면 `StatefulWidget`의 생명주기를 이해해야함.
   필요한 자원을 적절하게 할당하고 해제하는 작업을 생명주기 메서드 내에서 수행할 수 있음.
   
   
4. 문제 해결 및 디버깅: App에서 예기치 않은 동작이나 버그가 발생했을 때 `StatefulWidget`의 생명주기를 분석하면 문제의 원인을 찾아낼 수 있음. 특정 생명주기 단계에서 발생하는 문제를 파악하여 수정할 수 있음.
   
   
5. 성능 최적화: 상태 변화에 따른 화면 업데이트를 효율적으로 처리하여 성능을 최적화할 수 있음.
   예를 들어, 불필요한 업데이트를 방지하거나 비용이 큰 작업을 최소화할 수 있음.
   
   
6. 동작 예측: `StatefulWidget`의 생명주기를 이해하면 위젯의 동작을 예측할 수 있음.
   화면이 언제 업데이트되는지, 어떤 순서로 메서드가 호출되는지 등을 알고 있으면 개발자가 의도한 동작을 정확하게 제어할 수 있음.

요약하자면, `StatefulWidget`의 생명주기를 알아야 하는 이유는 App의 UI 상태 관리, 상태 변경 감지, 자원 관리, 문제 해결 및 디버깅, 성능 최적화, 동작 예측 등 다양한 측면에서 개발과 유지보수의 품질을 높일 수 있기 때문임.

---

`StatelessWidget`

상태가 없는 위젯이라는 뜻 

StatelessWidget 상태 전이

먼저 `StatelessWidget`이 빌드되면 생성자가 실행됨. 이어서 필수로 `override`해야 하는 `build()`함수가 실행됨.

마지막으로 `build()`함수에 반환한 위젯이 화면에 렌더링됨.

 

플러터에서 모든 위젯은 `Widget`클래스를 상속하고, `Widget`클래스는 불변특성을 갖고있음.

불변이란, 클래스를 한 번 생성하고 나면 속성을 변경할 수 없다는 뜻임.

 

그런데 위젯의 속성을 변경해야 할 때가 분명히 있음. 예를 들면 생성자에 새로운 파라미터가 입력되는 경우가 있음.

`build()`함수에서 파라미터 값을 사용하고 있다면 변경된 파라미터를 기반으로 `build()`함수를 재실행 해줘야함.

하지만!! `StatelessWidget`은 불변이기 때문에 한 번 생성된 인스턴스의 `build()`함수는 재실행 되지 않음!

대신 인스턴스를 아예 새로 생성한 후 기존 인스턴스를 대체해서 변경 사항을 화면에 반영해야함.

---

`StatefulWidget`

`StatefulWidget`은 외부에서 위젯 생성자의 파라미터를 변경해주면 위젯이 새롭게 생성되고 `build()`가 실행되기까지 과정은 `StatelessWidget`과 동일함.

 

`StatefulWidget`은 `Widget`클래스와 `State`클래스 두 개로 구성되어 있음.

 

우선, 실습에 쓰였던 것이기 때문에.. 아래의 생명주기를 먼저 공부해보겠음

• 상태 변경이 없는 생명주기
• `StatefulWidget` 생성자의 파라미터가 변경됐을 때 생명주기
• `State`자체적으로 `build()`를 재실행할 때 생명주기

---

상태 변경이 없는 생명주기

상태 변경이 없는 생명주기는 위젯이 화면에 나타나며 생성되고 화면에서 사라지며 삭제되는 과정을 의미함.
-> 중간에 위젯의 상태가 변경되지 않음.

상태 변경이 없는 생명주기

---

`StatefulWidget` 생성자의 파라미터가 변경됐을 때 생명주기

`StatefulWidget`도 하나의 클래스이므로 파라미터를 입력받을 수 있음! 위젯이 생성된 후 삭제가 되기 전 파라미터가 변경되면 다음 생명주기가 실행됨.

---

`State` 자체적으로 `build()`를 재실행할 때 생명주기

`StatelessWidget`은 생성될 때 `build()`함수가 한 번 실행되고 절대로 다시 실행되지 않음.

`StatefulWidget`은 `StatefulWidget`클래스와 `State`클래스로 구성되어 있는데, `State`클래스는 `setState()`함수를 실행해서 `build()`함수를 자체적으로 재실행 할 수 있음

State 자체적으로 build()를 재실행할 때 생명주기

---

그럼, StatefulWidget 위젯의 생명주기를 간단하게 요약해보겠음

StatefulWidget 위젯의 생명주기는 아래와 같이 8가지로 구분할 수 있음.

 

1. `createState()`
   이 메서드는 `StatefulWidget`의 상태를 관리하는 `State` 객체를 생성함.
   `StatefulWidget`은 상태가 변할 수 있는 요소이므로, 이 상태를 관리하는 `State` 클래스가 필요함.
   `StatefulWidget`이 최초로 생성될 때, 먼저 `createState()` 메서드가 호출됨.
   
   
2. `initState()`
   이 메서드는 `State` 객체가 초기화될 때 호출되며, 일회성 작업을 수행하는데 주로 사용됨.
   예를 들어, 초기 데이터 로드나 컨트롤러 초기화 등이 여기에 해당됨.
   `createState()` 메서드가 호출되고 나면, 이어서 `initState()` 메서드가 호출됩니다. 
   
   
3. `didChangeDependencies()`
   이 메서드는 처음 위젯이 생성될 때보다 많이 호출되는데, 이전에 의존성이 변경되었을 때 실행됨.
   데이터를 가져오거나 업데이트하는데 활용할 수 있음.
   만약 상위 위젯이나 `InheritedWidget` 등의 종속성이 변경되면, `didChangeDependencies()` 메서드가 호출됨.
   
   
4. `build()`
   이 메서드에서는 사용자 인터페이스의 모습을 반환하는 역할.
   `build()` 메서드는 매번 상태가 변경될 때마다 호출되며, 화면을 업데이트하는데 사용.
   위의 단계들이 완료되면, Flutter 프레임워크는 `build()` 메서드를 호출하여 화면을 그림. 
   
   
5. `didUpdateWidget()`
   여기서는 새로운 위젯과 이전 위젯의 차이점을 처리하는 로직을 구현할 수 있음.
   상위 위젯이 다시 렌더링되어 해당 `StatefulWidget`이 재구성될 때, `didUpdateWidget()` 메서드가 호출됨. 
   
   
6. `setState()`
   사용자가 상호작용하여 `StatefulWidget`의 상태가 변할 때, `setState()` 메서드를 호출하여 상태를 업데이트함.
   이 메서드를 호출하면 Flutter는 해당 위젯을 다시 렌더링하고 화면을 업데이트함.
   
   
7. `deactivate()`
   이 메서드는 위젯이 화면에서 제거되기 전에 호출되며, 필요한 정리 작업을 수행하는데 사용.
   `StatefulWidget`이 더 이상 활성 상태가 아니게 되면, `deactivate()` 메서드가 호출됨.
   
   
8. `dispose()`
   이 메서드는 `State` 객체의 정리 작업을 수행하는데 사용되며, 메모리 누수를 방지하고 리소스를 해제하는데 중요함.
   `StatefulWidget`이 파괴될 때, `dispose()` 메서드가 호출됨.