[Flutter] Stateful VS Stateless와 생명주기(Life Cycle)

플러터를 접한지 두 달 정도 되었습니다!
아무래도 UI를 제작하는 활동만 하다보니까 이런 이론에 관해서는 아는게 없는 것 같습니다...
확실히 이론적인 지식을 쌓다보면 효율적이게 코드를 작성할 수 있는 것 같아요!

그래서 오늘은 StatefulWidget과 StatelessWidget의 차이와 생명주기에 대해 알아보도록 하겠습니다!

---

🪜 목차

1. State란?
2. StatelessWidget에 대하여
   a. 생명주기
3. StatefulWidget에 대하여
   a. 생명주기

---

1. State란?

State란 위젯에 대한 속성을 의미합니다.
고로, 해당 위젯이 가지고 있는 속성을 모두 State라고 부릅니다.
위젯은 모두 상태를 가지며, 위젯은 위젯 트리에 의해서 관리됩니다.

---

2. StatelessWidget에 대하여

StatelessWidget이란 무엇일까요?

StatelessWidget은 한 번 생성되면 절대 바뀌지 않는 특징을 지녔습니다. 즉 위젯을 한 번 그리면 다시 그리지 않습니다!
상태를 바꾸기 위해선 완전히 destroy하고, 다시 rebuild하는 방법밖에 없습니다.

---

Stateless의 생명주기

1. Widget 생성
   • build() 메서드가 최초로 호출될 때 생성됩니다.
2. build() 메서드 호출
   • build() 메서드는 UI를 그리기 위해 호출됩니다.
3. UI 그리기
   • build()에서 정의한 UI가 화면에 출력됩니다.
4. Widget 소멸
   • 위젯이 더 이상 필요하지 않을 때 소멸됩니다.

👉🏻 한 마디로! build() 메서드만 호출하는 Widget입니다!
호출될 때마다 새로운 위젯을 생성하지 않고 기존 위젯을 재사용합니다.

---

제가 임의 코드를 한번 가져와봤는데요!

import 'package:flutter/material.dart';

// Stateless의 Life Cycle
// 단순 build() 메서드에 UI를 작성하고
// 메인에서 실행하여 UI를 출력합니다.

void main() {
  // 실행은 여기서!
  runApp(App());
}

// StatelessWidget을 상속한 클래스입니다!
class App extends StatelessWidget {
  const App({super.key});

  //build()메서드 내부에 개발자가 UI를 정의합니다!
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
      	backgroundColor: const Color(0xFF181818),
        body: SingleChildScrollView(
          child: 
        )
      )
    );
  }
}

정말 간단하게 말하자면
그냥 a4용지에 크레파스로 그림을 그리고 끝!이라는 느낌입니다.

---

3. StatefulWidget에 대하여

그렇다면 StatefulWidget은 무엇일까요?

StatefulWidget은 상태가 변경되면 여러번 build하는 위젯입니다!
StatelessWidget과 다르게 화면을 여러번 그리기 때문에 관리하기가 어렵고 성능이 낮아질 수 있지만 사용자들은 편리함을 느낍니다.

---

Stateful의 생명주기

1. createState()
   • StatefulWidget 객체 생성 시 생성자가 호출되고 이 메서드가 호출됩니다.
   • 필수적으로 override 해야하는 메서드입니다.
   • State 객체를 생성하는 일을 수행합니다.
2. initState()
   • 위젯이 최초 생성되는 상황이면 이 메서드가 호출됩니다.
   • 처음 한 번만 호출되는 함수입니다.
   • 여기서 데이터나 속성값을 초기화 할 수 있습니다.
3. didChangeDependencies()
   • 추가적으로 위젯이 의존하는 데이터의 객체가 호출될 때 호출되기도 합니다.
   • IngeritedWidget을 사용하는 경우가 대표적입니다.
4. build()
   • 위젯이 그려지는 역할을 수행합니다.
   • State 클래스에서 반드시 overriding 되어야 하는 메서드입니다.
   • 버튼 클릭과 같은 어떠한 행동을 취할 때 계속 실행되는 함수입니다.
5. setState()
   • 객체의 상태가 변경되었다는 것을 프레임워크에 알리는 용도입니다.
   • State 객체의 상태가 변경될 때 마다 이 함수를 통해 알려야합니다.
   • 그래야만 프레임워크가 build() 함수를 호출할 준비를 하기 때문입니다.
6. didUpdateWidget()
   • 부모위젯이 재빌드되어 위젯이 갱신될 때 호출됩니다.
   • 호출된 후엔 항상 build()를 호출합니다.
   • 만약 didUpdateWidget()내에서 setState()를 호출하면 build() 중복 호출이 됩니다.
7. deactivate()
   • 트리에서 State 객체가 제거될때마다 호출됩니다.
8. dispose()
   • 해당 위젯이 위젯트리에서 제거됐을때 실행됩니다.
   • 더이상 빌드되지 않는다는 의미입니다.
9. reassemble()
   • hot reload를 실행하면 reassemble()이 호출됩니다.
   • reassemble이 호출되면 build도 호출됩니다.

---

너무 어지럽습니다...
이건 조금 더 공부가 필요한 부분 같습니다!

미완성인 글로 남겨두고 더욱 공부하여 완성시키도록 하겠습니다!