[이론] StatefullWidget (1) 이론

들어가기 앞서...

StatefullWidget 을 알아볼것이다.

---

본문으로...

• Widget 이론을 알아보자!

1. Widget은 모두 "불변"의 법칙을 가지고 있다.

2. 하지만 위젯의 값을 변경할 때가 있다.

3. 변경이 필요하면 기존 위젯을 삭제해버리고 완전 새로운 위젯으로 대체한다.

불변 -> immutable : 변하지 않는 것! 

 

2 번과 3번의 예를 들어보겠다.

return Container(
	color: Colors.red,
);

 ⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️ 빨강 -> 파랑 으로 변경
        
return Container(
	color: Colors.blue,
);

// 설명 
/*
첫번째 Container 는 빨간색 Container 이고
두번쨰 Container 는 파란색 Container 이다.
우리가 보기엔 Container 가 빨간색에서 파란색으로 변경된 것처럼 보이지만,
프로그래밍 적으로는 빨간색 Container 가 사라지고 파란색 Container 가 새로 생성된 것이다.
*/

 

• StatelessWidget 라이프 사이클(Life Cycle)
  라이프 사이클이란? 
  생명주기이며, 태어나고 죽을 때까지에 대한 주기를 말하는 것이다.

StatelessWidget 인 Constructor 가 생성이 되고 생성되자마자 build 함수가 실행된다.

위의 Container 예제와 마찬가지로, 변경이 필요하면 새로운 위젯을 만들어낸다.

하나의 StatelessWidget 은 라이프 사이클 동안 단! 한번만 build 함수를 실행한다.

 

• StatefulWidget 라이프 사이클(Life Cycle)

StatefulWidget 같은 경우에는 조금 더 어렵게 생겼다.

StatefulWidget 의 클래스는 두개로 나눠진다.

두개로 나눠지는 이유는 StatefulWidget 도 위젯이기 때문에 불변의 법칙을 깰 수 없다.

그렇기에 불변의 법칙을 따르는 StatefulWidget 클래스와 불변의 법칙을 따를 필요없는 State클래스로 나눠 구성한것이다. 

 

StatelessWidget 과 StatefulWidget 의 차이

1. StatelessWidget
   상태관리를 못한다.
   상태관리를 못하기 때문에 build 함수는 무조건 한번만 실행된다.
2. StatefulWidget
   상태관리를 할 수 있다.
   상태관리를 하기 때문에 build를 여러번 실행가능하다.
   하지만 StatefulWidget도 위젯이기때문에 불변의 법칙을 깰 수 없다.

3가지 패턴을 설명하겠다!

 

 

 

1.  기본 StatefulWidget 의 순서

기본 생명주기 흘러가는 순서

StatefulWidget 이 생성되면 처음에 생성자인 Constructor 이 실행되는데, StatelessWidget 에선 바로 build 함수가 불렸지만, StatefulWidget은 createState 함수(상태를 만드는 함수)가 불린다. initState(상태를 초기화한다. 무조건 한번만 호출된다!)를 부른다. Constructor 도 부르지만, 그다지 중요하지 않다. didChangeDependecies 함수가 불리는데, 나중에 배울거다. 그런 다음에 dirty 상태(말그대로 더러워서 변경이 필요한 상태)가 되는데, 바로 build 함수가 불려지면서 위젯을 바로 화면에다가 그릴것이다. 다 그린 후에 clean 상태가 된다. clean 상태에서는 왼쪽 오른쪽으로 갈 수 있지만, 기본적인 생명주기 흐름이니깐 밑으로 내려가겠다 이제 위젯이 삭제가 된다면 deactivate 함수를 호출하고 바로 dispose함수가 부른다. 하지만 deactivate 는 별로 사용하지 않고, dispose 를 바로 사용한다.

2. 파라미터가 바뀌었을때 생명주기

StatelessWidget 같은 경우에서는, 상태를 변경하기 위해서는 빨간색 Container 를 파란색 Container 로 변경하려면 기존 빨간색Container를 삭제하고 새로운 파란색 Container 를 생성한다.

하지만! StatefulWidget은 그렇게 실행하지 않는다.

 

StatefulWidget 은 파라미터가 바뀌면 역시 위젯은 삭제가 되어야 한다. 기존 위젯은 삭제가 되고 새로 생긴 StatefulWidget 이 Contructor 를 실행한다. 하지만! createState는 실행하지 않는다!

기존 StatefulWidget 이 물고있는 State 를 찾아서 재활용 한다. 상태는 무조건 clean 상태이다. didUpdateWidget 이 실행된다. 

상태값이 기존값이랑 달라졌기 때문에 바꿔야하므로 dirty 상태가 되고 변경된 값들을 다시 build 하게 된다. 

 

3. setState 를 실행했을때 생명주기

  setState를 사용했을때의 생명주기이다.

setState 란 statefulWidget 을 사용하게되면, 특별하게 사용할 수 있는 함수(State가 제공해주는 함수)가 있다. 

State 또한 무조건 clean 상태에서만 실행 할 수 있다.

clean 상태에서 setState 를 실행하면 State 안에서 직접 setState 를 실행할수 있다. 

State 안에서 직접 setState 를 실행할 수 있다란 것이 특별한점 이 뭐냐면,

지금까지 위젯의 파라미터를 변경을 하면서 위젯의 상태값을 변경을 해주었다. 즉, 파라미터는 외부에서 직접 넣어주는 값이다.  

하지만 State 안에서 setState를 직접 변경할 수있다는것은 그 전의 과정을 할 필요가 없다는 것이다.

그래서 StatefulWidget 을 많이 사용하는 이유이다.

 

---

끝으로...

1. Widget 의 정의 를 알수 있었다.
2. StatelessWidget 과 StatefulWidget 의 생명주기 및 흐름 순서를 알 수 있었다.
3. Stateless Widget 과 StatefulWidget 의 차이점을 알수 있었다.
4. StatefulWidget의 3가지 생명주기를 알 수 있었다. 그중에서 제일 많이 사용하는 것은 setState 로 인한  생명주기 이다.

---