티스토리 뷰
플러터 생성 시 4개의 주요 기본 파일들이 있다.
안드로이드 프로젝트 폴더, ios 프로젝트 폴더, lib 폴더, test 폴더 4가지로 이루어져 있다.
안드로이드, ios 프로젝트 폴더는 안드로이드와 ios 운영체제에서 플러터 앱이 돌아가도록 하는 역할을 하며 lib 폴더는 플러터 앱 개발을 위한 다트 파일이 들어가 있는 폴더이며, test 파일은 다트파일을 테스팅 하기 위한 폴더이다.
루트 안 파일들을 정리한 표로 가장 중요한 파일은 pubspec.yaml 파일이다. 폰트, 이미지, 파일을 추가할 때 관련 정보를 넣어줘야 하는 파일이다.
Lib 폴더에는 기본적으로 main.dart 파일이 들어있으며 이 파일은 c언어 처럼 main() 함수로부터 시작한다.
Import 구무은 다른 다트 클래스나 pubspec.yaml 파일에서 내려받은 패키지를 불러올 때 사용한다.
플러터 앱은 main 함수에서 시작하며 메인에서 runApp 함수를 호출하여 실행한다. 이는 앱을 실작하는 역할을 한다.
Statelesswidget 클래스를 상속받은 클래스로 이는 변경되지 않는 위젯을 상속받은 것을 의미한다.
MyApp 클래스에서 오버라이드를 통해서 빌드 함수에 어떤 위젯을 만들것인지 정의한다.
runApp 을 실행하는 MatarialApp을 반환하여 UI를 실행한다.
해당 코드에서 보이는 속성
Title: 앱의 이름을 지정, 앱의 한 줄 설명을 속성
Theme: 앱의 테마 지정 속성
ThemeData 함수
- primarySwatch : 메인 색상을 지정
- visualDensity : 어떤 플랫폼에서도 자연스럽게 보이도록 지정
home: 어플의 기본 경로로 앱 실행 시 가장 먼저 볼 수 있는 화면
위젯의 상태에는 statelessWidget과 StatefulWidget 두 가지로 존재한다.
StatelessWidget: 상태를 연결할 필요가 없는 위젯이다.
1. 내용을 갱신할 필요가 없는 위젯으로 화면에 보이기 전에 모든 로딩을 마친다.
2. 상태변화가 없어서 앱이 위젯의 상태를 계속 감시할 필요가 없다.
3. StatelessWidget 클래스를 상속받는다.
StatefulWidget: 상태가 연결된 동적인 위젯
1. 위젯의 상태를 감시하다가 특정 상태가 되면 처리를 수행한다. 따라서 많은양의 자원을 소비한다.
2. statefulWidget 클래스 상속
1. StatelessWidget을 상속받은 클래스에서 스캐폴드 클래스로 스위치를 구성한다.
2. switchValue 변수에 true, false 값 갱신한다.
3. MyApp 클래스는 StatelessWidget 클래스여서 상태변화를 반영 못하는 문제가 생긴다.
따라서 해당 예제 코드에서는 StatefulWidget 클래스를 상속받는 클래스와 State클래스를 상속받는 클래스 두 개로 분리하여 만들었다.
1. StatefulWidget은 화면출력을 이해서 State클래스가 필요하다.
- 따라서 createState()함수를 재정의하여 MyApp 클래스가 상태가 변경되면 이를 감지해 _MyApp 클래스가 화면을 갱신한다
2. 화면 출력을 위환 State클래스를 상속받는 _MyApp
- MyApp의 상태변화와 생명주기 관리를 위해 State 클래스는 제네릭 클래스로 MyApp 클래스를 넘겨받는다.
- _MyApp에서 화면의 UI를 결정한다.
State 클래스
- 상태 클래스로 StatefulWidget의 생명주기 및 상태를 관리하는 클래스이다.
위젯의 생명주기 ?
- 데이터를 언제 주고 받을지, 화면이 사라질 때 어떤 로직을 처리해야 할지 결정한다.
State 클래스와 StatefulWidget 클래스를 분리한 이유
- StatefulWidget보다 State 클래스가 상대적으로 더 무겁기 때문에 StatefulWidget클래스를 상속받는 MyApp에서 상태 변경 신호가 감지되면 State클래스인 _MyApp이 화면을 갱신 한다.
- StatefulWidget에서 바로 갱신하면 나중에 화면이 종료되어도 할당 받은 메모리까지 없애는 시간이 오래 걸린다.
플러터 위젯의 생명주기 이해하기
위젯의 생명주기를 표로 정리한 것으로 호출 순서에 따라 실행되는 것들이 다르다.
- 상태를 생성하는 createState() 함수
- SatefulWidget 클래스를 상속받는 클래스는 반드시 이 함수를 호출
- 이 함수는 다른 생명주기 함수들이 포함된 State 클래스를 반환
- 위젯의 상태를 생성하는 함수
2. 위젯을 화면에 장착하려면 mounted == true
- createState() 호출 -> true로 변경
- mounted == true -> buildContext 활성화 -> setState() 이용가능
3. 위젯을 초기화하는 initState() 함수
- 위젯을 초기화 할 때 한 번만 호출
- 주로 데이터 목록을 만들거나 처음 필요한 데이터를 주고받을 때 사용
- 네트워크 통신이나 데이터 상태가 안 좋을 때를 대비해 대응하기 위해 위젯을 초기화 하는 해당 함수에서 데이터를 준비하는 것이 좋음
4. 의존성이 변경되면 호출하는 didChangeDependencies() 함수
- initState() 함수 호출 후 바로 호출되는 함수
- 데이터에 의존하는 위젯이라면 화면에 표시 전에 꼭 호출
- 상속받은 위젯을 사용할 때 피상속자가 변경되면 호출
5. 화면에 표시하는 build 함수
- 위젯을 반환하는 함수로 화면에 함수를 렌더링
6. 위젯을 갱신하는 didUpdateWidget()
- 부모 위젯이나 데이터가 변경되어 위젯을 갱신할 때 호출
7. 위젯 상태를 갱신하는 setState() 함수
- 데이터가 변경된 것을 알려주고 변경된 데이터가 화면의 UI에 반영되도록 함
8. 위젯의 상태관리를 중지하는 deactivate()함수
- State객체가 플러터의 구성 트리로부터 제거될 때 호출
- State 객체가 제거되어도 해당 메모리까지 제거되는 건 아님
- dispose() 호출 전까지 State 객체를 재사용 가능
9. 위젯의 상태관리를 완전히 끝내는 dispose()
- State 객체를 영구적으로 소멸할 때 호출
- 해당 위젯을 종료한다는 것을 의미
- 데이터 전송도 중지
10. 위젯을 화면에서 제거하면 mounted == false
- State 객체가 소멸하면 마지막에 mounte가 false로 변경되며 생명주기 종료
State 재사용이 불가능 -> setState() 호출 시 오류
'플러터 앱 스터디 일지' 카테고리의 다른 글
| 플러터 스터디 chap 5 (0) | 2021.09.27 |
|---|---|
| 플러터 스터디 chap 4 (0) | 2021.09.26 |
| 플러터 앱 스터디 Chap2 -JSON 데이터 , 스트림 통신 (0) | 2021.09.15 |
| 플러터 앱 스터디 Chap2 -비동기 처리 방식 (0) | 2021.09.15 |
| 플러터 앱 스터디 chap2 - 다트란 ? (0) | 2021.09.15 |