[Flutter] 03. 플러터 내부 구조 살펴보기

03.  플러터 내부 구조 살펴보기

03-1. 플러터 프로젝트 구조 알아보기

플러터 프로젝트를 만들면 자동으로 많은 파일이 생성된다. 

기본적으로 안드로이드용 앱과 iOS용 앱을 만드는 프로젝트 폴더가 각각 생성되고, 플러터 앱을로젝트 설정, 테스트 등을 수행하는 파일도 생성된다.

플러터 프로젝트 폴더는 어떻게 구성되었나?

프로젝트 탐색 창을 살펴보면 다음과 같다.

[그림] 플러터 프로젝터 구조

ㅇ 먼저 lib 폴더에는 플러터 앱의 소스가 작성된 main.dart 파일이 있다.

ㅇ 그리고 android와 ios 폴더에는 각 운영체제에서 프로젝트를 시작할 때 필요한 파일이 있다.

ㅇ test 폴더에는 다트 코드로 함수를 테스트할 때 사용하는 파일이 있다.

> 일반적으로 함수를 테스트하려면 앱을 다시 실행해야 해서 시간이 걸리는데, 플러터 프로젝트는 test 폴더를 제공하므로 편리하게 테스트할 수 있다.

 

이처럼 플러터 프로젝트는 많은 파일로 구성되지만 우선은 lib 폴더에만 집중하면 된다. 

build 폴더 등은 앱의 설정값을 바꾸면 자동으로 변경되므로 직접 수정하지 않아도 된다.

 

루트에도 여러 파일이 있지만 여기서 주목할 파일은 pubspec.yaml이다.

pubspec.yaml 파일은 플러터에서 다양한 패키지와 이미지, 폰트 등을 사용할 수 있게 해준다.

 

 

[그림] 루트 안 파일 소개

플러터 메인 소스 파일은 어떻게 구성되었나?

프로젝트 구성에서 lib 폴더를 보면 main.dart 파일이 있다.

이 파일은 플러터 프로젝트를 만들면 자동으로 생성된다.

그리고 다트 앱을 실행하면 이 파일 안에 있는 main() 함수부터 시작한다.

[그림] 플러터 메인 구조

ㅇ import 구문

> 소스 첫 줄에는 import 구문이 있다.

- import는 해당 소스 파일에서 사용하려는 패키지를 불러올 때 사용하는 구문이다.

- 자바의 import와 똑같다.

- 다른 다트 클래스나 pubspec.yaml 파일에서 내려받은 패키지를 불러올 때도 사용한다.

■ import 구문

import 'package:flutter/material.dart';

> 기본 예제에서는 material.dart 패키지를 불러왔다.

- 이 패키지에는 플러터의 UI와 관련된 거의 모든 클래스가 포함되어 있어서 자주 사용한다.

 

ㅇ main() 함수

> 플러터 앱은 자바나 C 언어로 작성된 프로그램처럼 main() 함수에서 시작한다.

■ main() 함수

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

> main() 함수에서는 runApp() 함수를 호출한다.

- runApp() 함수는 binding.dart 클래스에 정의되어 있으며 플러터 앱을 시작하는 역할을 한다.

- 이 함수에 플러터 앱을 시작하면서 화면에 표시할 위젯을 전달한다.

- 예에서는 MyApp이라는 위젯을 전달했다.

 

ㅇ MyApp 클래스

> 다음 코드는 main() 함수에서 runApp() 함수로 플러터 앱을 실행할 때 화면에 표시할 위젯으로 전달한 MyApp 클래스를 정의한 부분이다.

■ MyApp 클래스

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity, //내가 만든 프로젝트에는 없길래 소스 추가함
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

[그림] App 실행 결과

> 클래스 이름 뒤의 extends는 다트에서 상속을 의미하는 키워드이다.
> 여기서는 StatelessWidget이라는 클래스를 상속받았는데 일단 상태가 변경되지 않는 위젯을 상속받았다고 생각하면 된다. 
- 더 자세한 내용은 잠시 후에 설명한다.
> MyApp 클래스에서는 @override 애너테이션을 이용해서 build()라는 함수를 재정의했다.
> build() 함수에는 어떠한 위젯을 만들 것인지를 정의한다. 
> 처음 runApp()을 이용해 클래스를 실행할 때는 MaterialApp() 함수를 반환해야 한다.

- MaterialApp은 그림을 그리는데 필요한 도화지라고 생각하면 된다.
- MaterialApp() 함수에는 그림을 그리는 도구에 속하는 title, theme 그리고 home 등이 정의되어 있다.
- title에 앱의 이름을 정하고 theme에는 지금 만들 앱의 테마를 어떤 색상으로 할지 정한다.
- 메인 색상을 지정하는 primarySwatch 속성에는 Colors.blue가 입력되었다. 
- 플러터에서 Colors 클래스를 이용하면 다양한 색상을 지정할 수 있다. 
> 그리고 visualDensity 속성은 앱이 모바일이나 웹, 데스크톱, 맥 등 어떤 플랫폼에서도 자연스럽게 보이도록 지원한다. 
> home에는 앱을 실행할 때 첫 화면에 어떤 내용을 표시할지 정한다.
- 코드에서는 home에 MyHomePage 클래스를 지정했다.

상태 연결에 따른 위젯 구분

플러터 앱을 구성하는 위젯은 스테이트리스(stateless)와 스테이트풀(statefull) 두 가지로 구분할 수 있다.

이러한 구분은 상태 연결과 관련이 있다.

 

내용을 갱신할 필요가 없는 위젯은 화면에 보이기 전에 모든 로딩을 마친다.

예를 들어 앱을 처음 실행하면 사용자에게 정적인 도움말을 보여줄 수 있다.

이런 도움말 페이지는 갱신할 필요가 없다.

즉, 앱이 위젯의 상태를 감시하고 있을 필요가 없는 것이다.

이처럼 상태를 연결할 필요가 없는 위젯을 스테이트리스 위젯이라고 하며 StatelessWidget 클래스를 상속받아서 만든다.

[그림] 스테이트리스 위젯

반면에 내용을 갱신해야 할 때도 있다. 
예를 들어 계산기 앱에서 숫자를 입력하고 계산버튼을 누르면 결과값이 화면에 출력된다. 
이때 버튼을 누를 때마다 화면에 누른 숫자가 반영되어야 한다. 
즉, 앱이 위젯의 상태를 감시하다가 위젯이 특정 상태가 되면 알맞은 처리를 수행해야 한다. 
이처럼 상태가 연결된 동적인 위젯을 스테이트풀 위젯이라고 하며 StatefulWidget 클래스를 상속받아서 만든다.

[그림] 스테이트풀 위젯

ㅇ 스테이트풀 위젯은 언제든 상태가 변경되면 특정한 처리를 수행해야 하므로 항시 지켜봐야한다.

ㅇ 그만큼 메모리나 CPU 등 자원을 많이 소비한다.

ㅇ 그러나 스테이트리스 위젯은 갱신할 필요가 없으므로 적은 자원으로 화면을 구성할 수 있다.