플러터에서 상태 관리가 헷갈리는 이유

플러터에서 상태(State)란?

초보자 분들께서는 종종 상태의 의미에 대해서 헷갈리곤 합니다. 이런 일이 발생하는 가장 큰 이유는 상태의 의미가 두가지로 사용되고 있기 때문입니다.

플러터에서 말하는 상태는 두가지 의미를 가지고 있습니다.

1. UI에 변화를 주는 데이터
2. 위의 데이터를 관리하기 위해 만들어진 State class

상태의 첫번째 정의: UI에 변화를 주는 데이터

간단한 예시를 통해 첫번째 정의를 알아보도록 하겠습니다. 아래 화면을 누르면 숫자가 올라가는 Widget이 있습니다. 해당 위젯에서 UI에 변화를 주는 데이터는 무엇일까요?

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => setState(() {
        _counter++;
      }),
      child: Text(_counter.toString()),
    );
  }
}

해당 UI에 변화를 주는 데이터는 _counter 변수입니다. 이 변수가 오를 때마다 화면의 숫자도 같이 변합니다. 이처럼 State란 UI에 변화를 주는 데이터를 말합니다.

상태의 두번째 정의: 위의 데이터를 관리하기 위해 만들어진 State class

상태는 영어로 State라고 부릅니다. 그런데 Flutter는 해당 이름을 가진 State 클래스를 내부적으로 이미 가지고 있습니다. 따라서 종종 사람들은 State클래스를 번역하거나 지칭할 때 상태 라고 부르기도 합니다.

간단한 예시를 살펴보도록 하겠습니다.

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => setState(() {
        _counter++;
      }),
      child: Text(_counter.toString()),
    );
  }
}

위 코드에서 State class는 바로 _CounterState 클래스 입니다. 위의 코드를 읽어 보시면 _CounterState는 State<Counter> 클래스를 상속받고 있음을 알 수 있습니다.

또한 _CounterState 클래스는 UI에 변화를 주는 데이터인 _counter 변수를 가지고 있는 위젯이기도 합니다.

상태라는 단어를 읽을 때 이 상태가 UI에 변화를 주는 데이터를 말하는지. 아니면 해당 데이터를 저장하기 위한 State(상태) 클래스를 말하는지 주의깊게 살펴보시길 바랍니다.

Flutter에서 말하는 상태 관리란?

플러터에서 흔히 말하는 상태 관리란 첫번째 정의, UI에 변화를 주는 데이터를 관리하는 것을 말합니다.

즉, 상태 관리란 ‘UI에 변화를 주는 데이터를 어떻게 관리할 것인가?’에 대한 문제입니다.

상태관리에 대해서는 riverpod, getx등 다양한 솔루션이 나와있습니다. 각각의 솔루션은 다음과 같은 문제에 대한 나름의 해답을 제공합니다.

• 상태를 어떻게 만들것인가?
• 상태에 어떻게 접근할 것인가?
• 상태를 어떻게 변경할 것인가?
• 상태를 어떻게 삭제할 것인가?
• 상태를 어디에 저장할 것인가?
• 상태를 언제 만들 것인가?

다시 말해 상태를 ~할 것인가? 에 대한 솔루션이 바로 상태관리라고 할 수 있겠습니다.