[Flutter] Widget & State

비나·2022년 11월 5일

flutter

Flutter

목록 보기

10/16

📌 헷갈리는 부분들

진짜 이게 사실 별거 아닌데,
위젯이라는 개념을 처음 접해서인지,,(내가 멍청이인건지ㅜ)

이게 코드 짜다보면 혼자 헷갈려서 끙끙거릴때가 있어서,,
헷갈리는 부분은 『Do it! 플러터 앱 프로그래밍』 책도 좀 참고해서 정리를 하려한다.

사실 오늘 코딩셰프 Flutter 순한맛 시즌2 강의도 2개 듣기는 했는데,
그건 세번째 강의까지 듣고 포스팅 정리하는 게 나을 것 같다.

그래서 아무튼 오늘 포스팅은 대충 Widget과 State 내용 중 내가 헷갈리던거 정리하기.

일단, 위젯은 클래스다.
클래스인데 이제 stateful 또는 stateless를 상속받은 위젯인거지..
이걸 일단 꼭 명심해야 한다.
~~(명심명심보감보감..)~~

✅ MyApp()

그동안 무지성으로 만들어왔던 MyApp 위젯,, 다시 한번 살펴보자.
먼저 주석에 하나하나 살펴본 내용을 써봤다.

import 'package:flutter/material.dart';
import 'package:myapp/Nav-main.dart';

// 일단 main에서는 앱을 실행할거임(runApp) 근데 무슨 앱 실행? MyApp이라는 위젯(클래스)
void main(){
  runApp(MyApp());
}

// 그래서 이게 이제 main에서 실행할 그 위젯
class MyApp extends StatelessWidget {	// 얘는 stateless 위젯을 상속받은 클래스임
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {	// build는 어떤 위젯을 만들지 정의함
    return MaterialApp(	// 얘는 이제 MaterialApp을 리턴할거임
      title: 'Hetgalinungeo',
      theme: ThemeData(
        primarySwatch: Colors.green
      ),
      home: MyHomePage(),	// MaterialApp 안에 MyHomePage 위젯 있음
    );
  }
}

그래서 이제 살펴본 내용을 더 디테일하게 보면,,

클래스 생성
일단 MyApp 클래스 부분은
class MyApp extends StatelessWidget 이렇게 생성하는데,
이건 이제 stateless 위젯을 상속받은 MyApp이라는 클래스를 만들거라는 말이다.
build 함수 재정의(@override)
모든 위젯은 build 함수를 가진다.
Widget build(BuildContext context) 여기서
build는 어떤 위젯을 만들지 정의한다.
build 함수는 또 다른 위젯을 반환하는 구조를 가지고 있다.
리턴값
그래서 이제 이 MyApp은 return MaterialApp 부분을 보면 알 수 있듯이,
MaterialApp이라는 걸 리턴할건데,,
이 MaterialApp이 뭐냐면 이것도 이제 위젯이다.
MaterialApp이 뭔지 한번 보면(*얘가 뭔지 궁금하면 VS code에서 cmd누르고 코드 클릭하면 됨)
이거는 stateful 위젯을 상속받은 클래스이다.
그리고 리턴 안에 보면, title이랑 theme이 있다.
얘들은 MaterialApp이라는 위젯의 Argument(인자)들인 것이다.

✅ MaterialApp()

여기서 이제 내가 항상,, 엥?스럽던 부분이 뭐냐면,,
아까 위에 저 코드에서 리턴 부분에 MaterialApp() 저기 봐보면,

return MaterialApp(	// 얘는 이제 MaterialApp을 리턴할거임
      title: 'Hetgalinungeo',
      theme: ThemeData(
        primarySwatch: Colors.green
      ),
      home: MyHomePage(),	// MaterialApp 안에 MyHomePage 위젯 있음
    );

여기서 title 값은 그냥 ''안에 써서 주는데,
왜 theme은 ThemeData 클래스 써서 저렇게 주냐?? 이거였다.
글고 이게 진짜 짜증났던게 MyHomePage에서 리턴값으로 Scaffold 주는 코드 짜면,
appBar argument에 AppBar 위젯 만들고 그 안에 title 줄 때는 ''이 안에 그냥 써서 주면 안되고,

return Scaffold(
      appBar: AppBar(
        title: const Text('Main Page'),
      )

위에 처럼 Text 클래스로 줘야한다.
그래서 대충 이유를 생각해봤는데,
인자가 초기값이 셋팅이 되어있으면 그냥 던져줘도 되는데 안되어 있는 경우 클래스나 팩토리를 쓰는듯.(아닐수도)
MaterialApp에서 title을 cmd누르고 클릭해서 살펴보면,
MaterialApp 생성자 안에
this.title = '' 이렇게 되어있다.
근데 AppBar 생성자에 title 보면,
this.title 이렇게 되어있다.
그래서 다른 것도 클래스 써서 인자에 값 넣는거 보니까
다 this.어쩌구 이렇게만 되어있길래 일단 그렇게 추측해본다.

📌 State

위젯은 상태에 따라 구분된다.
이것도 전에 분명 대충 정리했는데
뭔가 와닿지가 않아서 다시 정리,,
하 진짜 다음생은 천재 아니면 부자로 태어나길 ㅋ ㅜ

✅ Stateless

말 그대로 바뀔 필요 없는 애들.
가령 도움말 이런거 한번 만들면, 바꿀 필요 없으니까 stateless 위젯으로 만들면 된다.

✅ Stateful

근데 이제 내용을 갱신해야 하는 경우는 stateful을 써준다.
왜냐? 상태가 변하는 거니까 상태가 변하는 애를 써줘야 하는거다.
가령 계산기 같은 걸 만들었다고 하면, 버튼을 누를 때 결과값을 출력해주어야 한다.

근데 stateful 위젯의 경우 상태가 변경되면 특정 처리를 해줘야 하니까 항상 지켜봐야 한다.
그래서 메모리, CPU 등 자원 소비가 크다.

📌 마무리

오늘은 이렇게 얼레벌레 내가 헷갈린 부분을 정리해봤다.
근데 솔직히 정리해보니까 진짜 별거 아닌데 왜 헷갈렸지 싶다.
일단 플러터는 기본적으로 위젯으로 구성되는 것을 꼭 꼭 명심하고 있으면 될 것 같다.
내일은 다시 강의 듣고 포스팅 정리할 계획이다.
오늘 정리는 여기까지 하고 이제 자야지 😌✨

참고
- Flutter
- 조준수, 『Do it! 플러터 앱 프로그래밍(개정판)』, 이지스 퍼블리싱, 2022.01