Flutter에서의 widget 위젯은?
Flutter를 접하면 뭐만 하면 widget 위젯 이러는데 대체 위젯은 무엇인가?
stateless widget은 뭐고 stateful widget은 뭔가?
Flutter를 처음 접하는 일반인의 입장에서 풀어가보자. 내가 이해 못 하면 남도 이해 못 한다.
코딩셰프님 강의로 플러터를 하나씩 배워 가보자.
Widget
우리가 평소 접한 위젯은 스마트폰이나 데스크톱에서 날씨나 교통정보를 보여주거나 했었다.
위젯은 그런 작은 단위의 기능을 보여주는 프로그램을 지칭하는 용도로 쓰였다.
그러나 Flutter에서 말하는 위젯은 화면을 구성하는 모든 기본 단위 요소다.
메뉴도 위젯, 화면에 아이콘도 위젯, 버튼도 위젯이라고 보면 된다.
그런데?! 눈에 보이지 않지만 아이콘을 정렬해준다던지 세로로 정렬해준다던지 하는
이런 것들도 위젯이다.
그럼 다 위젯으로 부르는 거 아니냐고?
맞다. 정확하다.
그렇게 치면 뭐 죄다 위젯이면 앱 자체를 그냥 위젯이라고 해라.
맞다고 한다. 앱도 위젯이라고 한다.
결론 : Widget으로 시작하여 Widget으로 끝난다. Widget in Flutter
Stateless Widget vs Stateful Widget
State : 상태라는 명사.
Stateless Widget : 변화가 없는 정적인 위젯
Stateful Widget : 움직임이나 변화가 있는 위젯
Stateless Widget는 스크린상에 존재만 할 뿐 아무것도 하지 않는다. 실시간 데이터도 저장하지 않고 어떠한 모양을 변화시키는 value도 받지 않는다.
Statefull Widget은 사용자의 입력에 따라 모양이 바뀐다.(Textbox or CheckBox 등)
Flutter Widget tree
Widgets은 Tree 구조이며 한 Widget내에 얼마든지 다른 widget이 포함될 수 있다. 그렇기에 Widget은 부모와 자식 widget으로 구성이 되어 있고 parent widget을 widget container라고 부르기도 한다.
MyApp : Flutter의 시작은 MyApp에서 시작한다. 이것은 이름이 변경될 수 있다.
MaterialApp : MyApp에서 빌드된 이놈은 전체 App을 감싸고 있다. 이 놈을 통해 flutter sdk에서 제공하는 위젯들을 사용할 수 있다.
MyhomePage : 이름 변경이 가능하며 여기서부터 App의 기능과 디자인들이 만들어진다.
Scaffold : 아주 중요하다. App 화면과 기능을 구성하기 위해 빈 페이지를 준비해주는 widget이다.
이 Scaffold Widget 밑으로 UI Widget이 사용된다.
AppBar : 앱 화면 가장 상단에 위치하고 text Widget을 통해 AppBar에 Text를 출력한다.
Center : 모든 구성요소를 화면 중앙에 위치시킨다.
Column : 세로로 정렬을 하기 위한 Widget.
Image, Text Field, Button : 해당 기능을 담당한 기능이다.
어떤가? 아직은 할만하다. 하하하
오늘은 Flutter를 들어가기에 앞서 가장 중요한 개념인 Widgets에 대해서 살펴봤다.
Flutter에서 Widget은 처음이자 끝이며 Widget으로 시작하여 Widget으로 끝난다.
Stateless Widgets은 변화가 없는 상태의 Widget을 말하고
Statefull Widgets은 사용자의 입력에 따라 동적으로 변하는
Textbar나 Radio button 등이다.
그리고 Widget은 Tree로 구성이 되어있고 그렇기에 부모와 자식 Widget으로 나뉜다.
아무튼 이번 학습은 여기까지이며 다음 강의를 통해 프로젝트 폴더와 기본 코드에 대해서
이해해보자.
틀린 점이나 궁금한 점이 있으면 댓글로 알려달라.
입문자라 아무것도 모르고 이상한 소리를
썼을 가능성이 매우 매우 농후하다.
궁금한 점은 댓글로 토론하며 정답을 찾아보자.
코딩셰프님의 강의를 보고 공부 중입니다.