Flutter - 상태(State)란?

 

서론

정신없이 최종프로젝트 준비를 하다 보니 어느새 모의 면접 준비단계에 들어섰다.

 

모의면접 시뮬레이션 학습 가이드에는 본인의 답지를 만들어볼 것을 권장한다고 쓰여있다.

예상 문제를 준비해서 미리 공부한다는 느낌으로 대비하면 된다고 하셨다.

 

포커스를 둘 부분은, 말을 잘하는 법이다.

내가 이해한 것을 바탕으로 개념에 대해 잘 설명할 수 있어야 한다.

절대 준비한 자료를 읽으면서 답변하면 안 된다고 하셨다.

실제로 정말 면접을 본다 생각하고 임해야겠다.

 

나의 경험이나 구체적인 예시를 들면 좋다고 하며, 순차적으로 말하는 연습을 해야 한다.

잘 알지 못하거나 하지 못하는 부분에 대해서는 최대한 진실성 있게 말해야 한다.

 

ChatGPT의 도움을 얻어 나만의 답안지를 작성해 봤다.

 

---

Flutter 숙련

ℚ. Flutter 앱 개발에서 ‘상태’란 무엇인가?

𝔸. 앱이나 위젯의 현재 정보. 위젯이 표시되는 모양을 결정하는 데이터이다.

플러터 앱은 이 상태(State)를 기반으로 화면을 그린다.

상태가 변경되면 UI도 그에 맞게 업데이트된다.

 

위젯에는 Stateless / Stateful Widget의 두 종류가 있다.

 

 

1. Stateless Widget

상태가 변하지 않는 위젯이다.

위젯이란 앱을 구성하는 모든 UI 요소를 말한다. (버튼, 텍스트 등)

Stateless Widget은 텍스트, 이미지, 아이콘 등 한번 정해지면 바뀌지 않는 고정된 값을 지닌다.

 

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, Flutter!');
  }
}

 

한번 렌더링(코드를 실제 화면에 표시하는 과정)이 되면 이후에는 변경되지 않는다.

 

<렌더링 과정>

1) 빌드 함수가 실행되며 위젯트리 생성
2) 엘리먼트 트리 생성 - 변하지 않는 구조 저장
3) 렌더 트리 생성 - 실제로 그려질 요소들
4) 프레임워크가 변경사항을 감지하고 다시 그리기 (Rebuild & Repaint)
     : setState() 호출 시 위젯트리 업데이트 / 변경된 부분만 재 렌더링
     - Rebuild(재구성) → 빌드함수 재실행
     - Repaint(다시 그리기) → 디자인 요소 변경 시 렌더트리 업데이트 (skia 엔진 사용)

 

 

2. Stateful Widget

상태가 변할 수 있는 위젯.

사용자의 입력, 또는 비동기 작업 결과에 따라 UI가 반영된다. (체크박스, 스위치, 슬라이더 등)

 

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Counter: $_counter'),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

 

setState()를 호출하면 Flutter는 위에서 말한 렌더링 과정을 통해 해당 위젯을 재빌드하여 UI를 업데이트한다.

 

 

3. 상태관리 (State Management)

앱이 복잡해질수록 상태관리를 체계적으로 해야 유지보수가 용이하다.

상태관리에는 다음과 같은 방법들이 있다.

 

• Provider / Riverpod : 가장 많이 쓰는 패키지. 데이터 공유와 의존성 주입에 적합하다.
• Bloc / Cubit : 이벤트 기반 상태관리. Flutter앱의 비즈니스 로직을 명확히 분리한다.
• GetX : 간단한 상태관리, 라우팅 제공 패키지
• Redux / MobX : 대규모 앱에 적합

 

 

요약

• 상태(State) : 위젯의 현재 데이터 또는 UI의 상태
• Stateless Widget : 상태가 변하지 않는 위젯
• Stateful Widget : 상태가 변경될 수 있는 위젯