Notice
Recent Posts
Recent Comments
Link
«   2026/05   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Archives
Today
Total
관리 메뉴

D-Park

ephemeral state and app state 본문

Flutter/StateManagement

ephemeral state and app state

Dev-Park 2023. 6. 23. 22:31
  • 가장 일반적인 의미에서 앱의 상태는 앱이 실행되는 동안 메모리에 존재하는 모든 것을 말합니다.
    이에는 앱의 assets, Flutter 프레임워크가 UI에 대해 유지하는 모든 변수, 애니메이션 상태, 텍스처, 글꼴 등이 포함됩니다.
  • 일반적인 상태의 정의는 유효하지만 앱 아키텍처를 설계하는 데에는 그리 유용하지 않습니다.
  • 첫째로, 텍스처와 같은 일부 상태(일시적인 상태)는 실제로 관리하지 않습니다. 프레임워크가 대신 처리해줍니다. 따라서 더 유용한 상태의 정의는 "어느 순간에든 UI를 다시 구축하는 데 필요한 데이터"입니다.
  • 둘째로, 직접 관리하는 상태는 일시적인 상태와 앱 상태로 개념적으로 나뉠 수 있습니다.
  • 일시적인 상태
    • 일시적인 상태(가끔 UI 상태 또는 로컬 상태라고도 함)는 단일 위젯에 깔끔하게 포함시킬 수 있는 상태입니다.
    • 일시적인 상태의 예
      • PageView에서의 현재 페이지
      • 복잡한 애니메이션의 진행 상태
      • BottomNavigationBar에서 현재 선택된 탭
    • 위와 같은 상태에 대해서는 위젯 트리의 다른 부분이 이러한 상태에 접근할 필요가 거의 없습니다. 이러한 상태를 직렬화할 필요가 없으며, 복잡하게 변경되지도 않습니다.
    • 다시 말해, 이러한 종류의 상태에는 상태 관리 기법(ScopedModel, Redux 등)을 사용할 필요가 없습니다. StatefulWidget만 있으면 충분합니다.
    • 아래 예시에서는 BottomNavigationBar에서 현재 선택된 항목이 _MyHomepageState 클래스의 _index 필드에 저장되어 있습니다. 이 예시에서 _index는 일시적인 상태입니다.
    class MyHomepage extends StatefulWidget {
      const MyHomepage({super.key});
    
      @override
      State<MyHomepage> createState() => _MyHomepageState();
    }
    
    class _MyHomepageState extends State<MyHomepage> {
      int _index = 0;
    
      @override
      Widget build(BuildContext context) {
        return BottomNavigationBar(
          currentIndex: _index,
          onTap: (newIndex) {
            setState(() {
              _index = newIndex;
            });
          },
          // ... items ...
        );
      }
    }
    
    • 여기에서 setState()와 StatefulWidget의 State 클래스 내의 필드를 사용하는 것은 자연스럽습니다.
    • 앱의 다른 부분에서 _index에 접근할 필요가 없습니다. 이 변수는 MyHomepage 위젯 내에서만 변경됩니다. 또한, 사용자가 앱을 닫고 다시 시작하더라도 _index가 0으로 초기화되는 것에는 문제가 없습니다.
  • 앱 상태
    • 일시적이지 않은 상태는 여러 앱 부분에서 공유하고 사용자 세션 간에 유지하려는 상태를 말합니다. 이를 앱 상태(application state) 또는 공유 상태(shared state)라고도 합니다.
    • 앱 상태의 예 :
      • 사용자 환경 설정
      • 로그인 정보
      • 소셜 네트워킹 앱의 알림
      • 전자 상거래 앱의 장바구니
      • 뉴스 앱의 읽음/읽지 않음 상태
    • 앱 상태를 관리하기 위해 여러 옵션을 조사해야 합니다. 선택은 앱의 복잡성, 팀의 이전 경험 및 많은 다른 측면에 따라 다릅니다. 계속해서 읽어보세요.
    • 분명히, 앱의 모든 상태를 관리하기 위해 State와 setState()를 사용할 수 있습니다. 사실, Flutter 팀은 이를 많은 간단한 앱 샘플(모든 flutter create로 생성되는 시작 앱 포함)에서 사용합니다.
    • 반대로, 특정 앱의 맥락에서는 BottomNavigationBar에서 선택된 탭이 일시적인 상태가 아닐 수도 있습니다. 이를 클래스 외부에서 변경해야 하거나 세션 간에 유지해야 할 수도 있습니다. 그 경우 _index 변수는 앱 상태입니다.
    • 특정 변수가 일시적인 상태인지 앱 상태인지 구분하는 명확하고 보편적인 규칙은 없습니다. 때로는 하나를 다른 것으로 리팩토링해야 할 수도 있습니다. 예를 들어, 일시적인 상태로 명확하게 시작하더라도 애플리케이션이 기능을 더 추가함에 따라 앱 상태로 이동해야 할 수 있습니다.
    • 이러한 이유로 다음 다이어그램은 다소 주관적으로 받아들여야 합니다.명확한 규정은 없다.

 

  • React의 setState와 Redux의 store에 대해 물어볼 때, Redux의 저자인 Dan Abramov는 다음과 같이 답변했습니다.
  • "규칙은 다음과 같습니다. 어떤 방법이 덜 번거로운지에 따라 하세요."
  • 요약하면, 모든 Flutter 앱에는 두 가지 개념적 유형의 상태가 있습니다. 일시적인 상태는 State와 setState()를 사용하여 구현할 수 있으며, 일반적으로 단일 위젯에 지역적으로 해당됩니다. 나머지는 앱 상태입니다. 두 유형 모두 Flutter 앱에서 자리를 차지하며, 이들 간의 분리는 개인의 선호도와 앱의 복잡성에 따라 달라집니다.
  • 요약
    • 앱 상태는 앱 전체에 걸쳐 공유되고 사용자 세션 간에 유지되는 상태를 말합니다. 예를 들어 사용자 환경 설정, 로그인 정보, 알림, 장바구니 등이 있습니다.
    • 일시적인 상태는 단일 위젯에 깔끔하게 포함될 수 있는 상태입니다. 예를 들어 PageView에서의 현재 페이지, 복잡한 애니메이션의 진행 상태, 선택된 탭 등이 있습니다.
    • 일시적인 상태는 State와 setState()를 사용하여 관리할 수 있으며, 일반적으로 지역적인 범위를 갖습니다. 앱 상태는 관리하기 위해 다양한 옵션을 조사하고 선택해야 합니다.
    • 어떤 변수가 일시적인 상태인지 앱 상태인지를 구분하는 명확한 규칙은 없으며, 경우에 따라 리팩토링이 필요할 수 있습니다.
    • 앱 상태와 일시적인 상태는 모두 Flutter 앱에서 중요한 역할을 하며, 구분은 개인의 선호도와 앱의 복잡성에 따라 다릅니다.

 

출처  :  https://docs.flutter.dev/data-and-backend/state-mgmt/ephemeral-vs-app

'Flutter > StateManagement' 카테고리의 다른 글

선언적으로 생각하기  (0) 2023.06.23