[Flutter] Flutter의 위젯 (class와 차이점)

Angela Jeong·2024년 4월 18일

Flutter & Dart 개념 잡기

목록 보기

3/18

플러터의 위젯이란, UI를 구성하는 최소 구성요소다!
UI와 관련된 요소들을 다루고 있는 것들을 모두 위젯으로 보면 된다.

ex) Text, Image, Padding, Align, FutureBuilder, Row, Column 등등

눈에 보이는 요소로만 한정하지 말고 UI와 관련된 모든 것들이라고 생각하면 된다. 즉, 상태 관리(ex. StatefulWidget), 사용자 상호작용(ex. Gesture Detector) 등 전반적인 UI와 UX를 형성하는 모든 것이다.

*참고)
UI (User Interface)

유저 인터페이스란 글자 그대로 사람과 컴퓨터 사이의 상호작용을 위한 중간 매개체를 포괄하는 용어를 의미한다.
즉, 시각적인 요소뿐만 아니라 사용자와 시스템 간의 상호작용을 위한 모든 수단을 포함한다!
(ex. 버튼, 아이콘, 레이아웃, 애니메이션 같은 시각적 요소뿐만 아니라 터치, 제스처, 음성 명령과 같은 상호작용적 요소도 포함한다.)

Flutter는 여러 위젯을 서로 중첩하며 구축한다.
이를 트리구조라고 하는데, 즉 한 위젯 내에 다른 위젯들을 포함시킬 수 있기에 위젯들은 서로 부모 자식 관계로 구성된다. 따라서 무엇이든 빌드하려면 위젯 내부에 코드를 작성해야 한다.

위젯트리에는 MaterialApp이라는 루트 위젯이 있다. (또는 CupertinoApp 위젯)

모든 플러터 앱은 최상위에 위젯을 가지고 있는데 이 위젯이 바로 앱의 루트 위젯이다.
반면 MyApp은 위젯 겸 class다. 앱의 진입점이 되는 클래스로 MaterialApp 위젯을 포함하고 있다.
MyApp은 클래스로서 앱의 진입점에서 앱의 기본 구성을 정의하고 MaterialApp을 생성하고 그 아래에 필요한 화면이나 위젯을 구성한다. 따라서 MaterialApp을 앱의 루트 위젯으로 간주한다.

모든 위젯은 class다. 반면 모든 class는 위젯이 아니다.
class는 상태와 동작을 정의하는 템플릿 역할을 하고, 위젯은 UI (그림)에 특화되어 있다.

예를 들어, 모듈화 작업을 생각해보자!
class로 정의를 해야 우리가 모듈로 만든 위젯을 어떤 페이지에서든 쓸 수 있다. 만약 클래스화가 안되어 있으면 매번 똑같은 코드를 직접 써야 하고, 만들어둔 위젯을 찍어낼 수 없을 것이다.

내가 좋아하는 위젯 중에 Listile이 있는데, Listile을 상세하게 들여다 보면 클래스로 만들어진 것을 확인할 수 있다. 클래스로 만든 위젯인 것!!

클래스: 객체 지향 프로그래밍에서 사용되는 개념으로, 객체를 생성하기 위한 템플릿이며, 객체의 상태와 동작을 정의