[Flutter 공부하기] 위젯. Widget.

Flutter 개발에서 가장 핵심이 되는 개념은 바로 '위젯(Widget)'인 것 같습니다.
Flutter에서는 UI를 구성하는 모든 요소가 위젯으로 이루어져 있으며, 이러한 위젯들의 조합을 통해 복잡한 사용자 인터페이스를 구현할 수 있습니다.

Flutter 위젯이란?

위젯은 Flutter 애플리케이션의 UI를 구성하는 기본 빌딩 블록이에요. 버튼, 텍스트, 이미지와 같은 시각적 요소뿐만 아니라 레이아웃, 애니메이션, 상호작용을 관리하는 비시각적 요소까지 모두 위젯으로 구현돼요.

 

Flutter의 "Everything is a Widget" 철학은 UI 개발 방식을 일관되고 직관적으로 만들어줍니다.

Flutter 위젯의 특징은 다음과 같아요.

1. 선언적 UI - 위젯은 현재 상태를 기반으로 어떻게 UI가 보여야 하는지 선언적으로 정의해요.
2. 합성 가능 - 작은 위젯들을 조합하여 더 복잡한 위젯을 만들 수 있어요.
3. 불변성 - 대부분의 위젯은 불변(immutable)이며, 상태가 변경되면 새로운 위젯 트리가 생성돼요.
4. 계층적 구조 - 위젯은 트리 형태의 계층 구조를 형성해요.

다른 프레임워크와의 차이점

Flutter의 위젯 시스템은 다른 모바일 개발 프레임워크와 몇 가지 중요한 차이점이 있어요.

 

안드로이드(XML, Jetpack Compose)와의 차이점

안드로이드 전통적인 개발에서는 XML을 사용해 UI를 정의하고 Java/Kotlin으로 로직을 구현했습니다.
이런 분리된 접근 방식과 달리, Flutter는 Dart 언어 하나로 UI와 로직을 모두 처리하죠.
또한 Flutter 위젯은 안드로이드의 View 시스템과 달리 가벼운 객체로, 매우 자주 재생성되는 것을 전제로 설계됐습니다.

최근 등장한 Jetpack Compose는 Flutter와 비슷한 선언적 UI 패러다임을 따르지만, 여전히 안드로이드 플랫폼에 특화돼 있어요. 반면 Flutter는 크로스 플랫폼 솔루션으로 동일한 코드로 여러 플랫폼에서 일관된 경험을 제공합니다.

iOS(UIKit, SwiftUI)와의 차이점

iOS의 UIKit은 명령형 프로그래밍 방식으로 UI를 구성하는데, 이는 "어떻게 그릴 것인가"에 중점을 둬요.
반면 Flutter의 선언적 접근 방식은 "무엇을 그릴 것인가"에 집중합니다.

SwiftUI는 Flutter와 유사한 선언적 접근 방식을 취하지만, iOS 생태계에 한정되어 있어요. Flutter는 iOS와 안드로이드뿐만 아니라 웹, 데스크톱까지 동일한 코드베이스로 지원합니다.

웹 프레임워크(React)와의 유사점과 차이점

Flutter의 위젯 시스템은 React의 컴포넌트 기반 아키텍처와 유사한 개념을 가지고 있어요.
둘 다 선언적이고 불변성을 중요시하며, 가상 DOM(React)이나 위젯/요소 트리(Flutter)를 통해 효율적인 렌더링을 수행합니다.

하지만 중요한 차이점은 React가 기존 DOM 위에 구축된 반면, Flutter는 자체 렌더링 엔진(Skia)을 사용해 플랫폼 위젯에 의존하지 않고 직접 UI를 그린다는 점이에요. 이 접근 방식은 플랫폼 간 일관된 렌더링을 가능하게 해주는 면이 있습니다.

위젯의 종류

Flutter의 위젯은 크게 두 가지 유형으로 나눌 수 있어요. StatelessWidget과 StatefulWidget이 바로 그것입니다.

 

StatelessWidget

StatelessWidget은 상태를 가지지 않는 위젯이에요. 한 번 생성되면 그 속성이 변경되지 않으며, 부모 위젯으로부터 받은 데이터만을 사용해요. 이러한 위젯은 외부 입력에 의해 변경되지 않는 UI 요소를 표현할 때 사용하죠.

StatelessWidget의 특징은 다음과 같아요.

• 불변성(immutable)
• 상태 관리가 필요 없음
• build 메서드가 한 번만 호출됨 (부모 위젯이 다시 빌드될 때 제외)
• 성능 최적화에 유리함

예시 코드를 볼까요?

class WelcomeMessage extends StatelessWidget {
  final String name;

  WelcomeMessage({required this.name});

  @override
  Widget build(BuildContext context) {
    return Text('환영합니다, $name님!');
  }
}

StatefulWidget

StatefulWidget은 시간이 지남에 따라 상태가 변할 수 있는 위젯이에요. 사용자 입력, 애니메이션, 데이터 변경 등에 반응하여 UI를 업데이트해야 할 때 사용하죠.

StatefulWidget의 특징은 아래와 같아요.

• 상태(State) 객체를 통해 가변적인 데이터 관리
• setState() 메서드를 호출하여 UI 갱신
• 생명주기 메서드를 통한 상태 관리
• 동적인 UI 구현에 적합

간단한 예시를 볼게요.

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('카운트: $_count'),
        ElevatedButton(
          onPressed: _increment,
          child: Text('증가'),
        ),
      ],
    );
  }
}

 

Flutter의 위젯 시스템은 처음에는 낯설지만 나중에 익숙해지고 나면 편하게 개발할 수 있다고 생각합니다.

위젯의 종류와 생명주기를 이해하면 복잡한 애플리케이션도 효율적으로 구현할 수 있답니다.

 

StatelessWidget과 StatefulWidget의 적절한 사용, 그리고 생명주기 메서드의 활용은 Flutter 개발의 가장 핵심 포인트라고 생각합니다.

 

감사합니다.