[Flutter기초2] Stateless Widget, StatefulWidget

코덩이·2023년 5월 3일

Flutter기초

목록 보기
2/11
post-thumbnail

🌱Stateless Widget


🌳Stateless Widget 생명주기(Life Cycle)

  • Constructor로 생성되고 생성이 되자마자 build 함수가 실행된다.
  • 변경이 필요하면 새로운 위젯을 만들어버린다.
  • 하나의 Stateless Widget은 생명주기 동안 단 한번만 build 함수를 실행한다.

🌱Stateful Widget


🌳Stateful Widget 생명주기

  • 우리가 데이터 관리를 위해 상태를 관리하려면 build함수를 여러번 불러줘야함
  • 그러나 StatefulWidget도 Widget이기 때문에 변경이 불가능하다.
  • 그렇기때문에 State를 사용한다.

🌳기본 StatefulWidget 생명주기

1. 상태를 생성하는 createState()

  • StatefulWidget 클래스를 상속받는 클래스는 반드시 createState()함수를 호출해야 한다.
  • 이 함수는 다른 생명주기 함수들이 포함된 State 클래스를 반환한다.

2. mounted == true

  • createState() 함수가 호출되어 state 클래스를 생성하면 바로 mounted 속성이 true로 변경된다.
  • mounted 속성이 true가 된다는 것은 위젯을 제어할 수 있는 buildContext 클래스에 접근할 수 있다는 의미이다.
  • buildContext가 활성화 되어야만 setState() 함수를 이용할 수 있다.
  • createState()가 state 클래스를 생성하면 buildContext는 state에 할당된다. buildContext는 위젯이 배치된 위젯 트리의 위치를 단순화 한 것이다.
  • 모든 위젯은 bool 형식의 this.mounted 속성을 가지고 있다. buildContext 가 할당되면 true를 반환한다.
  • 위젯이 unmounted 상태일 때 setState를 호출하면 error가 발생한다.

3. initeState()

  • 이 함수는 위젯을 초기화할 때 절대적으로 한 번만 호출된다.
  • 주로 데이터 목록을 만들거나 처음 필요한 데이터를 주고받을 때 호출한다.

4. didChangeDependencies()

  • 이 함수는 데이터에 의존하는 위젯이라면 화면에 표시하기 전에 꼭 호출해야한다.
  • 주로 상속받은 위젯을 사용할 때 상속받는자가 변경되면 호출한다.

5. build()

  • 이 함수는 widget을 반환한다.
  • 즉 위젯을 화면에 띄우는 함수이다.

6. deactivate()

  • State 객체가 플러터의 구성 트리로부터 제거될 때 호출된다.
  • 하지만 해당 메모리까지는 지워지지 않아서 dispose() 함수를 호출하기 전까지 State객체를 재사용할 수 있다.

7. dispose()

  • deactivate()에 이어 State 객체를 영구적으로 소멸할 때 호출된다.
  • 즉 이 함수를 사용하면 해당 위젯을 종료한다는 뜻이다.

8. mounted == false

  • State 객체가 소멸하면 마지막으로 mounted 속성이 false로 되면서 생명주기가 끝난다.

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

  • 파라미터는 인스턴스를 만들 때 외부에서 넣어주는 것
  • 빨간색 컨테이너가 파란색 컨테이너로 변하는 경우

1. Constructor

  • 기존 위젯은 삭제가 되고 새로생긴 파란색 컨테이너에 해당되는 Constructor가 실행되고

2. State

  • 바로 기존 빨간 컨테이너의 State를 찾아서 붙어버린다.
  • 원래 있던 State를 재활용하는 것

3. didUpdateWidget()

  • 부모 위젯이나 데이터가 변경되어 위젯을 갱신해야 할 때 호출한다.
  • 만약 inistState()에서 특정 이벤트에 의해 위젯이 변경되면 didUpdateWidget()함수를 호출해 위젯을 갱신할 수 있다.

5. build

  • 파란색으로 다시 상태를 바꿔야하니까 build를 다시할 필요가 있음!

🌳setState를 실행했을 때 생명주기

  • setState를 사용하는 이유
  • state안에서 직접 실행 가능하다.

1. setState()

  • 데이터가 변경되었다는 것을 알려주고 변경된 데이터를 이용해 화면의 UI를 변경할 수 있도록 한다.
  • 가장 많이 사용된다.

3. build

  • 바뀐 상태를 기반으로 빌드가 실행된다.

참고
https://flutterbyexample.com/lesson/stateful-widget-lifecycle
https://jutole.tistory.com/29

profile
개발공부중

0개의 댓글