Flutter - Widget / Stateless, Stateful Widget lifecycle

플러터는 플러터나 혹은 여러 라이브러리로 제공되는 위젯들의 결합을 통해서 쉬운 프로그래밍을 지원한다. 그런데 플러터에서 사용하는 위젯은 불변한다는 원칙을 가지고 있다. 즉 위젯은 변하지 생성과 동시에 해당 상태를 변화시키지 않는다는 것이다. 하지만 코드를 수정하다보면 위젯을 변경시킬 때가 많은데, 불변의 법칙이 어겨진 것일까?

그렇지 않다. 프로그래머들은 코드 작성 시 코드를 변경한다고 생각하지만 실제로 플러터는 해당 위젯을 완전히 삭제하고 새로운 위젯을 새로 만드는 과정을 통해서 변경사항을 나타낸다. 예를 들면

아래에서 appBar 위젯을 통해서 Webview 라이브러리를 사용해 표현한 화면 상단에 ProCopier이라는 이름의 바를 하나 생성해놓고 색상을 회색에 가까운 색으로 설정한 것을 볼 수 있다. 

여기서 우리가 만약 녹색으로 색을 바꾼다면

실제로는 grey 색상의 옵션값을 가진 appBar 하나를 삭제하고 새로운 appBar을 만들어 적용한다는 것이다.

 

StatelessWidget's life cycle?

StatelessWidget은 사용자 지정 위젯이라고 간단히 설명할 수 있겠는데, 즉 사용자가 원하는 위젯들의 결합을 만들어 하나의 위젯처럼 사용할 수 있도록 하는 것이다. 이러한 StatelessWidget은 Constructor로 생성이 되고, 생성 되자마자 build함수가 실행된다. 이러한 StatelessWidget도 위젯이기에 변경 필요 시 새로운 위젯을 만들며 하나의 StatelessWidget은 lifecycle동안 한 번만 build함수를 실행한다.

 

StatefulWidget's life cycle?

StatefulWidget은 Stateless보다 조금은 나누어져 있는데, StatefulWidget과 State라는 클래스로 나누어져 있다. 즉 StatefulWidget 이름이 곧바로 의미하는 바, 상태관리가 가능한 위젯이라는 것이고 즉 이러한 상태관리를 위해 따로 State클래스를 하나 더 둔다(StatefulWidget 또한 위젯이기에 불변의 법칙을 지킨다). 상태관리를 위해선 build함수를 여러 번 불러야 할 필요성이 있다.

 

 

StatefulWidget의 생명주기는 기본적으로 (1)Constuctor가 불리면, (2)createState가 요청된다. 이러한 createState 함수로 State가 생성되는데, 생성이후 (3)initState()가 불린다. initState()는 상태를 초기화하는 과정으로 생성 시 한번 만 불리는 함수이다. 이후 (4)didChangeDependencies라는 함수가 불리고(나중에 설명) State가 (5)Dirty 상태로 변화한다.

Dirty 상태가 되면 (6)build가 불리게 되며, build이후 state가 (7)Clean 상태가 된다. 이러한 clean 상태에선 didUpdateWidget과 setState, deactivate 세 가지 방향으로 나아갈 수 있으며 삭제하라는 시그널을 받을 시 (8)deactivate(거의 사용은 안함)이후 (9)dispose를 거쳐 끝내게 된다.

 

이러한 과정이 StatefulWidget의 기본적인 생명주기인데, 

만약 파라미터가 바뀌었을 때 StatefulWidget의 생명주기는  Constructor 시행 이후에, createState가 시행되지 않는다. 즉 바로 기존에 Stateful Widget이 가지던 State를 찾아 해당 (2)State로 넘어간 이후, (3)didUpdateWidget(이름 그대로 바뀐 값을 업데이트) 함수가 시행된다. 이때 상태는 무조건 clean 상태이고, 여기서 바뀐 값으로 빌드해야 하므로 state를 (4)dirty로 설정 이후 (5)build, 이후 (6)clean state가 된다.

 

setState 실행 시 생명주기

setState는 state 내부에서 실행할 수 있는 함수인데, 현재까진 위젯의 파라미터를 변경하면서(외부 인자를 변경) 위젯 상태를 변경하는 것인데 setState는 state내부에서 위젯 상태를 변경하는 것이다. 이러한 기능이 StatefulWidget을 많이 사용하는 이유라고 할 수 있는데, clean 상태에서 (1)setState가 실행되면 state가 (2)dirty로 변경되며, 이후 (3)build를 실행한다, 이후 (4)clean으로 state가 설정된다