[flutter] stateless widget vs stateful widget(+ flutter 생명주기)

flutter는 위젯으로 구성되어 있고 위젯은 두 가지 위젯으로 나뉜다.

Stateless vs Stateful

- stateless widget

stateless는 한번 생성되면 절대 바뀌지 않는 위젯이다. 한 번 생성된 state를 바꾸기 위해서는 위젯을 destroy 후 rebuild를 해야한다.
그렇기 때문에 위젯이 처음 생성될 때와 부모 위젯이 리빌드 될 때만 build 메서드를 이용하여 위젯을 구성한다.

- stateful widget

stateful은 상태가 변경되면 build를 여러 번 하는 위젯이다. 위젯의 구성요소나 속성들을 지속적으로 추적하는 state object와 결합하여 setState 메서드를 사용해서 언제든 위젯을 업데이트할 수 있다.

stateful widget life cycle

출처 : https://devmg.tistory.com/186

1. 위젯 구축

1-1. createState()

위젯 트리에 상태를 만들기 위해 호출된다.
statefulWidget을 구축하자마자 호출되며 state object를 생성한다. 

class BalanceRowWidget extends StatefulWidget {

  @override
  _BalanceRowWidgetState createState() => _BalanceRowWidgetState();
}

object가 생성되면 mounted 속성을 true로 설정한 뒤 state object를 buildContext와 연결한다. 
이 속성은 state object가 현재 위젯 트리에 있는지, 없는지에 대한 정보를 제공한다.

* 모든 위젯은 mounted의 boolean 속성을 가지고 있다. dispose() 이후 unmount(mounted = false) 되며 unmount 이후에는 setState를 불러오면 오류가 발생할 수 있다.

1-2. initState()

mounted 속성이 true로 설정되면 initState()가 실행되며 위젯의 상태를 초기화한다.
initState()는 state object가 처음 생성될 때, 한 번만 호출된다.

@override
  void initState() {
    _counter = widget.initialCount;

    super.initState();
  }

1-3. didChangeDependencies()

initState() 호출 이후에 호출된다.
didChangeDependencies()는 위젯의 의존성이 변경되어 다시 빌드해야 할 때 호출된다.

2. 재 드로잉

2-1. build()

위젯으로 만든 UI를 구축하는 단계(반드시 위젯을 리턴한다)
state에 속한 위젯이 업데이트 될 때마다 build()가 실행된다.

상태가 바뀜에 따라 여러번 호출되지만 처음 호출되는 것은 didChangeDependencies() 다음이다.

@override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Text(
          '\$$_counter',
          style: const TextStyle(
            fontSize: 34,
            fontWeight: FontWeight.w600,
            color: Colors.white,
          ),
        ),
      ],
    );
  }
}

2-2. didUpdateWidget()

부모 위젯이 구성을 변경하고, 위젯을 다시 build 해야 하는 경우에 호출된다.
이전 위젯과 새 위젯을 비교해 변경사항에 따라 필요한 업데이트를 수행한다.

2-3. setState()

상태가 변경되었을 때 프레임워크에 상태가 변경됨을 알린다.

  void onClicked() {
    _counter = _counter + 1;
    setState(() {});
  }

유일하게 개발자가 직접 호출하는 메서드, 위 예시처럼 꼭 코드가 setState 함수 안으로 들어가지 않아도 업데이트 상태를 인식한다.

3. 화면 파기

3-1. deactivate()

위젯이 위젯 트리에서 제거될 때 호출된다. 구성 트리로부터 삭제되어 관리되지는 않으나 메모리 해제까지 된 것은 아니다.

3-2. dispose()

위젯이 영구적으로 위젯 트리에서 제거될 때 호출된다.

 

---

constructor(생성자) : state(컴포넌트의 상태)값을 초기화 하거나 메서드를 바인딩할 때 사용 

---

참고

https://velog.io/@gomuzom/Flutter-Stateful-LifeCycle

https://parkjh7764.tistory.com/185