플러터, flutter) 진입점 및 관련 기본 코드 개념

오늘 설명할 코드입니다.

플러터는 어떤식으로 작동하는 것일까요?

너무 어려운 질문이지만, 초반에 어떻게 시작하는지에 대해 다뤄보고자 합니다.

 

위 코드를 입력해서 실행을 누르면, 좌측 상단에 빨간 글씨로 hello가 나타나고, 배경은 검정색일 것입니다.

아주 허접하지만 간단한 앱이 만들어진 것이죠.

 

하지만 저기 코드들에는 많은 의미들이 숨어있습니다.

하나하나 뜯어보도록하죠.

 

 void main()

이 void main() 함수는 dart에서는 진입점에 해당합니다. dart 파일을 실행하면, main() 함수를 찾아서 실행하게 됩니다. 

따라서 함수의 이름을 바꾸거나 하면 절대 안됩니다. 시작을 못하니깐요..

 

import 'package:flutter/material.dart';

플러터에서 제공한 패키지 중 material.dart 파일을 import했단 얘기입니다. 

material.dart 파일은 거의 모든 플러터 dart파일에서 사용될 것입니다. 

material.dart 파일에는 앱 구성에 기본이 되는 위젯들이 포함이 되어 있습니다.

material.dart을 import하지 않으면 저희는 사실상 플러터로 앱을 만들 수 없습니다.

 

runApp(MyApp());

이 함수의 역할은 괄호안의 위젯을 inflate 시켜서 스크린에 보여주는 역할을 합니다.

material.dart에서 제공되는 함수이고, 매우매우 중요합니다.

보통 runApp() 안에 인자로 뿌리 위젯 (Root Widget)을 넣습니다.

뿌리 위젯은 앱의 가장 최상단의 위치한 위젯을 의미합니다.

여기서는 MyApp의 객체를 넣은 것을 확인할 수 있습니다.

 

(참고로 inflate은 메모리에 해당 위젯 객체를 올려서 실체화한다고 보시면 되고

따라서 runApp은 안드로이드 프레임워크에서 setContentView와 거의 같은 역할이라고 보시면됩니다.)

 

class MyApp extends StatelessWidget

runApp안에는 위젯이 들어가야합니다. 그러니까 우리는 그냥 아무런 객체를 넣을 순 없습니다.

위젯은 크게 2가지가 있습니다만, 여기서는 그 중에 하나인 StatelessWidget을 상속 받았습니다.

그래서 MyApp은 StatelessWidget이므로 runApp에 인자로 들어갈 수 있었습니다.

 

StatelessWidget 역시 material.dart를 통해서 플러터가 제공한 것입니다.

이런 상속을 통해 우리는 위젯을 보여주기 위해 뒤에서 이루어지는 작업들(예를 들면 픽셀은 어떻게 할지 등등)

은 플러터가 만들어놓은 것들을 통해 신경쓰지 않고 편하게 진행할 수 있습니다.

 

@override
  Widget build(BuildContext context) {
    return MaterialApp(home: Text('hello')); 
 }

main()이 실행되고 runApp에서 MyApp 객체가 만들어지면 플러터는 해당 객체를 화면에 그려내기 위해

해당 객체의 build 함수를 호출합니다. 그리고 이때 플러터는 인자로 BuildContext 를 넣어줍니다.

 

BuildContext는 쉽게 이해하면 이 위젯이 위젯트리에서 어느 수준에,

어느 위치에 존재하는 지 파악할 수 있는 역할을 해줍니다.

위젯을 그려내기 위해선 다른 위젯들간의 서열과 위치를 파악해야 그릴 수 있겠죠!

 

그리고 리턴된 위젯을 실제로 그려내게 되는데, MaterialApp이 리턴하도록 되어있습니다.

MaterialApp은 상당히 중요한 위젯입니다.

앱이 만들어지기 위한 뒤에서 일어나는 다양한 작업들을 처리해주는 역할을 합니다.

그래서 MaterialApp은 RootWidget으로 쓰입니다.

MaterialApp 위젯이 앱을 이룰 수 있도록 기본적으로 기반을 다져주는, 뼈대의 역할을 하는 것으로 이해하면 쉽습니다.

 

MaterialApp(home: Text('hello'));

여기서 좀 특이한게, 객체 안에 home: 이란 부분이 있습니다. 이것은 home이라는 프로터티를 특정하겠다는 얘기입니다. 플러터의 위젯들은 설정할 수 있는 속성들이 매우 많습니다. 그리고 필수로 지정하지 않아도 되는 속성들도 많습니다.

그래서 그냥 속성에 대한 값을 넣어버리면 어떤 속성에 대한 값인지 인식하기가 어렵습니다. 그래서 콕 집어서 명시해줍니다. 항상 그런 것은 아니지만 위젯을 만들때는 거의 이렇게 사용합니다.

 

>> 추가적으로 MaterialApp이 어떤 역할을 하냐면, 진입점 페이지를 나타내기도 하고, 페이지들(routes)에 대한 언급도 해줄 수 있어서 좋다. 전반적인 Theme도 설정할 수 있기 때문에, 앱 전반적인 것들에 대한 셋팅을 한다고 보면 된다.