Flutter Stateless Widget

이 글은
https://www.youtube.com/watch?v=wE7khGHVkYY&list=PLOU2XLYxmsIJ7dsVN4iRuA7BT8XHzGtCr&index=59

Flutter Widget 101 Ep 시리즈의 영상을 번역하면서 공부했습니다.

Stateless Widget

중요개념 : Flutter로 작성한 앱은 widget tree로 생각하자.

 

그러면 Widget 이란 무엇일까?

• 단순한 블루프린트입니다.
• Widget을 조각이라 보면 그 조각들을 구성함으로써 앱을 만드는 것입니다.

Widget이 블루프린트라면 뭘 위해 구성되는 것일까?

• Element를 위해구성됩니다.

Element : Widget에 의해 만들어지고 실제로 화면에 마운트 되는 위젯입니다. (실제로 스크린에 배치되는 역할.)

Element tree : Element들을 나타내는 트리입니다.

 

=> 영어로 직역한 결과는 "실제로 장치에 표시되는 것을 나타내는 요소트리입니다. " 라고 하는데, 실제로 장치로 표시되는 것은 element라서 의역했습니다.

 

그러면 Element가 Widget을 통해 구성되는 과정을 알아보겠습니다.

1. Flutter가 Widget에게 element를 만들어 달라는 요청을 합니다.
2. Stateless Widget은 Stateless element를 만들고, element tree에 마운트합니다.

stateless 위젯에 빌드되는 child 위젯이 있는 경우

• 해당 child위젯에서 element들이 만들어지고 마운트되며 내려가는 방식입니다.

각 Widget class가 가지고 있는 것.

1. Element class (요소클래스)
2. 인스턴스 작성메소드

위의 절차를 정리하자면 다음과 같습니다.

1. Flutter는 Widget에서 Element를 요청합니다.
2. 그 다음 해당 Element를 만든 위젯을 참조하여 해당element를 Element tree에 표시(마운트)합니다.

이 절차를 보았을 때 하나의 의문점이 들 수가 있는데, 그것은 element를 작성하는 프로세스는 따로 필요한가? 라는 의문점입니다.

 답은 No입니다. element를 작성하고 빌드하는 프로세스는 따로 필요하지 않습니다.

(영상에서는 위젯이 거의 모든 것을 할 수 있기 때문이라고 설명되어 있습니다. 이게 무슨 뜻인지 이해가 잘 되지 않아 개인적으로는 그냥 element 작성은 사용자가 따로 하지 않아도 되는구나! 하고 넘어갔음.)

 

runApp

void main() => runApp(MyApp());

또는

void main() {
    runApp(MyApp());
}

runApp은 위젯을 가져와서 화면의 사이즈와 일치하는 어플리케이션을 root element요소로 마운트 합니다.

이 설명에서 집고가야 할 점

• 위젯은 stateless또는 stateful을 extends한 class를 말합니다.
• 가져오는 어플리케이션은 높이와 너비에 제한이 있습니다. (MediaQuery 클래스와 관련있습니다. mediaquery설정은 보통 MaterialApp을 작성하면 자동으로 적용됩니다.)

전체적인 과정

Fluttre는 모든 build methods를 통해 위젯을 생성하고, Widget을 사용하여 element를 만듭니다. 이외에도 모든 것이 빌드 될 때까지 진행되는데, 화면에 마운트되고 배치 및 렌더링 될 준비가 될 때까지 진행됩니다.

 

<Widget이 elemnt 요소를 만드는 것을 보여주기 위해 첨부한 사진.>

 

 

 

번외

Flutter class를 보는 관점

class DogApp extends StatelessWidget

이 예시 코드를 보았을 때 생각해야 할 것이 있습니다. 충분히 짐작할 수도 있는 내용이지만, 저는 처음 공부하는 입장이였어서, 하나하나 확실히 개념을 잡고 가는 것이 중요해서 넣게 되었습니다.

여기서 저가 말하는 개념은 DogApp자체가 stateless위젯입니다. DogApp은 StatelessWidget을 extend해서 만든 것이기에 결국 근본은 stateless위젯이라 볼 수 있습니다.
(DogAPP의 extends가 Stateful로 되었으면 Stateful 위젯이겠지?)