Flutter 로 웹툰 앱 만들기 #4 STATEFUL WIDGETS

#4.0 State (07:33)

이번 시간에는 그동안 보지못했던, Stateful Widget에 대해 배워볼것

 

우리가 지금까지 써온 것은 Stateless Widget. 매우 간단한데, 그저 build함수로 ui를 출력할 뿐.

Stateful Widget은 상태를 갖고있어 Stateful로 불린다.

 

데이터가 변경될 때 이 변화를 UI에 반영해 실시간으로 보고 싶다.

이때 쓰는게 Stateful Widget

 

Stateful Widget은 2 부분으로 나뉜다.

한 부분은 상태가 없는 위젯 그 자체

다른 부분은 위젯의 상태로 위젯의 State는 위젯에 들어갈 데이터와 UI를 넣는 곳이다.

 

데이터가 변경되면, 해당 위젯의 UI도 변경되게 된다.(react의 state와 비슷할 것으로 예상이 된다.)

만드는 방법은 수동이 아니다. 그냥 st입력하면 Stateful과 Stateless중에 선택할 수 있다.

 

또는 Stateless를 Stateful로 convert 할 수 있다.

Stateful Widget의 데이터는 단지, 클래스 프로퍼티일 뿐이다.

 

===

 

다시한번.

Stateful Widget에 두가지 부분이 있다.

State는 데이터를 가지고 있다. 데이터는 Dart의 클래스 프로퍼티

State클래스는 위젯의 UI도 갖고있다.

 

State의 데이터가 바뀔 때 함께 새로고침됨.

 

근데 지금은 안됨. 왜 그럴까?

https://github.com/NewChoBo/toonflix/commit/0b72ab911339d6c52186445a7f07ac49ba9a3cc0

 

#4.1 setState (04:40)

State를 활용하기

왜 저번 시간의 코드가 실시간으로 업데이트되지 않았을까?

 

StatefulWidget을 만들었고, 데이터를 갖고있다.

하나를 놓쳤다.

 

setState

class _AppState extends State<App> {

  int counter = 0;

  void onClicked() {

    setState(() {

      counter++;

    });

  }

setState 함수 안에서 데이터를 변경한다.

이로써 데이터가 변경되었음을 프로그램에 알릴 수 있다.

 

이렇게 해주면, 정상작동한다.

setState를 호출하지 않으면, build 메소드는 자동으로 동작하지 않는다.

setState는 기본적으로 build함수를 한번 더 부르는 것.

 

데이터의 변화를 무조건 setState에 넣어야 하는것은 아니다.

setState 전에 값을 바꾸고 setState를 하는것으로도 값은 최신화된다.

 

  void onClicked() {

    counter++;

    setState(() {});

  }

위 코드도 정상작동 한다는 뜻

 

동작은 잘 하지만, 안에 넣는게 가독성이 좋으니 더 추천하는 편이다.

 

#4.2 Recap (05:04)

복습

데이터는 Dart의 클래스 프로퍼티

Flutter 기능이 아님.

 

setState?

 

print는 디버그콘솔로 볼 수 있다.

 

다시한번, 값 변환하는 코드를 꼭 setState 안에 넣을 필요는 없다.

그저 가독성을 위해 권장되는 것.

 

Flutter에서는 state를 react에서만큼 많이 쓰지 않는다.

 

#4.3 BuildContext (10:18)

BuildContext가 뭘까?

 

Flutter은 모든곳에 복붙할 필요 없이, 한곳에서 굵기, 글씨크기, 색상 등을 지정할 수 있다.

한 곳에 복사하고 그 색상변수를 사용하는 것.

 

theme?

theme에 접근?

 

context?

이전에 있는 상위 요소들에 대한 정보.@override

  Widget build(BuildContext context) {

context에는 위젯트리의 정보, 아주 먼 요소의 정보 가져올 수 있음.

부모, 부모의 부모, 부모의 부모의 부모...

 

부모 요소에 접근할 수 있게 한다.

 

만약 변수가 null을 절대 가지지 않을경우 느낌표 ! 를 이용해 표시 할 수 있습니다. 예를들어 int x = nullableButNotNullInt!

?로 한다면 있으면 써라. 로 될 수 있다.

class MyLargeTitle extends StatelessWidget {
  const MyLargeTitle({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
      'My Large Title',
      style: TextStyle(
        fontSize: 30,
        color: Theme.of(context)
            .textTheme
            .titleLarge!
            .color, //null 방지를 위해 느낌표를 안붙이면 동작하지 않는다.
      ),
    );
  }
}

 

실제 BuildContext는 더 복잡하지만, 이게 기본이다.

https://github.com/NewChoBo/toonflix/commit/84094d40ae5fe412b8d0084fba9b1b490cb4d2fe

 

#4.4 Widget Lifecycle (07:18)

StatefulWidget은 life cycle을 갖고있다.

이벤트에 반응한다.

 

initState : build 메소드 전에 실행된다. api 업데이트 구독 등 할수 있다.

build : 

dispose : 위젯이 스크린에서 제거될 때 호출되는 메소드. 이벤트 리스너같은 것들을 구독 취소해준다.

 

안드로이드스튜디오에서도 라이프싸이클이 있었는데, 비슷할 것으로 생각된다.

https://github.com/NewChoBo/toonflix/commit/4eccf29da82d713fb34ea512f40bd5d06dd4be39