Do it! 플러터 내부구조, 생명주기 알아보기

실전코드로 배우는 플러터 기본과 활용

Do it! 플러터 앱프로그래밍

어제는 Flutter의 등장배경과 Flutter에서 사용하는 언어인 Dart의 특징에 대해 간략히 배웠습니다. 

오늘은 플러터의 내부 구조(간단한 샘플코딩)와 위젯의 생명주기에 대해 공부하고자 합니다. 위젯의 생명주기는 안드로이드 액티비티의 생명주기와 비슷하다고 생각하시면 됩니다.

폴더 및 주요 파일 안내

Flutter 프로젝트 구조. 시작 파일은 lib>main.dart

폴더	내용	비고
android	안드로이드 프로젝트 관련 파일	안드로이드 스튜디오로 실행 가능
ios	iOS 프로젝트 관련 파일	엑스코드로 실행 가능(맥 전용)
lib	플러터 앱 개발을 위한 다트 파일	플러터 SDK 설치 필요
test	플러터 앱 개발 중 테스트 파일	테스트 편의성 제공

파일	내용	비고
pubspec.yaml	패키지, 이미지, 폰트 등 asset 설정	직접 관리
README.md	프로젝트 소개
.gitignore	git에 커밋, 푸시 등 소스 코드를 업로드할 때 필요 없는 파일 기록 서버 주요 정보, 운영/테스트 구분에 따른 배포시 배제해야 할 파일들 명시
.metadata	플러터 SDK 정보	자동 관리
.packages	플러터 SDK에 사용할 기본 패키지 경로
first_flutter_app.iml	파일이 자동으로 생성될때 만들어지는 폴더 위치
pubspec.lock	pubspec.yaml 파일에 적용된 패키지 위치

* 플러터는 위젯 기반으로 개발하며, 위젯은 클래스로 정의하여 상속 개념이 존재합니다. 텍스트박스, 이미지, 버튼 모두가 위젯 클래스로 변경이 필요하면, 상속받아 필요한 속성만 수정하면 됩니다. 위젯은 크게 2가지 나눕니다. 상태 고정(statless, 화면에 보이기 위해 로딩한 순간 상태감시를 하지 않아 변화가 없는 위젯)과 상태변경(statefull, 동적 위젯으로 상태를 감시하다 알맞게 화면 변경) 입니다. 따라서 화면 변경이 필요한 경우, statefull 위젯에 코딩해야 합니다. 

교제에 나와 있는대로, 버튼 클릭시 글씨와 버튼색이 변하는 것을 statless위젯(클래스)에 개발하면 아무런 변화가 없지만, statefull위젯에 개발하면 화면이 변하는 것을 확인할 수 있습니다.

추가로 책의 예제를 따라 코딩해보면, 플러터 버전에 따라 폐기된 위젯들이 있어 아래와 같이 소스를 수정해서 코딩해야 합니다. 

// 교제 소스 //
child: RaisedButton (
            child: Text('$test'),
            color: _color,
            onPressed: () {
              if (test == 'hello') {
                setState(() {
                  test = 'Flutter';
                  _color = Colors.amber;
                });
              } else {
                setState(() {
                  test = 'hello';
                  _color = Colors.blue;
                });
              }
            },
          ),
// 수정 RaisedButton -> ElevatedButton
// 수정 style: ElevatedButton.styleFrom 이용
child: ElevatedButton (
            child: Text('$test'),
            style: ElevatedButton.styleFrom(
              primary: _color,
            ),
            onPressed: () {
              if (test == 'hello') {
                setState(() {
                  test = 'Flutter';
                  _color = Colors.amber;
                });
              } else {
                setState(() {
                  test = 'hello';
                  _color = Colors.blue;
                });
              }
            },
          ),

* visualDensity 속성은 앱이 모바일, 웹, 데스크톱, 맥 등 어떤 플랫폼에서도 자연스럽게 보이도록 지원

위젯의 생명 주기 이해

class MyHomePage extends StatefulWidget {
	@override
    _MyHomePageState createState() => new _MyHomePageState();
}

State와 StatefulWidget 클래스를 나눈 이유는 성능 때문입니다. State 클래스가 무겁다 보니, StatefulWidget에서 감시하고 있다가 상태 변경 신호가 오면, State클래스로 화면을 갱신하도록 합니다. 만약 StatefulWidget에서 바로 갱신하면, 화면이 종료되더라도 할당받은 메모리를 바로 반환하지 않기 때문에 두개는 분리한 것입니다. 

호출순서	생명주기	내용
1	createState()	처음 스테이트풀을 시작할 때 호출
2	mounted == true	createState() 함수가 호출되면 mounted 는 true
3	initState()	State에서 제일 먼저 실행되는 함수. State 생성 후 한번만 호출
4	didChangeDependecies()	initState() 호출후에 호출되는 함수
5	build()	위젯을 렌더링하는 함수. 위젯을 반환(=화면에 표시)
6	didUpdateWidget()	위젯을 변경해야 할 때 호출하는 함수
7	setState()	데이터가 변경되었음을 알리는 함수. 변경된 데이터를 UI에 적용하기 위해 필요
8	deactivate()	State가 제거될 때 호출
9	dispose()	State가 완전히 제거되었을 때 호출
10	mounted == false	모든 프로세스가 종료된 후 mounted가 falsed가 됨

 

요약(프로젝트 구조, 위젯 생애주기...)
• 프로젝트 주요폴더, 파일에 대해 확인
• createState(), initState(), build(), setState(), dispose() 등 생애주기 과정에 log, 데이터 처리 등 수행