Dart 고급 프레임워크

Dart 커스텀 위젯 만들기

Dart 커스텀 위젯 만들기 — 고급

커스텀 위젯 만들기

1. 도입 (왜 배워야 하는가)

Dart 언어와 Flutter 프레임워크가 인기를 끌면서, 많은 개발자들이 UI를 구성하기 위해 Flutter를 사용하고 있습니다. 이때, 커스텀 위젯을 만드는 능력은 매우 중요합니다. 커스텀 위젯은 재사용 가능하고, 특정 요구를 충족하는 UI 구성 요소를 만들 수 있게 해줍니다. 만약 커스텀 위젯을 만들 수 없다면, 기본 제공되는 위젯들을 조합해야 하며, 이는 코드의 가독성을 떨어뜨리고 유지보수를 어렵게 만듭니다. 또한, 프로젝트의 확장성과 유연성이 떨어질 수 있습니다.

2. 핵심 개념 설명

커스텀 위젯

정의: Flutter에서 기본 제공되는 위젯을 바탕으로 사용자의 필요에 맞게 제작한 위젯입니다.
비유: 요리를 할 때, 기본 재료(기본 위젯)를 가지고 자신만의 레시피(커스텀 위젯)를 만들어 새로운 요리를 만드는 것과 같습니다.

Stateful vs Stateless 위젯

용어	설명
Stateless	상태(state)가 없는 위젯. 변경되지 않는 UI를 표시.
Stateful	상태(state)를 가지는 위젯. UI가 변경될 수 있음.

3. 기본 코드 예제

가장 간단한 커스텀 위젯을 만들어 보겠습니다.

import 'package:flutter/material.dart';

class MyCustomButton extends StatelessWidget {
  final String label;

  MyCustomButton({required this.label});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        print('$label 버튼이 클릭되었습니다.');
      },
      child: Text(label),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('커스텀 위젯 예제')),
      body: Center(child: MyCustomButton(label: '클릭하세요')),
    ),
  ));
}

실행 결과: "클릭하세요"라는 버튼이 화면 중앙에 표시됩니다.

MyCustomButton 클래스는 StatelessWidget을 상속받아 커스텀 버튼을 정의합니다.
생성자에서 label을 받아와 버튼의 텍스트로 사용합니다.
build 메서드에서 ElevatedButton을 반환하며, 버튼이 클릭될 때 콘솔에 메시지를 출력합니다.
main 함수에서 Flutter 앱을 실행하며, 앱 바와 버튼을 포함하는 Scaffold를 만듭니다.

4. 실전 활용 예제

예제 1: 쇼핑몰에서 장바구니 아이콘 구현

장바구니 아이콘을 클릭 시 장바구니에 추가되는 기능을 구현할 수 있습니다.

class CartIcon extends StatefulWidget {
  @override
  _CartIconState createState() => _CartIconState();
}

class _CartIconState extends State<CartIcon> {
  int itemCount = 0;

  void _addToCart() {
    setState(() {
      itemCount++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        IconButton(
          icon: Icon(Icons.shopping_cart),
          onPressed: _addToCart,
        ),
        Text('장바구니: $itemCount 개'),
      ],
    );
  }
}

예제 2: 사용자 프로필 카드

사용자 정보를 보여주는 카드 형태의 위젯을 구현할 수 있습니다.

class ProfileCard extends StatelessWidget {
  final String name;
  final String email;

  ProfileCard({required this.name, required this.email});

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        children: [
          Text('이름: $name'),
          Text('이메일: $email'),
        ],
      ),
    );
  }
}

5. 흔한 실수와 주의사항

실수 1: 위젯 상태 관리

잘못된 코드: 상태를 관리하지 않고 StatelessWidget을 사용.
올바른 코드: StatefulWidget을 사용하여 상태를 변경.

실수 2: props 누락

잘못된 코드: 생성자에서 label을 누락.

MyCustomButton(); // 오류 발생

올바른 코드:

MyCustomButton(label: '클릭하세요'); // 정상 작동

6. 정리

커스텀 위젯은 Flutter 개발에서 코드의 재사용성과 가독성을 높여줍니다.
StatefulWidget과 StatelessWidget의 차이를 이해하고 적절히 활용해야 합니다.
UI를 구성할 때 커스텀 위젯을 사용하면 유지보수가 용이해집니다.
다음에 학습하면 좋은 주제: Flutter의 상태 관리, 애니메이션과 커스텀 위젯, 위젯 테스트.

학습