플러터 강좌: 6.5 클래스와 위젯의 정체

1. 클래스(Class)의 이해

클래스는 객체 지향 프로그래밍(OOP)의 기본 단위로, 객체의 설계도를 제공합니다. 다트(Dart) 언어에서 클래스는 데이터 필드와 메소드를 포함할 수 있는 구조체입니다.
클래스는 객체를 생성하기 위한 틀을 제공하며, 각 객체는 클래스의 속성과 메소드를 상속받습니다.

1.1. 클래스 선언

다트에서 클래스를 선언하는 방법은 아래와 같습니다.

class Dog {
    String name;
    
    Dog(this.name);
    
    void bark() {
        print('$name가 짖습니다!');
    }
}

위의 예제는 Dog라는 클래스를 정의하고, name이라는 필드를 가지고 있으며, bark라는 메소드를 포함합니다.

1.2. 클래스의 상속

클래스는 다른 클래스로부터 상속받아 재사용할 수 있습니다. 상속을 통해 기존 클래스의 기능을 확장할 수 있습니다.

class Cat extends Animal {
    void meow() {
        print('야옹!');
    }
}

위 코드에서 Cat 클래스는 Animal 클래스를 상속받아 새로운 기능을 추가합니다.

2. 위젯(Widget)의 정체

플러터에서 모든 것은 위젯입니다. UI 컴포넌트는 물론이고, 레이아웃, 스타일 등 모든 것이 위젯을 통해 표현됩니다. 위젯은 상태를 가질 수 있고, 이를 통해 사용자와 상호작용합니다.

2.1. StatelessWidget vs StatefulWidget

플러터의 위젯은 주로 두 가지로 나뉩니다: StatelessWidget과 StatefulWidget.

StatelessWidget

StatelessWidget은 상태를 가지지 않는 위젯입니다. 이 위젯은 생성된 후에 변경되지 않으며, UI가 항상 동일한 출력을 생성합니다.

class MyStatelessWidget extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Text('안녕하세요, 플러터!');
    }
}

StatefulWidget

StatefulWidget은 상태를 가질 수 있는 위젯으로, 내부 상태가 변경되면 UI도 변경됩니다. 이러한 위젯은 주로 사용자 입력을 필요로 할 때 사용됩니다.

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

class _MyStatefulWidgetState extends State {
    int _counter = 0;

    @override
    Widget build(BuildContext context) {
        return Column(
            children: [
                Text('버튼을 누른 횟수: $_counter'),
                ElevatedButton(
                    onPressed: () {
                        setState(() {
                            _counter++;
                        });
                    },
                    child: Text('증가')
                ),
            ],
        );
    }
}

3. 위젯 트리와 빌드 메소드

플러터의 유연성은 위젯 트리에서 비롯됩니다. 모든 위젯은 트리 구조를 형성하여 서로 연결되어 있으며, 각 위젯은 build 메소드를 통해 UI를 구성합니다.

3.1. 위젯 트리 구조

위젯 트리는 부모 위젯과 자식 위젯으로 이루어져 있습니다. 부모 위젯은 여러 개의 자식 위젯을 포함할 수 있으며, 이를 통해 복잡한 UI를 구성할 수 있습니다.

3.2. 빌드 메소드의 역할

각 위젯은 생성 시 build 메소드를 호출하여 화면에 표시될 내용을 결정합니다. 이 메소드는 위젯의 상태를 기반으로 최적화된 UI를 효과적으로 렌더링합니다.

4. 위젯의 라이프 사이클 이해하기

StatefulWidget의 경우, 위젯의 라이프 사이클이 중요합니다. 각 상태 변화에 따라 다양한 메소드가 호출됩니다. 이를 통해 최적의 성능과 사용자 경험을 제공할 수 있습니다.

4.1. 라이프 사이클 메소드

StatefulWidget의 라이프 사이클은 다음의 메소드로 구성됩니다:

• initState()
• didChangeDependencies()
• build()
• setState()
• dispose()

각 메소드는 특정 조건에서 호출되며, 위젯의 상태를 관리하고, 필요한 경우 리소스를 정리하는 역할을 합니다.