Flutter 기본기 다지기

"Everything is a Widget" — Flutter의 핵심 철학

Flutter는 위젯 기반의 UI 프레임워크로, 모든 UI 요소를 위젯으로 표현합니다. 이는 개발의 일관성과 효율성을 크게 높여줍니다.

선언적 UI 구성

Flutter는 React에서 영감을 받은 선언적 프로그래밍 방식을 채택했습니다. 개발자는 원하는 UI 상태를 직접 선언하며, 프레임워크가 이를 효율적으로 렌더링합니다

 

명령형 UI

💡 어떠한 상태가 되도록 명령한다.

ViewA a = ViewA();
ViewB b = ViewB();
a.setColor(red) // 빨간색이 되어라
b.setColor(yello) // 노란색이 되어라
a.add(b) // b는 a의 child가 되어라

 

선언형 UI

💡 어떠한 최종 상태를 선언한다.

// 빨간색 A가 노란색 B를 child로 가지고 있다.
return ViewA(
	color: red,
	child: ViewB(
	color: yello,
),
);

 

선언형 UI

• 상태만 선언하면 UI는 자동으로 업데이트된다.
• 최종 상태 선언에만 집중할 수 있다.
• 예시) Flutter StatefulWidget

명령형 UI

• 상태 변경에 따른 UI 업데이트를 직접 명령한다.
• UI를 보다 세밀하게 제어 할 수 있다.
• 예시) JavaScript를 이용한 DOM 조작

상태 기반 UI 관리

위젯은 현재 상태에 따라 UI를 정의합니다. 상태 변화 시 Flutter는 필요한 부분만을 효과적으로 업데이트하여 성능을 최적화합니다.

 

Flutter의 이점

이러한 접근 방식은 성능 향상뿐만 아니라 개발자의 생산성도 높입니다. 복잡한 UI 업데이트 로직 대신 위젯 구성에만 집중할 수 있기 때문입니다.

요약하면, Flutter 개발은 위젯을 조합하여 반응형 크로스 플랫폼 애플리케이션을 만드는 과정입니다.

 

 

---

나만의 Flutter 위젯 분류

위젯들을 이해하고 활용하는 것이 Flutter 개발의 핵심입니다.

위젯의 종류

Flutter는 풍부한 UI 위젯을 제공합니다. 자세한 내용은 공식 문서에서 확인할 수 있습니다.

위젯들을 이해하기 쉽게 직접 나누어 봅시다(공식적인 분류는 아직 존재하지 않는 것 같음)

1. 플랫폼별 위젯

• Material (Android) 위젯
  • Google의 Material Design 가이드라인을 따르는 위젯들입니다.
• Cupertino (iOS) 위젯
  • Apple의 Human Interface Guidelines를 기반으로 한 iOS 스타일 위젯들입니다.

대부분의 경우 Material 위젯을 사용하지만, 플랫폼별 특성을 살리고 싶다면 각각의 위젯을 적절히 활용할 수 있습니다.

2. 기본 위젯 (Basic Widgets)

• Text: 다양한 스타일의 텍스트를 표현합니다.
• Row와 Column: CSS의 flexbox와 유사한 방식으로 수평, 수직 레이아웃을 구성합니다.
• Stack: 위젯들을 겹쳐 배치할 수 있으며, Positioned 위젯과 함께 사용하여 정교한 위치 조정이 가능합니다.
• Container: 다재다능한 박스 위젯으로, 배경, 테두리, 그림자 등 다양한 스타일링이 가능합니다.

이러한 위젯들을 조합하고 커스터마이징하여 원하는 UI를 구현할 수 있습니다. Flutter의 강력함은 이 위젯들의 유연성과 확장성에 있습니다.

상태 관리에 따른 위젯 분류

Flutter에서는 상태 관리 방식에 따라 위젯을 두 가지로 분류합니다:

• Stateless Widget: 내부 상태가 없는 정적 위젯으로, 한 번 렌더링된 후 변경되지 않습니다.
• Stateful Widget: 동적 상태를 가진 위젯으로, 사용자 상호작용이나 이벤트에 따라 UI가 변경될 수 있습니다.

성능 최적화를 위해서는 가능한 Stateless Widget을 사용하는 것이 좋습니다. Stateless Widget은 빌드 시 한 번만 생성되지만, Stateful Widget은 상태 변경 시마다 재빌드되기 때문입니다.

 

---

Flutter 프로젝트 구조 이해하기

Flutter 프로젝트를 효과적으로 개발하기 위해서는 기본 구조를 이해하는 것이 중요합니다. 다음은 주요 구성 요소들입니다

• 프로젝트 폴더 구조
  • 플랫폼별 폴더 (android, ios, linux, macos, web, windows): 각 플랫폼에 필요한 네이티브 코드 포함
  • lib 폴더: 주요 Dart 코드가 위치하는 곳
  • pubspec.yaml: 프로젝트 설정, 의존성, 리소스 등을 관리하는 파일
• 시작점 (Entry Point)
  • lib/main.dart 파일의 main() 함수가 앱의 시작점
  • 새 프로젝트 시작 시 기본 예제 코드는 삭제하고 시작하는 것이 일반적

패키지와 임포트

• 패키지: Flutter와 커뮤니티에서(다른 개발자들) 제공하는 재사용 가능한 코드 모듈
• import 문으로 필요한 패키지와 위젯을 프로젝트에 추가
• 패키지 종류:
  • Dart 기본 패키지 (예: import 'dart:math')
  • Flutter 제공 패키지 (예: import 'package:flutter/material.dart')
  • 외부 또는 사용자 정의 패키지 (예: import '../models/mypackage.dart')

---

Flutter는 **"Everything is a Widget"**이라는 철학을 중심으로, 선언적 UI와 위젯 기반 설계를 통해 효율적이고 반응형
애플리케이션 개발을 가능하게 합니다.
위젯의 구조와 상태 관리 방식을 이해하고 적절히 활용한다면, 복잡한 UI도 손쉽게 구현할 수 있습니다.
Flutter를 통해 일관된 코드와 크로스 플랫폼 개발의 강력한 이점을 경험해보세요! 🚀

Flutter 기본기 다지기는 다음 글에서 더 자세히 다뤄보겠습니다! 😊