[Flutter] 3. hello world 코드 분석

지난 포스트에서 플러터 신규 프로젝트를 생성하였고, 에뮬레이터의 앱에서 hello world를 출력해 보았습니다.

이제 hello world프로젝트를 가볍게 분석해 보면서 플러터와 친해져 보도록 하겠습니다.

 

이번 포스트는 다음 내용을 다루고 있습니다.

1. 위젯이란?
2. StateLessWidget shortcut 이용해서 생성하기
3. extends
4. dart에서 new를 사용하지 않는 객체 생성
5. StatelessWidget
6. 위젯 중첩

---

hello world 프로젝트 분석하기

vscode의 팔레트에서 flutter new project로 신규 프로젝트를 생성하였고, lib폴더 아래 있는 main.dart파일을 아래와 같이 수정하였습니다.

main.dart

1번째 라인에 material.dart 라이브러리를 임포트 하고 있습니다. 이 패키지는 Google이 개발한 디자인 언어인 머티리얼 디자인을 구현하는 위젯이 포함되어있는 패키지입니다. 이 패키지에 이번 hello world프로젝트에서 사용하는 여러 위젯이 포함되어 있습니다. 여기서 위젯이라는 단어를 사용했는데요, 위젯은 플러터에서 매우 중요한 개념입니다.

위젯이란

Flutter 애플리케이션은 위젯으로 구성됩니다. 위젯은 사용자 인터페이스의 일부의 대한 기술(description)입니다. 사용자가 앱과 상호작용할 때 보이는 게 위젯이고, 앱 자체가 위젯입니다. 간단히 다시 말해서 위젯은 화면에 표시하는 모든 것입니다. 텍스트, 이미지, 버튼, 모든 게 다 위젯입니다.

다시 코드로 돌아와서, material.dart에는 머티리얼 위젯이 포함되어 있습니다.

 

3번째 라인의 main메서드는 Flutter앱의 진입점 입니다. 앱은 기본 메서드 없이는 작동하지 않습니다. main에서 runApp()을 호출하고 있습니다. runApp메서드는 위젯을 화면에 연결해 줍니다. 기본적으로 runApp의 메서드에 넣은 위젯이 화면에 표시된다는 것을 의미합니다. runApp안에서는 다시 HelloApp을 시작 위젯으로 호출하고 있습니다.

 

7번째 라인에서는 StatelessWidget을 확장(extends)하고 있는 HelloApp이라는 새 클래스를 만들었습니다. HelloApp의 build메서드에서는 MaterialApp을 반환하고 해당 홈을 Center위젯으로 설정했습니다. Center위젯은 자식으로 Hello World 문자열이 있는 Text위젯을 가지도록 설정하였습니다.

 

StatelessWidget shortcut으로 빠르게 만들기

아래와 같이 Stateless위젯은 stless치면 나오는 숏컷으로 작성할 수도 있습니다.

StatelessWidget shortcut

---

몇몇 중요한 코드를 자세히 알아보겠습니다.

extends키워드

Dart에서는 상속을 위해 extends키워드를 사용합니다. 

extends를 사용하여 확장하는 클래스의 하위클래스를 만듭니다.

이 말은 즉, HelloApp은 StatelessWidget에서 사용할 수 있는 모든 속성, 변수, 기능을 사용할 수 있습니다. 그리고 이름에서 알 수 있듯이 statelessWidget은 위젯이며 특히 상태를 유지하지 않습니다. Vs Code에서 모든 객체의 속성과 메서드를 보고 싶다면 Ctrl키를 누르고 클래스 이름을 클릭하면 됩니다.

 

new를 쓰지 않는다?

코드에서 한 가지 눈에 띄는 게 클래스의 객체를만들 때 new 키워드를 사용하지 않았다는 것입니다.

return MateraApp을 작성하면 MaterialApp의 새 인스턴스를 반환한다는 의미입니다. new를 쓰지 않고도 인스턴스를 생성한다는 게 낯설게 느껴지네요. (사실 new를 써줘도 코드는 정상적으로 돌아갑니다.)

StatelessWidget

StatelessWidget을 extends하는 모든 위젯은 BuildContext를 매개변수로 하는 build 메소드를 재정의 해야합니다. BuildContext는 특정 위젯이 빌드되는 컨텍스트이며 상위 위젯과 상호 작용하거나 화면에서 위젯의 크기와 위치를 가져오는 데 유용합니다. 위젯이 화면에 그려질 때 build메소드가 자동으로 호출 호출되게 되고 build메소드에서 MaterialApp을 반환됩니다.

 

위젯 중첩

MaterialApp의 Home은 Center위젯입니다. Center는 콘텐츠를 화면 중앙에 배치하는 컨테이너 역할을 하는 위젯입니다. 따라서 Center위젯 안에 무엇을 넣든 가로 및 세로로 중앙에배치됩니다. Center위젯의 자식 매개변수로 Hello World가 포함 텍스트를 넣어 주었습니다. child를 사용하면 다른 위젯 안에 위젯을 중첩할 수 있습니다.

 

이렇게 만들어진 게 아래 에뮬레이터로 출력되는 HelloWorld앱입니다.

---

여기까지 수고하셨습니다.

새로운 개념이 많이 등장해서 아직 익숙해지기에는 시간이 걸릴것 같습니다.

다음 포스트에서는 Hello World앱을 바탕으로 화면을 좀 더 꾸며보면서 Flutter와 친해져 보도록 하겠습니다.