1. 개요
Dart 언어는 객체지향 프로그래밍(OOP)을 기반으로 하고 있으며, 특히 Flutter에서는 UI를 위한 위젯이라는 객체지향적인 개념이 중요한 역할을 합니다. 이 글에서는 Dart의 클래스와 Flutter에서의 위젯에 대해 알아보겠습니다.
2. Dart의 클래스와 객체지향 프로그래밍
2.1 클래스와 객체
클래스(Class): Dart에서 클래스는 객체를 만들기 위한 틀이며, 객체의 설계도입니다. 클래스는 속성(멤버 변수)과 행위(메서드)를 포함합니다.
객체(Object): 클래스를 기반으로 생성된 실체를 의미하며, 클래스의 인스턴스입니다.
// Dart에서의 클래스 예제
class Person {
String name;
int age;
// 생성자
Person(this.name, this.age);
// 메서드
void introduce() {
print('Hello, I am $name and I am $age years old.');
}
}
void main() {
// 객체 생성
var person = Person('John', 25);
// 메서드 호출
person.introduce();
}
2.2 상속과 다형성
상속(Inheritance): 하나의 클래스가 다른 클래스의 속성과 메서드를 물려받는 것을 의미합니다.
다형성(Polymorphism): 여러 클래스가 동일한 인터페이스나 기본 클래스를 공유하되, 각각의 클래스는 특별한 방식으로 동작할 수 있는 능력을 가집니다.
다음 3. Flutter 위젯 섹션에서 나올 위젯이라는 개념도 기본적으로 상속 개념과 다형성 개념을 사용하고 있습니다.
객체지향 프로그래밍의 개념을 이해하고 있다면 플러터 위젯을 사용함에 있어서도 이질감 없이 코드를 쉽게 이해할 수 있습니다.
// 상속과 다형성 예제
class Animal {
void makeSound() {
print('Some generic sound');
}
}
// Dog 클래스를 선언할 때, Animal 클래스를 상속받음
class Dog extends Animal {
// 다형성 - 부모의 함수를 재 선언
@override
void makeSound() {
print('Bark!');
}
}
void main() {
Animal animal = Dog();
animal.makeSound(); // 다형성을 통해 Dog 클래스의 makeSound가 호출됨
}
3. Flutter 위젯
Flutter에서 UI는 위젯으로 구성됩니다. 모든 것이 위젯이며, 위젯은 불변(Immutable)하거나 가변(Mutable)할 수 있습니다.
화면에 보이는 거의 모든 UI 요소, 레이아웃, 애니메이션 등은 위젯으로 표현됩니다. 위젯은 Dart 언어의 클래스로 구현되어 있습니다.</span >
3.1 StatelessWidget과 StatefulWidget
StatelessWidget: 상태가 없는 위젯으로, 한 번 그려진 후에는 변하지 않습니다. 예를 들어, 텍스트나 아이콘 등이 여기에 해당합니다.
> 여기서 언급되는 텍스트, 아이콘과 같은 클래스들도 모두 위젯입니다. 따라서 플러터는 거의 다 위젯으로 구성된다는 말이 과언이 아니죠.
class MyTextWidget extends StatelessWidget {
final String text;
MyTextWidget(this.text);
@override
Widget build(BuildContext context) {
return Text(text);
}
}
StatefulWidget: 상태를 가진 위젯으로, 사용자와 상호작용하거나 동적인 UI를 표현할 때 사용됩니다.
setState()라는 함수를 호출하게 되면, build함수가 재실행됩니다. 따라서 화면이 재 렌더링 되면서 동적인 UI를 구현할 수 있습니다.</span >
class MyCounterWidget extends StatefulWidget {
@override
_MyCounterWidgetState createState() => _MyCounterWidgetState();
}
class _MyCounterWidgetState extends State<MyCounterWidget> {
int counter = 0;
@override
Widget build(BuildContext context) {
return Column(
children: [
Text('Counter: $counter'),
ElevatedButton(
onPressed: () {
setState(() {
counter++;
});
},
child: Text('Increment'),
),
],
);
}
}
4. 정리
Dart 언어의 클래스와 객체지향 프로그래밍 개념은 Flutter에서의 위젯 설계와 밀접한 관련이 있습니다. 객체지향적인 접근 방식은 코드의 재사용성과 유지보수성을 향상시키며, Flutter의 위젯을 활용하여 동적이고 효과적인 UI를 구현할 수 있습니다.</span >
5. 참고 자료
- dart docs: https://dart.dev/language
Introduction to Dart
A brief introduction to Dart programs and important concepts.
dart.dev
- 연관 글:
