📚 Today I Learned 14회차 - Dart 컬렉션 제어 흐름 🔄

📖 Dart 컬렉션 제어 흐름

🤔 질문

다음과 같은 코드에서 children 배열에 if 문의 결과에 따라 Container가 포함되는 형태를 보게 되었습니다:

children: [
  VideoPlayer(videoPlayerController!),
  if (showControls) Container(color: Colors.black.withOpacity(0.5)),
]

이 형태는 처음 보는 형태인데, 어떻게 문법적으로 가능한 걸까요? if 문을 {} 안에 두었을 때는 안됐는데 말이죠.

💡 답변

네, 처음 보시면 굉장히 신기하게 느껴질 수 있는 문법입니다. 그 코드가 문법적으로 가능한 이유는 Dart 언어에서 2.3 버전부터 도입된 컬렉션 제어 흐름(Collection Control Flow) 기능 중 하나인 collection if 덕분입니다.

결론부터 말씀드리면, if문이 {}(중괄호) 없이 사용될 때 문(Statement)이 아닌 표현식(Expression)처럼 동작하여 리스트의 일부가 될 수 있기 때문입니다.

📚 주요 내용

1️⃣ 문(Statement) vs 표현식(Expression)

이 문법을 이해하려면 먼저 두 가지의 차이를 알아야 합니다.

• 문(Statement): 특정 작업을 수행하도록 하는 명령입니다. 그 자체가 값으로 평가되지 않습니다. 우리가 흔히 아는 if (...) { ... }, for (...) { ... } 등이 여기에 해당합니다.
• 표현식(Expression): 평가되었을 때 하나의 값(value)을 생성하는 코드 조각입니다. 1 + 2, isLoggedIn, Container() 등이 모두 표현식입니다.

기존의 if (...) { ... }는 문(Statement)이기 때문에, 값을 넣어야 하는 children 배열(List) 안에 직접 들어갈 수 없었습니다. 리스트는 값들의 모음이기 때문이죠.

// ❌ 이건 문법적으로 불가능합니다.
// 리스트 안에는 '값'이 와야 하는데, if "문"이 왔기 때문입니다.
children: [
  VideoPlayer(videoPlayerController!),
  if (showControls) { // 중괄호가 있는 if "문"
    Container(color: Colors.black.withOpacity(0.5));
  }
]

2️⃣ collection if의 등장 ✨

Dart는 이런 불편함을 해소하고 더 선언적인 UI 코드를 작성할 수 있도록 collection if를 도입했습니다. 이는 if를 표현식처럼 사용하여 조건에 따라 컬렉션(List, Map, Set)에 요소를 추가할 수 있게 해주는 특별한 문법입니다.

// ✅ 이렇게 중괄호 없이 사용하면 'collection if' 문법이 적용됩니다.
children: [
  VideoPlayer(videoPlayerController!),

  // 'showControls'가 true이면, 이 자리에 Container()라는 '값'이 포함된다.
  // false이면, 아무것도 없는 것처럼 취급된다.
  if (showControls) Container(color: Colors.black.withOpacity(0.5)),
]

이 코드는 “만약 showControls가 true라면 이 리스트에 Container 위젯을 포함시켜줘” 라는 의미로 해석됩니다. 덕분에 코드가 훨씬 간결하고 직관적으로 변합니다.

3️⃣ 과거에는 어떻게 구현했을까? 🕰️

이 문법이 없던 시절에는 아래와 같이 코드를 작성해야 했습니다. 훨씬 번거롭죠.

방법 1: 삼항 연산자 사용

💡 조건이 간단할 때 사용하는 방법입니다.

null을 넣으면 Flutter가 빈 공간으로 처리하는 것을 이용하지만, 가독성이 떨어지고 리스트에 null이 포함될 수 있습니다.

children: [
  VideoPlayer(videoPlayerController!),
  showControls ? Container(color: Colors.black.withOpacity(0.5)) : SizedBox.shrink(), // false일 때 빈 위젯을 넣어야 함
]

방법 2: 리스트를 미리 만들고 add 메소드 사용

가장 일반적인 방법이었지만, 위젯 트리 안에서 로직이 분리되어 코드가 장황해집니다.

List<Widget> _buildChildren() {
  final children = <Widget>[
    VideoPlayer(videoPlayerController!),
  ];

  if (showControls) {
    children.add(Container(color: Colors.black.withOpacity(0.5)));
  }

  return children;
}

// ... build 메소드 안에서 ...
Column(
  children: _buildChildren(),
)

💡 결론: collection if는 이 모든 번거로움을 한 줄로 해결해주는 매우 유용한 기능입니다. collection for나 spread(...) 연산자와 함께 사용하면 더욱 강력하고 깔끔한 코드를 작성할 수 있습니다.

📝 마무리

✅ 오늘 배운 것

• 컬렉션 제어 흐름: Dart 2.3부터 도입된 강력한 문법
• collection if: 조건에 따라 컬렉션에 요소를 동적으로 추가
• 문 vs 표현식: Statement와 Expression의 차이점
• 코드 간결성: 과거 방법 대비 훨씬 간결하고 읽기 쉬운 코드 작성 가능

🚀 추가 학습 주제

• collection for: 반복문을 컬렉션 내부에서 사용
• spread operator(...): 컬렉션을 펼쳐서 요소 추가
• collection if-else: 조건에 따라 다른 요소 추가