Flutter StatelessWidget, StatefulWidget 차이

안녕하세요 독학코딩입니다. 오늘은 Flutter에서 가장 중요한 개념인 StatelessWidget 와 StatefulWidget의 차이에 대해서 배워보겠습니다. 영어 단어로만 생각하면 Stateless, Stateful는 상태가 없는, 상태가 있는 혹은 상태 비저장, 상태 저장 등으로 해석할 수 있습니다. 한글로 생각하니깐 조금 이해하기 좋으신가요? 

 

 

Flutter StatelessWidget

공식 문서에 설명에서 StatelessWidget 는 "변경 가능한 상태가 필요하지 않은 위젯" 입니다. 

class FirstRoute extends StatelessWidget {
  const FirstRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Route'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text("Go to Second"),
          onPressed: () {
            // Navigate to second route when tapped.
          },
        ),
      ),
    );
  }
}

위의 예제처럼 위젯 빌드 이후 변경이 필요하지 않은 경우엔 StatelessWidget을 사용하시면 됩니다. 

 

Flutter StatefulWidget

공식 문서에 설명에서 StatefulWidget 는 "변경 가능한 상태를 가진 위젯"입니다. 

class FirstRoute extends StatefulWidget {
  const FirstRoute({Key? key}) : super(key: key);

  @override
  State<FirstRoute> createState() => _FirstRouteState();
}

class _FirstRouteState extends State<FirstRoute> {
  List<String> dropdownList = ['One', 'Two', 'Free', 'Four'];
  String dropdownValue = 'One';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Route'),
      ),
      body: Center(
        child: DropdownButton<String>(
          value: dropdownValue,
          dropdownColor: Colors.red,
          onChanged: (String? newValue) {
            setState(() {
              dropdownValue = newValue!;
            });
          },
          items: dropdownList.map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
        ),
      ),
    );
  }
}

StatefulWidget 은 위의 예제의 DropdownButton처럼 사용자의 입력이 있고 해당 입력을 위젯에 새롭게 반영해야되는, 즉 상태 변경이 필요한 경우에 사용되는 위젯 입니다.

 

StatelessWidget, StatefulWidget 왜 구분하는가?

가장 큰 이유는 하드웨어의 리소스를 비용을 줄이기 위해서 라고 설명드릴 수 있습니다. 조금 쉽게 설명하자면 쓸데없이 모바일, 피씨의 메모리를 잡아먹지 않기 위해서 라는 것 입니다. StatelessWidget 의 경우 한번 빌드한 이후엔 변경이 없기 때문에 한번 빌드 후 메모리를 더 이상 사용하지 않는 것 입니다. 반대로 StatefulWidget 의 경우 빌드 후에도 변경이 있을 수 있는 위젯이기 때문에 때때로 위젯을 리빌드하여 메모리를 더 사용하는 것입니다.