Flutter Stateless & Stateful Widget 라이프 사이클 이해하기

Flutter 위젯 생명주기 이해하기

Flutter에서 위젯은 UI를 구성하는 기본 구성 요소입니다. 다양한 플랫폼에 적용될 수 있는 유연하고 재사용 가능한 UI를 제공하는 Flutter 프레임워크의 핵심입니다. 이러한 이유로, 위젯의 생명주기 관리는 Flutter 애플리케이션 개발의 핵심적인 요소입니다.

Flutter의 위젯은 Stateless와 Stateful 두 가지 주요 유형으로 구분됩니다. Stateless 위젯은 상태를 가지지 않는 반면, Stateful 위젯은 내부 상태를 가집니다. 두 유형의 위젯은 서로 다른 생명주기를 가지며, 이를 이해하고 관리하는 것이 중요합니다.

위젯의 생명주기는 위젯이 생성되고 시스템에서 소멸하는 과정에 걸쳐 일어나는 일련의 이벤트입니다. 이를 정확히 이해하고 활용하는 것은 메모리 관리와 성능 최적화에 필요하며, 예기치 않은 에러를 방지하고 효율적인 애플리케이션 개발을 가능하게 합니다.

이 글에서는 Stateless와 Stateful 위젯의 생명주기에 대해 자세히 살펴보고, 실제 예제를 통해 이를 효과적으로 활용하는 방법을 알아보겠습니다.

Stateless 위젯의 생명주기

Stateless 위젯은 Flutter에서 상태를 가지지 않는 위젯입니다. 이러한 위젯은 일반적으로 고정된 값을 사용하며, 내부 상태가 변경되지 않습니다. Stateless 위젯의 생명주기는 간단하며, 다음 단계로 구성됩니다.

위젯 생성(Constructor)

Stateless 위젯이 처음 생성될 때, 위젯의 생성자가 호출됩니다. 여기서 위젯의 속성(properties)를 초기화하거나, 필요한 경우 인자를 전달할 수 있습니다.

class MyStatelessWidget extends StatelessWidget {
  final String title;

  MyStatelessWidget({required this.title});
}

build 메소드

build 메소드는 Stateless 위젯의 핵심적인 기능을 구현하는 장소입니다. 이 메소드는 주로 위젯의 레이아웃을 구성하며, 위젯의 구성 요소를 반환합니다. 하지만, 이 메소드는 화면이 렌더링될 때나 데이터가 변경될 때마다 호출되므로, 이 내부에서 많은 연산이나 상태 변경을 수행하는 것은 피해야 합니다.

class MyStatelessWidget extends StatelessWidget {
  final String title;

  MyStatelessWidget({required this.title});

  Widget build(BuildContext context) {
    return Text(title);
  }
}

이상으로 Stateless 위젯의 생명주기를 간략하게 살펴보았습니다. Stateless 위젯은 간단한 UI 요소를 구성할 때 사용되며, 상태 관리가 필요하지 않은 경우에 적합합니다.

Stateful 위젯의 생명주기

Stateful 위젯은 Flutter에서 변화하는 상태를 가지는 위젯입니다. 이러한 위젯은 상태가 변경될 때마다 렌더링되며, 복잡한 UI 요소나 상태 관리가 필요한 경우에 사용됩니다. Stateful 위젯의 생명주기는 다양한 단계를 포함하며, 이를 이해하고 관리하는 것이 중요합니다.

위젯 생성(Constructor)

Stateful 위젯이 처음 생성될 때, 위젯의 생성자가 호출됩니다. 위젯의 속성(properties)를 초기화하고, 필요한 인자를 전달할 수 있습니다.

class MyStatefulWidget extends StatefulWidget {
  final String title;

  MyStatefulWidget({required this.title});

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

createState 메소드

createState 메소드는 Stateful 위젯의 상태를 관리하는 State 객체를 생성합니다. 이 메소드는 위젯이 처음 만들어질 때 호출되며, 이를 통해 생성된 State 객체를 반환합니다.

@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();

상태(State) 초기화

State 객체가 생성되면, initState 메소드를 사용해 초기 상태를 설정합니다. 이 메소드는 State 객체가 생성된 직후 한 번만 호출되며, 상태 초기화와 관련된 작업을 수행하는 데 유용합니다.

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  bool isVisible;

