Dart 고급 프레임워크

Dart Flutter 프레임워크 기초

Dart Flutter 프레임워크 기초 — 고급

Flutter 프레임워크 기초

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

Flutter는 Google에서 개발한 UI 툴킷으로, 단일 코드베이스로 모바일, 웹, 데스크탑 애플리케이션을 개발할 수 있는 강력한 플랫폼입니다. 실무에서 Flutter를 배우는 것은 매우 중요합니다. 왜냐하면 기업들이 빠르고 효율적인 앱 개발을 원하고, Flutter는 이러한 요구를 충족시켜 주기 때문입니다.

만약 Flutter를 모른다면, 다양한 플랫폼에서 작동하는 앱을 개발하는 데 있어 코드 중복성과 유지보수 어려움에 직면하게 될 것입니다. 결국, 시간과 비용이 더 소모되고, 경쟁력을 잃을 수 있습니다.

2. 핵심 개념 설명

Flutter의 핵심 개념은 다음과 같습니다:

위젯(Widget): Flutter의 모든 것은 위젯으로 이루어져 있습니다. 위젯은 UI의 구성 요소로, 버튼, 텍스트, 이미지 등 다양한 형태로 존재합니다. 마치 LEGO 블록처럼, 위젯을 조합하여 복잡한 UI를 구성할 수 있습니다.
상태(State): 상태는 위젯이 현재 가지고 있는 정보를 의미합니다. 예를 들어, 버튼의 클릭 여부나 텍스트 입력 내용을 관리합니다. 상태가 변경되면 UI도 자동으로 업데이트됩니다.

용어	정의
위젯	UI 구성 요소를 나타내는 기본 단위
상태	위젯의 현재 정보를 나타내는 값
상태관리	위젯의 상태를 관리하는 방법

3. 기본 코드 예제

Flutter의 기본적인 사용법을 보여주는 코드입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter 기본 예제')),
        body: Center(child: Text('안녕하세요, Flutter!')),
      ),
    );
  }
}

실행 결과: "안녕하세요, Flutter!"라는 텍스트가 중앙에 표시됩니다.

import 'package:flutter/material.dart';: Flutter의 Material 디자인 라이브러리를 가져옵니다.
void main() { ... }: 프로그램의 진입점입니다. Flutter 앱이 시작될 때 호출됩니다.
runApp(MyApp());: MyApp 위젯을 화면에 렌더링합니다.
class MyApp extends StatelessWidget { ... }: StatelessWidget을 상속받아 MyApp 클래스를 정의합니다.
@override Widget build(BuildContext context) { ... }: UI를 생성하는 메서드입니다.
MaterialApp(...): Material 디자인의 기본 앱 구조를 제공합니다.
Scaffold(...): 기본적인 화면 구조를 제공합니다.
Center(child: Text(...)): 텍스트를 화면의 중앙에 배치합니다.

4. 실전 활용 예제

상태 관리 예제: 쇼핑몰에서 장바구니를 구현할 때, 사용자가 상품을 추가하거나 제거할 수 있도록 상태를 관리해야 합니다.

class Cart extends StatefulWidget {
  @override
  _CartState createState() => _CartState();
}

class _CartState extends State<Cart> {
  List<String> items = [];

  void addItem(String item) {
    setState(() {
      items.add(item);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ElevatedButton(
          onPressed: () => addItem('상품 ${items.length + 1}'),
          child: Text('상품 추가'),
        ),
        Text('장바구니: ${items.join(', ')}'),
      ],
    );
  }
}

비동기 처리 예제: 데이터를 서버에서 받아와서 화면에 표시할 때:

Future<String> fetchData() async {
  await Future.delayed(Duration(seconds: 2)); // 2초 대기
  return '서버에서 가져온 데이터';
}

class DataScreen extends StatefulWidget {
  @override
  _DataScreenState createState() => _DataScreenState();
}

class _DataScreenState extends State<DataScreen> {
  String data = '로딩 중...';

  @override
  void initState() {
    super.initState();
    fetchData().then((result) {
      setState(() {
        data = result;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Text(data);
  }
}

5. 흔한 실수와 주의사항

상태 업데이트 누락: setState()를 호출하지 않으면 UI가 업데이트되지 않습니다.

- 잘못된 코드:

   void addItem(String item) {
       items.add(item); // setState() 누락
   }

- 올바른 코드:

   void addItem(String item) {
       setState(() {
           items.add(item);
       });
   }

비동기 처리에서 상태 업데이트: 비동기 작업 중 상태 업데이트를 잘못 처리할 경우 에러가 발생할 수 있습니다.

- 잘못된 코드:

   void initState() {
       fetchData().then((result) {
           data = result; // setState() 누락
       });
   }

- 올바른 코드:

   void initState() {
       super.initState();
       fetchData().then((result) {
           setState(() {
               data = result;
           });
       });
   }

6. 정리

Flutter는 위젯 기반의 UI 툴킷이며, 상태 관리가 중요합니다.
비동기 처리를 통해 서버와의 통신을 원활하게 할 수 있습니다.
setState()를 활용하여 상태 변경 시 UI를 업데이트해야 합니다.

다음에 학습하면 좋은 주제는 Flutter의 고급 상태 관리(예: Provider, Riverpod), 네트워크 요청 처리 및 애니메이션입니다.