[TIL] 2022-04-21 Flutter-#5

Jongdroid·2022년 4월 21일

TIL

목록 보기

5/24

오늘은 이런걸 배워볼까요.

StatelessWidget
StatefulWidget

정말 중요한 내용이오니 같이 뽜이팅 해보는건 어떨까요.

1. StatelessWidget

첫 시간부터 많이 접했던 친구 입니다. 핵심적 특성은 이 친구는 상태를 유지하지 않습니다.

[박00 코린이의 질문시간]
Q. 상태를 유지하지 않는다구요? 이게 뭔 dog sound 입니까!!!!

A. 수 많은 앱들은 실시간으로 가장 최근 데이터를 로드하여 클라이언트로 뿌여주게 됩니다. (좋아요 수, 최근 작성된 글 등) 이 부분을 StatelessWidget 을 통해 받고 뿌려준다면 실시간으로 데이터를 보여줄 수 없겠죠. 딱딱하게 굳어있는 정적인 녀석이라고 생각하는건 어떨까요.

즉 StatelessWidget 은 데이터가 자주 바뀌지 않고 비교적 고정되어 있는 위젯을 넣어보면 좋지 않을까요.
앱의 메인 이름, 백그라운드 색상, 폰트 크기 이 친구들의 특징이 있습니다.
= 자주 바뀌지 않습니다.

그럼 이거 한번 해볼까요?
StatelessWidget 이용하여 FAB(플로팅버튼) 누를때마다 숫자가 1씩 증가.

가장 먼저 숫자가 1씩 증가하는 걸 담아주는 녀석이 필요하지 않을까요?
- 저는 이렇게 만들었네요 var a = 1; == ??? 저기여 에러나오는데여?
- 자. 우선 'const' 라는 녀석들 보이시죠. 지워줍시다. (차후 설명)

class MyApp extends StatelessWidget {
   MyApp({Key? key}) : super(key: key);

  var a = 1;

플로팅 버튼 만들고 클릭할때마다 1씩 증가해볼까요.
- 상단바 이런거 필요없이 바로 floatingActionButton 해서 가져오면 됩니다.
- 근데 플로팅 버튼 이 녀석은 필수 위젯이 있어요. 바로 child() 와 onPressed(){} 입니다.
- child 는 아실거고, onPresed() 는 클릭을 감지하는 녀석이에요. 안드로이드 onclicklistener 랑 비슷한 녀석이라고 생각합시다.
  = 버튼 누르면 onPresed() 를 호출해서 {} 중괄호 안에 내용 실행합니다.
- 근데 또 중요한게 있어요. Text(a.toString()) 이게 뭘까요?
  = 플로팅 버튼안에 글자를 넣을건데 아까 그 변수를 넣을거에요. 그래야 이제 버튼 눌렀을때 텍스트 안에 숫자가 1씩 올라갈거에요.
  근데 글자는 텍스트고 아까 그 변수는 정수형이니까 문자열로 바꿔줘볼까요. toString() 이 녀석이 해줄겁니다.

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
          child: Text(a.toString()),
          onPressed: (){
            print(a);
            a++;
          },
        ),
      ),
    );
  }

그래서 해봤는데 1로 고정되어있고 변하는게 없습니다.
command+4(맥) or (윈도우는 alt+4) 누르고 플로팅 버튼 광클해볼까요? 그럼 숫자는 계속 올라가고 있는데 플로팅 버튼 안 텍스트는 1로 고정되어있네요. 이거 사기당한걸까요 ?

정답은 위젯을 다시 렌더링하지 않아서 그런거에요. 위젯을 계속 새로 반영하면 1이 바뀌지 않을까요?

2. StatefulWidget

지난번에 사기당한 거 복구해봅시다.

state 를 이용하면 재랜더링 할 수 있습니다.
- (state 로 지정된 친구들은 값을 갖고 있다가 변동사항이 발생하면 state 를 사용중인 위젯을 재랜더링 합니다.)

state 만들기

stf 라고 입력하고 자동완성 도움을 빌려 완성하면 긴 코드가 만들어집니다.
- 저처럼 한글로 하시면 안돼요!!!!

class 따끈따끈한stateful extends StatefulWidget {
  const 따끈따끈한stateful({Key? key}) : super(key: key);

  @override
  State<따끈따끈한stateful> createState() => _따끈따끈한statefulState();
}

class _따끈따끈한statefulState extends State<따끈따끈한stateful> {
  
  //여기에 만드는 녀석들은 다 state 가 됩니다.
  var a = 1;
  
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

State 밑에 아까와 동일한 변수를 만들어볼까요. (const 지우는거 잊지말기)
- var a = 1;
그리고 아까와 동일하게 코드를 작성해봅시다.

class _MyAppState extends State<MyApp> {

  //여기에 만드는 녀석들은 다 state 가 됩니다.
  var a = 1;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
          child: (Text(a.toString())),
          onPressed: (){
          
          },
        ),
      ),
    );
  }
}

안되는데요. 이 사람 거짓말쟁이인듯요 ;;

state 변경 사항은 반드시 setState(){} 를 이용합니다.

저희가 원하는 건 버튼이 클릭될때 값이 바뀌는 걸 원합니다.
- 그러면 onPressed(){} 내부에 setState(){} 를 넣어볼까요? 그리고 증가시키는건 어떨까요?

  floatingActionButton: FloatingActionButton(
          child: (Text(a.toString())),
          onPressed: (){
            setState(() {
              a++;
            });
          },
        ),