[TIL] Flutter - Stateless vs Stateful

jeongjwon·2023년 11월 30일
0

이론

목록 보기
14/19

Flutter is declarative. This means that Flutter builds its user interface to reflect the current state of your app:

Flutter 는 선언적이다. 앱의 현재 상태를 반영하기 위해 사용자 인터페이스를 구축한다.



Widget 위젯

Flutter 의 화면에 표시하는 모든 것이 widget(위젯)이다.
위젯은 변경이 필요할 시 기존의 위젯을 없애고, 새로운 위젯으로 대체한다.

(나는 React 에서의 컴포넌트로 비슷한 기능이라고 이해했다.)





State 상태

State(상태)란 위젯에 대한 속성을 말한다.



Stateless Widget

Stateless widget 도 state 를 가지고, 한 번 생성되면 절대 바뀌지 않는다.
contructor 생성 후 처음 build() 함수를 호출해 UI를 구성하고, 한 번만 그리고 다시 그리지 않는다.
stateless 를 바꾸기 위해서는 완전히 destroy 하고, rebuild 하는 방법 뿐이다.
즉, 변경이 일어나면 처음부터 contructor과 build 가 다시 실행된다.



Stateful Widget

Stateful widget 은 state 가 변경되면 build 를 여러번 한다.
state object 와 결합하여 위젯의 구성요소나 속성들을 지속적으로 추적해서 속성들을 변경하기 위해서는 setState 메서드를 이용해서 빠르게 rebuild 시켜 변화를 적용시킨다.
화면을 여러 번 그리고 rebuild 하기 떄문에 stateless widget 보다 관리하기 어렵고, 성능이 낮아 더 긴 생명 주기를 갖는다.
하지만, UI가 변경된 상태에 따라 업데이트가 되기 때문에 더 나은 사용자 경험을 선사한다.


Stateful Widget 상세 생명주기

(처음으로 constructor() 을 실행,widget 속성이 비어있는 상태이기때문에 생명주기의 한 부분을 차지하지는 않는다.)

1.createState() : state object 를 생성한다. 이 object는 해당 widget에 대한 모든 변경 가능한 state가 유지되는 곳이다.

mounted : State object를 생성하면, 프레임워크는 mounted라는 boolean 속성을 true로 설정해서, State object를 BuildContext와 연결한다. 이 속성은 이 State object가 현재 위젯 트리에 있는지, 없는 지에 대한 정보를 제공한다. (이 단계는 생명 주기의 실제 단계로 표시되지않지만, background에서 진행 중인 작업을 아는 것이 중요하다.)

2.initState() : stateful widget 이 생성될 때(object가 트리에 주입되면 = mounted 속성은 true로 설정), 한 번만 호출되는 함수로, state 를 초기화시킨다.

3.didChangeDependencies() : initState() 이후에, build() 이전에 호출된다.부모 위젯이나 자기 자신의 상태가 변경될 떄는 호출되지 않지만, 데이터에 의존하는 위젯이라면 화면에 표시하기 전에 꼭 호출해야 한다.

4.build() : 필수적이며, @override 재정의 대상이고 반드시 widget 을 반홚해야한다. state 에 속한 위젯이 업데이트될 떄마다 항상 build() 를 실행한다. (didUpdateWiget() 또는 setState() 가 호출할 때마다)

5.didUpdateWidget() : 부모 위젯이 구성을 변경하고 위젯을 rebuild 할 경우, build() 호출 전에 일어난다. 부모 위젯의 변경에 따라 상태값을 초기화할 필요가 있다면, 이 함수 내에서 setState()를 통해 상태값을 다시 초기화시켜야 한다. 위젯이 생성되고 나서 갱신을 해야 할때는 initState()가 아니라 didUpdateWidget()을 호출해야 한다.

6.setState() : 실행중에 변경사항을 알리는 메서드로 현재 object 내부 상태가 dirty 라는 것을 프레임워크에 알려준다. 이후 build() 를 호출해서 위젯을 업데이트하고 rebuild 한다.

7.deactive() : 상태 객체가 트리에서 제거될 때 호출하는 메서드

8.dispose() : 위젯 객체가 위젯 트리에서 영구적으로 제거될 때 호출하는 메서드



참고 블로그





마치며

Provider 에 대해 알아보기 전에 Flutter 의 state 에 관한 위젯을 먼저 알아보는 것이 더 좋을 것 같아 순서를 변경하였다. 이렇게 세세하게 생명주기까지 알아보고 나니, 프로젝트의 오류가 왜 많이 발생했는지에 대해서도 알게된 것 같아. 무작정 state 가 있다고 해서 stateful 이 아니라 변경되지 않고 처음 한 번만 호출이 되는 것인지 , 계속해서 변경되는 state 가 있는 것인지에 따라 메서드를 달리 사용할 수 있다는 것을 알게되었다. 추후에 블로깅과 ReadMe 작성이 끝나면 리팩토링을 진행해보아야 겠다.

다음은 진짜 Provider 에 대해 알아보도록 하자.

0개의 댓글