[Flutter] 플러터 State management 알아보기

2023-12-20

---

사진: Unsplash 의 israel palacio

---

1. State

 

각각의 위젯들은 계층적 구조를 가지며 상태를 가지고 있다. 이러한 위젯의 상태를 초기화하기 위해서 build()라는 메서드를 사용하게 되며 해당 메서드는 데이터의 필요 시점에 자식 위젯의 인스턴스화하는 것을 보장해 준다.

 

@override
Widget build(BuildContext context) {
   return ContentWidget(importantState);
}

---

다만 아래와 같이 계층 구조가 깊어질 수록 상위 위젯에 정보에 접근하는 것이 어려워지는데 이를 위해 Flutter에서는 InheritedWidget 클래스를 제공한다. 

https://docs.flutter.dev/resources/architectural-overview 계층구조 예시

---

해당 클래스를 활용하면, 현재 위젯의 상위위젯에 접근할 수 있다. 아래는 ExamWidget 또는 GradeWidget 개체 중 하나가 StudentState의 데이터를 가져오는 예제이다.

 

final studentState = StudentState.of(context);

 

of(context)는 현재의 위치에 있는 위젯의 build context 정보를 가지고 있으며, 현재 위치에서 가장 가까운 자신의 상위(부모 또는 조상이라고 불리고도 한다.) 위젯에 접근할 수 있게 해 준다. 또한 updateShouldNotify()와 같은 메서드는 상위 위젯의 변경점을 캐치할 수 있게 도와준다.

---

InheritedWidget 은 광범위 하게 위젯의 상태를 공유하기 위해 사용되며 대표적으로 아래와 같이 MaterialApp build() 에서 사용한 테마 정보를 하위 위젯에서 of를 사용해 불러오는 경우를 예로 들 수 있다.

 

Container(
  color: Theme.of(context).secondaryHeaderColor,
  child: Text(
    'Text with a background color',
    style: Theme.of(context).textTheme.titleLarge,
  ),
);

---

이러한 state 위젯을 생성하고 사용하는 과정을 단순화하는 provider 라는 패키지도 존재하며, 이는 다음에 따로 다루어 보도록 하겠다.

---

2. 출처

https://docs.flutter.dev/resources/architectural-overview

Flutter architectural overview

---

메인 이미지 출처 : 사진: Unsplash의israel palacio