[Flutter] Widget과 Element란 무엇인가

[Flutter] Widget과 Element란 무엇인가

[Version]

Android studio 3.5.3, Dart 2.7.0, Flutter 1.12.13

구글에서 올린 Flutter의 위젯 설명 영상을 보고 정리하고 있습니다. 아래의 내용을 순서대로 다룰 것입니다.

1. Stateless widgets(현재 글)

2. Stateful widgets

3. Inherited widgets

4. keys

[Flutter에 대한 짧막한 소개!]

Flutter는 Dart라는 언어를 사용합니다. Dart는 React Native에서 사용하는 JavaScript와 같이 Single thread로 동작한다는 점에서 공통점이 있습니다. 둘 다 Single threaded event queue에서 명령어를 가져와 실행합니다.

(왜 Single thread로 동작하게 만들었는지도 나중에 다루어 볼까합니다)

Framework Programming Language Flutter Dart React Native JavaScript

두 언어의 차이점 중 하나는 결과물의 실행속도입니다

Flutter는 직접 ARM binary들을 생성합니다. 우리가 쓰는 스마트폰에서 바로 실행되는 명령어들을 만들어내죠.

반면에 JavaScript를 사용할 경우 bridge가 필요합니다. 쉽게 얘기하면 목적지까지 가려면 다리를 한 번 더 건너야하는 것이죠.

(복잡하고 반복이 많은 로직을 짜지 않는 이상 크게 체감은 안 되겠지만요)

[State와 Widget]

widget이란 뭘까요? 사전의 정의는 다음과 같습니다. '(이름을 알 수 없는) 작은 장치'

영상에서는 Flutter app을 만드는 변하지 않는 가장 기본적인 UI building block이며 실제로 보이는 UI들의 blueprint라고 소개합니다.

저는 '다양한 모양으로 조합할 수 있는 레고같으면서도 변하지 않는 작은 틀 같은 것이겠구나' 정도로 이해를 하였습니다.

그러면 state란 뭘까요? 아주 쉽게 설명하면 State는 정보입니다.

어떤 정보일까요?

1. 위젯이 만들어질 때 동기적으로 읽을 수 있고

2. 위젯의 생명주기(lifetime)동안 바뀔 수 있는 것

지금은 Stateless Widget 즉, State가 없는 Widget에 대해 배울 것이므로 State의 자세한 내용에 대해선 다음에 다루어보겠습니다.

정리하면 Stateless Widget은 한 번 만들어지면 안에

'내용물이 바뀌지 않는 항상 동일하게 동작하는 UI Blueprint'이구나 정도로 생각할 수 있을 것 같습니다

[Widget과 Element]

그러면 Widget을 바탕으로 실제로 만들어진 것을 뭐라고 부를까요? Element라고 합니다.

플러터앱은 정말 간단하게 얘기하면 아래와 같이 동작합니다.

1. Widget을 만든다

2. 이 Widget을 활용하여 element을 만든다

이 element들은 눈으로 확인할 수 있습니다. 같이 확인해 보겠습니다(Flutter가 설치되어 있다고 가정하겠습니다)

Android studio를 열어서 새로운 Flutter App을 만듭니다. Flutter Application을 선택하고 Next만 연달아 누릅니다!

프로젝트를 실행하면 아래와 같은 앱이 켜집니다. 아래 Floating button을 누르면 숫자가 커지는 앱입니다.

자, 여기서 프로젝트의 우측에 있는 Inspector Window를 누릅니다

오른쪽에 Flutter Inspector를 띄워서 생성된 Widget들의 트리(Tree)구조를 확인할 수 있습니다.

[참고 자료]

https://api.flutter.dev/flutter/widgets/State-class.html

https://proandroiddev.com/flutter-from-zero-to-comfortable-6b1d6b2d20e#:~:text=Creating%20Flutter%20Apps%20%E2%80%94%20The%20Hierarchical,it%20are%20called%20Container%20Widget.

[원본 영상 링크]

https://youtu.be/wE7khGHVkYY?list=PLjxrf2q8roU2HdJQDjJzOeO6J3FoFLWr2

from http://backhill.tistory.com/7 by ccl(A) rewrite - 2020-03-18 22:20:16

댓글

이 블로그의 인기 게시물

[React] - 18) 프로젝트 빌드하기(+코드 스플리팅)

입트영(2020.03.23) - Iced Drinks / 아이스 음료

Redux + React