[Flutter] 상태(State)에 대해 알아보자, Flutter State

이번 글에선 Flutter에서 상태(State)란 무엇인지, 어떤 것을 상태라고 하며 어떤 방식으로 사용되는지에 대해 구체적인 예시를 통해 알아보도록 하겠습니다.

 

상태(State)의 정의

Flutter 공식 문서에서는 상태라는 것에 대해 아래와 같이 정의하고 있습니다.

Whatever data you need in order to rebuild your UI at any moment in time

이 말은, '화면을 다시 그리기(rebuild) 위해 필요한 어떤 것(data)이든 상태라고 할 수 있다'라는 의미입니다. 명확한 정의이지만 실제 코드로 살펴보기 전까지는 잘 이해가 가지 않을 수 있습니다.

반응형

예제

제가 앱을 하나 만든다고 가정해 보겠습니다. 앱의 이름은 <감정 표시기>

사회 생활을 하다 보면 아무도 나를 건드리지 않았으면 하는 기분일 때가 한 번씩 있지 않으신가요?
그런 여러분을 위해 준비했습니다! 화가 나거나 우울하거나 즐거운 상태임을 앱을 통해 직관적으로 표현해 보세요!

기능은 단순합니다. 우선 표현할 수 있는 감정은 3가지이고, 각 감정을 나타내는 색생이 존재합니다.

• 화남 - 빨간색
• 우울함 - 파란색
• 즐거움 - 노란색

내 감정 '상태'에 따라 화면에 노출되는 색상을 다르게 할 것입니다. 그리고 현재 보이는 감정이 언제 마지막으로 업데이트된 것인지 알 수 있도록 업데이트 시간을 표시해 주려고 합니다.

예시 앱의 모든 코드는 여기에서 확인 가능합니다.

완성된 예시 앱의 화면

이 앱을 구현할 때 핵심 기능은 사용자의 감정에 따라 화면의 색상, 문구(UI) 등이 달라져야 한다는 것입니다. 즉, 화남 상태(빨강)에서 즐거움 상태(노랑)로 화면을 바꾸기 위해서는 사용자의 현재 감정을 데이터로서 관리해야 합니다. 앱의 각 요소의 코드를 간단히 살펴보겠습니다.

상단 앱바 위젯

감덩 텍스트와 사람 아이콘 표시 위젯

위 코드에서 emotion이라는 변수가 바로 '상태'입니다. emotion 값에 따라 Text 위젯과 Icon 위젯이 이전과는 다른 화면을 그리게 됩니다. 화면을 다시 그리기 위해 사용하는 값을 상태라고 하는 것이죠. 화면이 A에서 B로 혹은 A에서 C로 전이되기 위해서는 상태를 적절하게 변경해 주어야 합니다.

 

공식 문서에서는 이러한 상태를 두 가지의 개념적(conceptual) 유형으로 구분하고 있습니다.

• Ephemeral State - 하나의 위젯 안에서 관리되는 상태
• App State - 앱 전반에서 관리되는 상태

감정 변경 버튼 위젯 코드

Ephemeral state는 위에서 우리가 만든 앱의 currentTime과 같은 값을 의미합니다. currentTime은 버튼 위젯 내부에서만 사용되고 관리되기 때문이죠.

이와 다르게 emotion 변수는 emotion에 따라 상단 App Bar, 아이콘 색상 등이 모두 변경되어야 하기 때문에 앱 전반에서 사용되는 App State라고 할 수 있습니다. 일반적인 앱에서는 로그인된 사용자 정보 같은 것이 대표적인 App State라고 할 수 있습니다.

 

이러한 구분은 개념적 구분이기 때문에 명확히 선이 그어져 있는 것은 아닙니다.

가령, 감정 상태를 아이콘에만 적용시킬 것이라고 판단했다면, emotion 변수를 앱 전역에서 사용할 필요가 없기 때문에 Ephemeral state로 분류할 수도 있습니다. 이러한 판단은 앱의 설계에 따라 달라질 수 있고, 앱을 개발하는 중간에 변경되기도 합니다.

---

Flutter는 선언형 UI 방식으로 화면을 그리기 때문에 상태라는 것이 Flutter의 핵심이라고 할 수 있습니다.

화면 = build(상태)