stateless widget과 stateful widget에 대해 상태 관리의 관점에서 포스팅을 하고 있습니다. 이번 포스트는 stateful widget이 메인 주제입니다. 이번 포스트는 스테이트풀 위젯의 두 개의 클래스가 쌍으로 작동하는 방식과 상태를 변경하는 방법에 대해 다루게 됩니다.
stateless widget의 상태가 알고 싶다면 이쪽을 참고해 주세요.
stateful widget (스테이트풀 위젯)
스테이트풀 위젯은 상태(state)를 저장한다는 차이점을 제외하고는 스테이트리스 위젯과 매우 유사합니다. 스테이풀 위젯은 자신의 상태나 자신의 상태를 관리할 수 있는 내부 기능을 가지게 됩니다. 우선 간단한 예로 살펴보도록 하겠습니다.
Box() 로 상자를 만들고 있다고 생각해 봅시다.
그리고 상자의 내부에서 색상을 파란색으로 가지고 있다면, 플러터는 이 상자를 파란색으로 렌더링 할 것입니다. 상태를 변경하고 싶을 때는 새 상태를 주입하지 않고 상태를 변경하게 됩니다. 예를 들어 이 상자를 탭 한다면 위젯 내에서 색상을 오렌지색으로 변경하는 내부 로직을 가질 수 있을 것입니다.
그리고 내부 로직을 통해 상태 값인 색상이 변경되면 플러터 프레임워크에게 위젯의 상태를 변경했다고 알립니다.
이제 재렌더링을 위해 위젯에 신호가 보내지고, 다음 렌더링 주기에서 우리는 오렌지색 상자를 볼 수 있게 됩니다.
쌍으로 작동하는 스테이트풀 위젯(Stateful Widget)
코드에서 stateful widget은 어떻게 생겼을까요? 아래가 Stateful widget을 확장하는 클래스의 예입니다.
스테이트풀 위젯은 두 개의 클래스(예에서는 Popup과 PopupState), stateful widget과 state가 쌍으로 작동하게 됩니다. stateful widget 쪽은 비교적 간단한 작업을 수행하게 됩니다. 스테이트풀 위젯은 createState 메서드를 재정의 해야 되며, createState메서드는 플러터가 추적할 상태(state) 객체를 반환해야 합니다. 위 예의 경우 PopupState클래스가 상태 객체를 돌려주고 있는데, PopupState 클래스의 인스턴스 내부에서 캡슐화하고 있습니다. 일반적으로 스테이트풀 위젯의 무거운 작업이 수행되는 곳이 됩니다.
이제 State클래스를 상속받는 PopupState 클래스를 살펴보겠습니다.
PopupState는 Popup 스테이트풀 위젯과 쌍을 이루는 클래스입니다. 클래스의 내부에는 build 메서드를 포함하고 있고 이 build 메서드는 stateless widget과 정확히 동일한 시그니처를 가지고 있습니다. 처음에는 이것이 이상해 보일 수 있습니다. 스테이트풀 위젯에는 실제로 build 메서드가 없는 반면 스테이트풀 위젯의 상태(State)에 build 메서드가 포함되어 있으며 실제로 모든 조작이 발생하는 곳입니다.
PopupState를 조금 수정했습니다.
빌드 메서드 내부에서 ElevatedButton을 리턴하고 있습니다. ElevatedButton의 child에는 Text를 설정하고 있고 Text는 message 속성값인 'Hello, World'가 설정될 것입니다. onPressed에서는 버튼을 눌렀을 때 위젯의 상태를 변경할 이벤트 리스너를 추가하였습니다.
상태를 바꿔주는 setState
여기서 주목해야 할 것은 setState입니다. SetState는 State클래스를 상속받으므로 제공되는 메소드 입니다. setState 메소드 내에서 우리가 해야할 일은 함수를 제공하는 일인데, 그 함수에서는 상태의 변화를 처리하는 로직을 넣어줘야 됩니다. 따라서 위 예의 경우 message를 'Hello, World'에서 'Flutter, State'로 변경하고 있고 버튼이 클릭되어 setState가 호출되면 플러터는 이 위젯의 상태가 변경되었음을 인식하고 계속 진행하게 됩니다. 그리고 플러터는 다음 렌더링 주기를 수행할 때 다시 위젯이 렌더링될 수 있도록 큐에 넣어줍니다.
여기까지 수고하셨습니다.
Stateful WIdget의 개요에 대해 알아보았는데요. 다음 포스트에서는 Stateful widget의 실습을 진행해 보도록 하겠습니다.
'프로그래밍 > Flutter' 카테고리의 다른 글
| [flutter 상태관리] 6. stateful widget 실습2, 태그 필터 갤러리 만들기 (0) | 2022.06.06 |
|---|---|
| [flutter 상태관리] 5. stateful widget 실습, 체크박스를 가진 갤러리 만들기 (0) | 2022.06.04 |
| [flutter 상태관리] 3. stateless widget 실습 (0) | 2022.06.01 |
| [flutter 상태관리] 2. stateless widget (스테이트리스 위젯) (0) | 2022.05.31 |
| [flutter 상태 관리] 1. 선언형(Declarative) 상태 관리 (0) | 2022.05.31 |
댓글