3 Cool Dart 패턴

Flutter 앱을 만들 때 유용하게 쓸 수 있는 Dart 패턴 세 가지를 소개해 드릴게요. 다음 앱을 만들 때 바로 써볼 만한 것들이에요. 코드와 함께 하나씩 천천히 살펴볼게요.

출처: 3 cool Dart patterns

본문

Flutter 프레임워크를 쓰면 Dart 프로그래밍 언어로 아름다운 애플리케이션을 만들 수 있어요. 그동안 다양한 프로젝트를 하면서 뛰어난 Flutter 개발자가 되는 데 도움을 준 유용한 Dart 패턴들을 배웠는데요, 여러분의 다음 앱에서 써보길 추천하는 패턴 세 가지를 정리했어요.

조건부 값 할당(conditionally assigning a value): boolean ? widget : widget
위젯을 컬렉션으로 합치기(merging widgets into a collection): for ()...[]
익명 함수 즉시 호출(immediately invoking an anonymous function): () {} ()

이 글에서는 각 패턴을 어떻게 쓰는지 살펴보고, 마지막에 코드를 직접 만져볼 수 있는 Pen도 함께 넣어 뒀어요.

[그림] 이 글에서 다룰 코드와 그것이 만들어 내는 UI를 보여 주는 스크린샷

조건부 값 할당 (Conditionally assigning a value)

조건부 할당 연산자인 ?:(삼항 연산자라고도 해요)는 조건식 하나와 값 표현식 두 개가 필요해요. 이 패턴은 위젯이 불리언(boolean) 값에 따라 달라질 때 아주 유용해요. 연산을 별도 메서드로 모듈화하는 대신, 삼항 연산자로 코드를 인라인으로 실행할 수 있거든요. 저는 이 기법을 수도 없이 많이 써 왔어요.

다음 예시에서 AppBar의 제목은 불리언 값에 의존해요. (이 경우 값은 isVegetarian 불리언에 달려 있어요.) 값이 true면 제목 텍스트가 첫 번째 값(“Vegetarian Food”)으로 설정되고, 그렇지 않으면 두 번째 값(“Non-Vegetarian Food”)으로 설정돼요.

appBar: AppBar(
  title: Text(Random().nextBool()
      ? 'Vegetarian Food'
      : 'Non-Vegetarian Food'),
),

위젯을 컬렉션으로 합치기 (Merging widgets into a collection)

for () ...[] 패턴은 스프레드 연산자(...)를 사용해 위젯 목록을 기존 컬렉션에 합쳐 주는 방식이에요. 위젯 목록을 다룰 때마다, 특히 children 프로퍼티를 쓸 때 자주 사용해요. 다음 예시는 이 기법으로 위젯 목록을 만드는 모습이에요:

children: [
  Container(),
  for (final food in foods) ...[
    if (isVegetarian == food.isVegetarian)
      ListTile(title: Text(food.name)),
    SizedBox(height: 50.0),
  ],
],

이 예시에서 foods는 Food 객체들의 목록이며, 다음과 같이 정의돼요:

List<Food> foods = [
  Food(name: 'apple', isVegetarian: true),
  Food(name: 'nuts', isVegetarian: true),
  Food(name: 'eggs', isVegetarian: true),
  Food(name: 'chicken', isVegetarian: false),
];

class Food {
  Food({
    this.name,
    this.isVegetarian,
  });

  String name;
  bool isVegetarian;
}

for () ...[] 패턴은 위젯 목록에 여러 위젯을 여러 번 추가해야 할 때(예시에서 isVegetarian이 true인 경우 ListTile 위젯을 3번 넣는 상황) 아주 편리해요.

스프레드 연산자(...)는 Dart에서 비교적 최근에 추가된 기능이라, pubspec.yaml 파일에 Dart SDK 2.3.0 이상을 지정했는지 확인해 주세요:

environment:
  sdk: ">=2.3.0 < 3.0.0"

컬렉션 연산자와 스프레드 연산자에 대해 더 알고 싶다면 Dart 언어 투어를 읽어 보세요.

익명 함수 즉시 호출 (Immediately invoking an anonymous function)

세 번째 패턴인 () {} ()는 Dart에서의 즉시 실행 함수 표현식(IIFE)에 해당해요. 이 편리한 패턴은 익명 함수를 정의해서 즉시 실행할 수 있게 해 줘요. 저는 여러 출력이 가능한 위젯을 다룰 때 이 패턴이 매우 유용하다는 걸 알았어요. 중첩된 삼항 연산자를 쓰거나 단순한 호출을 모듈화하는 대신 코드를 인라인으로 유지할 수 있거든요. 다음 예시는 switch 문을 담은 익명 함수를 보여 줘요.

color: () {
  switch (getRandomElement(foods).name) {
    case 'apple':
      return Colors.green;
    case 'nuts':
      return Colors.brown;
    case 'eggs':
      return Colors.yellow;
    default:
      return Colors.transparent;
  }
}(),

결론

CodePen에서 Flutter 코드를 직접 만져볼 수 있어요. 이 글에 나온 모든 코드를 담은 Pen이 있어요:

그리고 색상만 다루는 또 다른 CodePen 예시도 있어요:

이 세 가지 Dart 패턴이 Flutter 애플리케이션을 개발할 때 더 많은 자유를 주길 바라요. 다른 유용한 기법이 있다면 댓글로 공유해 주세요!

3 Cool Dart 패턴