2020.03.19 LEE'Today_회고록
목차
1. Counting APP 코드분석
2. 앱 구조 파악
3. 마무리
오늘은 Flutter를 공부하면서 전체적인 흐름을 파악했던 날이다.
Flutter를 처음 프로젝트를 생성하게 되면 간단한 Demo app이 있다.
어플을 앞으로 만들어가게 되면서 코드를 뜯어봐야 전체적인 흐름을 알 수 있을 것 같아 시작하게 되었다.
전체적인 코드를 보고싶다면?
Github 를 클릭해서 들어가보자!
총 3개의 class와 main()이라는 최상위 함수로 구성되어 있다.
또한 상속 관계를 통해 StatelessWidget과 StatefulWidget을 활용하는 것을 볼 수 있다.
Flutter에서 가장 중요한 것은 바로 두 가지 클래스이다.
프로퍼티(property) 변수란?
: 클래스 내부의 속성들을 표현하는 것이다.
: main에서 접근이 가능한 class 변수라고 생각하자!
그렇담 Statelessful은 어떤 변수를 가질까?
프라이빗(private) 변수를 가진다.
: 해당 변수는 class 내부에서만 다룰 수 있으며, main에선 접근이 불가능하다.
: 즉, 외부의 영향으로 변경이 되지 않는 변수라고 생각하자!
: 변수 앞에 '_(언더바)'를 사용한다.
var _count = 0;
var _title = 'Hello';
: 상태(State)를 가지는 클래스이다.
: 즉, 계속 수정하고 그려질 수 있는 도화지라고 생각하자!
StatefulWidget은 @override로 생성하게 되면,
기본적으로 StatefulWidget을 상속 받을 서브 클래스와,
class MyHomePage extends StatefulWidget{ ...생략... }
상태를 계속해서 변경시켜주는 상태(부모) 클래스가 생성된다.
class _MyHomePageState extends State<MyHomePage>{ ...생략...}
해당 상태 클래스에 코딩을 하면 MyHomePage에 반영되어, 우리가 직접 변경된 APP 화면을 볼 수 있게 되는 것이다.
각 State(상태)가 없는 StatelessWidget과 State(상태)가 있는 StatefulWidget을 알아보았다.
위 두가지를 빠르게 @override를 생성하는 법은?
맨 아래 빈 코드 부분에 'st'만 쳐도 stful, stless가 나타난다.
생성한 후 class 이름을 설정해주면 바로 사용해주면 된다.
또한 해당 위젯 빌드라는 메서드가 포함되어 있을 것이다.
해당 Counting APP의 StatelessWidget은 MaterialApp을 반환 값으로 주었고,
Widget build(BuildContext context){
return MaterialApp( ...생략... );
}
StatefulWidget의 두 가지 중에선 상태 클래스에 빌드가 포함되어 있다.
return값은 Scaffold로 구현하여 '...생략...' 부분에 코딩을 하게 된다.
Widget build(BuildContext context){
return Scaffold( ...생략... );
}
해당 코드를 뜯어 보는게 궁금하다면?
'LEE'Today의 오준석의 플러터 생존코딩 시리즈'를 보자!
Flutter를 공부하면서 오늘이 가장 변환점을 겪었던 것 같다.
코드를 직접 뜯어봐야 공부가 되고, 나의 지식이 되는 것을 알게되었다.
이렇게 코드를 뜯어보는 걸 방학 기간에 일찍 했다면 벌써 졸업 작품을 마쳤겠다고 생각이 들었다.
반성한다.
그래도 아직 늦지 않았다고 생각한다.
포기하지 않고 Flutter에 대해서 차근차근 기초부터 배워 나가는 자신이 되야겠다고 느낀 하루였다.