  @override
  void initState() {
    super.initState();
    isVisible = true;
  }
}

build 메소드

build 메소드는 위젯의 레이아웃을 구성하며, 위젯의 구성 요소를 반환합니다. 상태가 변경될 때마다 호출되며, createState 메소드에서 반환된 State 객체와 함께 작동합니다.

@override
Widget build(BuildContext context) {
  return Column(
    children: [
      if (isVisible) Text(widget.title),
      ElevatedButton(
        onPressed: () {
          setState(() {
            isVisible = !isVisible;
          });
        },
        child: Text('Toggle Visibility'),
      ),
    ],
  );
}

상태 변경(setState)

상태 변경이 필요한 경우, setState 메소드를 사용하여 호출합니다. 이 메소드는 변경된 상태를 적용한 후에 build 메소드를 다시 호출하며, 화면에 새로운 상태를 반영합니다.

onPressed: () {
  setState(() {
    isVisible = !isVisible;
  });
}

리소스 해제(dispose)

State 객체가 제거되기 전에 필요한 리소스 해제 작업을 수행하려면, dispose 메소드를 사용할 수 있습니다. 이 메소드는 State 객체가 시스템에서 제거되기 직전에 호출되며, 핸들러 해제, 스트림 닫기 등의 작업에 유용합니다.

@override
void dispose() {
  // 리소스를 해제할 수 있는 곳입니다.
  super.dispose();
}

이로써 Stateful 위젯의 생명주기를 살펴보았습니다. 이러한 단계는 애플리케이션 상태를 관리하고 동적인 UI를 구성하는 데 필요합니다.

생명주기에 따른 예제와 활용법

이번 장에서는 Stateless 및 Stateful 위젯의 생명주기를 적용한 예제를 살펴보고, 다양한 활용 방법에 대해 알아봅니다.

Stateless 위젯의 활용

Stateless 위젯은 일반적으로 고정된 값을 사용하여 UI를 구성할 때 적합합니다. 아래 예제는 사용자의 이름을 받아 환영 메시지를 표시하는 Stateless 위젯입니다.

class WelcomeText extends StatelessWidget {
  final String name;

  WelcomeText({required this.name});

  @override
  Widget build(BuildContext context) {
    return Text('Welcome, $name!');
  }
}

Stateful 위젯의 활용

Stateful 위젯은 상태 변경이 필요한 동적인 UI를 구성하는데 적합합니다. 아래 예제는 사용자가 버튼을 눌러 텍스트의 색상을 변경할 수 있는 Stateful 위젯입니다.

class ColorChangerText extends StatefulWidget {
  final String text;

  ColorChangerText({required this.text});

  @override
  _ColorChangerTextState createState() => _ColorChangerTextState();
}

class _ColorChangerTextState extends State<ColorChangerText> {
  Color textColor = Colors.black;

  void changeTextColor() {
    setState(() {
      textColor = textColor == Colors.black ? Colors.red : Colors.black;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(
          widget.text,
          style: TextStyle(color: textColor),
        ),
        ElevatedButton(
          onPressed: changeTextColor,
          child: Text('Change Text Color'),
        ),
      ],
    );
  }
}

이 예제에서는 initState 메소드를 사용하여 초기 상태를 설정하고, build 메소드에서 텍스트 색상을 변경하며, setState를 사용하여 상태 변경을 반영합니다.

이렇게 Stateless와 Stateful 위젯의 생명주기를 활용하면 다양한 구성 요소와 상태 관리를 수행하는 효과적인 Flutter 애플리케이션을 개발할 수 있습니다.

이 글은 Flutter 위젯의 생명주기를 이해하고 이를 실제 애플리케이션 개발에 활용하는 방법을 설명하였습니다. 이러한 내용은 Flutter 개발자들에게 매우 중요한 지식이므로, 꼭 숙지하시기 바랍니다.