중급

State management

선언형 UI에서 상태를 어디에 두고 어떻게 전달할지 정합니다.

핵심 개념

State management 주요 항목

상태를 먼저 분류하기

한 화면 안에서 잠깐 쓰는 상태와 앱 여러 곳에서 공유하는 상태를 구분합니다.

언제 쓰나: 텍스트 필드 입력, 탭 선택처럼 지역적인 값은 로컬 상태로 충분할 수 있습니다.

Flutter에서: 로그인 사용자, 장바구니, 앱 설정처럼 여러 화면이 함께 쓰는 값은 앱 상태로 다룹니다.

int count = 0;

void increase() {
  setState(() {
    count += 1;
  });
}

선언형 사고

Flutter에서는 상태가 바뀌면 UI를 직접 고치는 대신 새 상태에 맞는 UI를 다시 설명합니다.

언제 쓰나: 상태 변경 함수는 가능한 한 한곳에 모아 추적하기 쉽게 만듭니다.

Flutter에서: 상태관리 패키지는 도구일 뿐이고, 먼저 상태의 소유자와 범위를 정하는 것이 중요합니다.

Card(
  child: Padding(
    padding: const EdgeInsets.all(16),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: const [
        Text('선언형 사고', style: TextStyle(fontWeight: FontWeight.bold)),
        SizedBox(height: 8),
        Text('Flutter에서는 상태가 바뀌면 UI를 직접 고치는 대신 새 상태에 맞는 UI를 다시 설명합니다.'),
      ],
    ),
  ),
)

확장 개념

Ephemeral state와 App state

  • Ephemeral state는 한 화면 안에서만 의미가 있는 입력값, 탭 선택, 애니메이션 상태입니다.
  • App state는 로그인 사용자, 장바구니, 설정처럼 여러 화면에서 공유되는 상태입니다.
  • 상태 범위가 작으면 setState로 충분하고, 공유 범위가 넓어지면 상태관리 도구를 검토합니다.

확장 개념

선언형 UI 관점

  • Flutter UI는 현재 상태를 입력으로 받아 화면을 다시 그리는 선언형 방식입니다.
  • 상태를 직접 화면에 명령하듯 바꾸기보다 상태 값을 바꾸고 build가 새 UI를 설명하게 만듭니다.
  • 상태 변경 위치가 분산되면 예측이 어려워지므로 한 곳에서 흐름을 관리하는 편이 좋습니다.

코드

예제

setState(() {
  count += 1;
});

다음 단계

실습 체크리스트

ephemeral state와 app state 구분상태 소유자 정하기상태 변경 흐름 문서화
  • 출처세부 기준과 최신 변경 사항을 확인할 수 있습니다.
  • Flutter API Reference클래스, 메서드, 생성자 세부 정의를 확인합니다.
  • Data & backend네트워크, 저장소, 직렬화, Firebase 문서를 함께 봅니다.