Widget

Flutter Is an open source framework for building beautiful, natively compiled, multi-platform applications from a single codebase.

플러터 공식 홈페이지에 쓰여있는 소개문구이다. 말 그대로 ios, android 플랫폼을 모두 지원하는 dart 언어 기반 오픈소스 프레임 워크이다. 따라서 플러터를 다루기 위해서는 dart 언어와 프레임워크 자체에 대한 이해도가 필요하다.

먼저, 플러터의 가장 중요한 개념 중 하나인 위젯에 대해 다뤄보려한다.

위젯은 플러터 앱의 UI를 구성하는 기본단위이다. React의 컴포넌트와 유사한 개념으로, 어떤 식으로 UI를 표시할지 결정한다. 유의할 점은 눈에 보이는 요소뿐만 아니라 padding, row 등 눈에 보이지 않는 요소까지 모두 위젯에 포함된다.

위젯은 상태에 따라 크게 2가지로 나뉜다.

여기서 말하는 상태란, 위젯의 생명주기 상태를 말한다.

Stateless Widget

앱이 동작하면서 변하지 않는 위젯들을 stateless widget이라고 한다. 조금 더 자세히 말하자면, 유저와 상호작용 없이 (즉, 이벤트에 의해 동작하지 않는다.) 화면이 렌더링될때 한번만 그려지는 위젯들을 말한다.

생명주기 동안 변하지 않기 때문에, 처음 할당받은 모습 그대로 UI가 그려진다. (eg. Text Widget, Image Widget ...)

Stateful Widget

stateless widget과 반대로, 상태의 변경사항을 통해 생명주기를 가지는 위젯을 말한다. 동적으로 변경되는 값에 따라 UI가 변경되기 때문에 유저의 이벤트, 상호작용에 의해 동작한다. 입력창을 구현할때 사용되는 TextField가 예시이다.

요약 : 상태 변경으로 인해 UI가 변경되어야 한다면? ➡️ stateful widget을 사용한다.

이어서, stateful widget의 생명주기를 한번 살펴보자.

먼저, 우리가 위젯을 호출할때 class MyApp extends StatefulWidget 라는 코드를 작성하게 된다.

즉, StatefulWidget이라는 클래스를 상속하게 되는 것이다. 그렇다면 StatefulWidget 클래스는 어떻게 되어있는지 살펴볼 필요가 있다. 아래 코드는 stateless widget과 stateful widget에 대한 기본 구조이다.

// stateless
class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

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

// stateful
class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

stateless widget과 다른점은, 위젯 내부에 createState() 메서드를 통해 이 위젯의 상태를 생성하고 있다는 점이다.

이 메서드는 stateful widget을 호출할때 실행되며, 상태를 생성함과 동시에 생명주기가 시작된다.

이 위젯이 화면에 표시되기 위해서는 생성 이후 초기화를 실행하는 단계가 필요하다. 이 단계를 초기화 단계라고 말하며, initState() 메서드를 통해 실행된다.

다음으로 빌드단계를 통해 위젯트리를 구성하고 반환하며, 상태가 변경되는 경우, setState() 메서드를 통해 빌드를 다시 실행한다. (상태 변경 이외에, 위젯의 의존성이 변경되는 경우, didChangeDependencies() 메서드가 호출된다.)

마지막으로, 더이상 위젯이 필요하지 않을때, dispose() 메서드를 통해 위젯을 제거하고 생명주기를 종료한다.

요약하자면,

• stateful 생성자 호출

• createState로 상태 생성

• initState를 통해 상태 초기화

• 위젯트리 빌드, 반환

• 이벤트로 인해 상태 변경시 setState를 호출해 리빌드

• 위젯이 필요하지 않다면, despose를 통해 위젯 삭제.

의 생명주기를 가진다.