패스트캠퍼스 환급챌린지 9일차 미션(2월 9일): 15개 프로젝트로 실무까지 끝내는 Dart & Flutter 앱 개발 강의 후기

어제 공부한 내용에 이어서 위젯을 겹쳐서 보여주고 싶을 때 활용할 수 있는 Stack 위젯과 Constraint에 대한 학습을 진행하고 레이아웃 구성에 대한 감을 잡게 되었다. 짤막한 후기를 덧붙이자면 Flutter에는 특정 기능을 갖는 위젯이 진짜진짜 많다. CSS 속성같은 느낌이 나서 이걸 일일이 외우기보다는 실제로 UI를 구성해보면서 자주 사용하는 것들은 그냥 자연스럽게 손에 익히는 식으로 공부하는게 좋은 것 같다.

 

오늘 이어서 다뤄보려는 내용은 이제 Flutter의 State에 관한 내용이다. 내가 지금까지 레이아웃 구성 실습에 활용했던 위젯들은 모두 Stateless 위젯이다. 위젯이 상태에 따라 로직을 수행하거나 모습을 변경할 필요가 없는 위젯인 것이다.

반대 개념의 위젯은 Stateful 위젯이라고 한다.

일단 두 위젯을 하나의 Column에서 반환하도록 CustomBody 위젯을 변경해주고, 하나는 Stateless, 나머지는 Stateful 위젯으로 만들어보자.

Stateless 위젯은 stless, Stateful 위젯은 stful이라는 단축어를 통해 기본적인 보일러 플레이트 코드를 생성할 수 있다.

class CustomBody extends StatelessWidget {
  const CustomBody({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ExampleStateless(),
        ExampleStateful(),
      ],
    );
  }
}

class ExampleStateless extends StatelessWidget {
  const ExampleStateless({super.key});

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

class ExampleStateful extends StatefulWidget {
  const ExampleStateful({super.key});

  @override
  State<ExampleStateful> createState() => _ExampleStatefulState();
}

class _ExampleStatefulState extends State<ExampleStateful> {
  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

 

일단 두 위젯을 구성하기 위한 기본적인 코드는 생김새부터가 다르다. Stateless는 하나의 Class로 이루어져있지만, Stateful은 총 2개의 Class를 활용한다. 본체에 해당하는 Class가 StatefulWidget Class를 상속받고, createState() 함수로 어떤 객체를 하나 만든 다음에 해당 객체에서 실제 위젯을 빌드하는 방식으로 이루어져있다.

 

앞서 Stateful 위젯의 특징으로, 내부에서 관리하는 상태에 따라 특정한 기능을 수행하거나 외형을 변경하는 특징이 있다고 했다.

그게 어떻게 가능한지 한번 알아보자. 일단 상태(State)에 대한 이해가 필요한데, 여기서는 위젯 내부에서 스스로 관리하고, 변경 가능하며, 상위 위젯에 변경되었다는 것을 알려줄 수 있는 어떤 값이라고 이해하자.

 

그리고 State는 Stateful 위젯에 필수적으로 포함된 StatefulState 객체 내부에 선언되어야한다.

지금은 예시로 아래 사진과 같이 사용자의 Tap을 감지하면 상태값을 1씩 증가시키는 로직을 작성해보자.

 

Tap 이벤트 감지를 위한 GestureDetector는 이번 예제를 위해 미리 사용되었다.

아무튼 이렇게 예제를 작성하고 실제 시뮬레이터에서 파란 화면을 클릭해보면, 분명 터미널에는 index 상태가 증가하는게 출력되는데 화면에서는 0이 그대로 유지되는 것을 확인할 수 있다.

 

이건 index가 변경되는 것을 상위 위젯이 감지하지 못했기 때문이다. 이것 때문에 상태를 변경하는 코드는 setState()라는 함수를 통해 호출되어야한다. onTap 내부의 콜백을 setState() 함수 내부로 옮겨주자.

그러면 이제 위와 같이 상태에 따라 위젯이 변경되는 것을 확인할 수 있다.

조금 응용하면 이렇게 배경색의 명도를 조절하도록 할 수도 있다.

 

이런 상태를 응용하면 유저의 인터랙션에 의해 변경되는 재밌는 UI를 많이 만들 수 있다.

단, 상태를 활용할 때 한 가지 주의할 점이 있는데, 상태의 초기값을 지정하는 initState() 함수에서 원시값으로 상태를 만드는 경우는 자동으로 GC(Garbage Collection)가 되어서 괜찮지만, 다른 위젯에서 참조할 수 있는 Controller 등의 객체는 항상 dispose() 함수 내에서 메모리 할당 해제를 트리거시켜줘야한다. 제대로 메모리 할당 해제를 시키지 않으면 다른 위젯에서 다시 해당 Controller를 참조할 때 메모리 누수가 발생하는 등 성능 저하 이슈가 발생할 수 있기 때문이다.

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

https://bit.ly/48sS29N