플러터 - Stateless Widget과 Stateful Widget 차이점

한창 앱 개발이 진행 중이지만

개인적으로 플러터 공부에 대해 정리도 하고

쉬어가는 의미로 Stateless와 Stateful 차이점에 대해 포스팅한다.

​

Stateless Widget

화면이 로드될 때 한 번만 그려지는 State가 없는 위젯으로

변경이 필요한 Data가 없는 것을 의미하며

이벤트 또는 사용자 상호 작용에 의해 동작하지 않는다.

​

예를 들어 지금 제작 중인 미소닭갈비 앱의

가게 안내, 메뉴 안내 화면처럼

사용자와 상호작용이 필요 없는 위젯은

Stateless Widget으로 구성하면 된다.

​

​

Stateful Widget

​

위젯이 동작하는 동안 Data 변경이 필요한 경우

화면을 다시 그려서 변경된 부분을 위젯에 반영하는 동적인 위젯으로

이벤트 또는 사용자 상호 작용에 의해 동작한다.

​

예를 들어 지금 제작 중인 미소 닭갈비 앱의

하단 탭 화면과 같이 탭 클릭에 따라

트리거를 처리하여 페이지 화면 변경이 필요한 위젯은

Stateful Widget으로 구성해야 한다.

​

예를 들어 축구 게임의 경우 점수를 나타내는 위젯은

골이 들어갈 때마다 변경해야 돼서 Stateful Widget 사용이 필요하다.

​

또는 체크 박스에 따라 화면을 변경하는 등

이렇게 동적으로 화면 변화가 필요한 경우

하면 Stateful Widget을 사용해야 한다.

​

위 소스 가장 하단을 보면 onTap의 index에 따라

setState 메서드 호출을 통해 페이지를 변경하도록 되어 있다.

setState 메서드에 변경된 상태 값을 플랫폼에 전달하여

build 메서드가 호출되어 화면을 다시 그리고

변경된 내용이 반영되는 구조로 되어 있다.

​

그러면 어렵게 고민하지 말고 Stateful Widget만

구성하면 되지 안 되나? 생각할 수 있지만

Stateless Widget에 비해서 성능이 떨어지는 단점이 있다.

​

그래서 Stateful과 Stateless로 나눠져있는 것이며

상황에 맞게 사용해야 한다.

​

빌드 과정을 기준으로 두 위젯을 비교하면 다음과 같다.

​

Stateless Widget은 한 번만 Build 과정이 발생하여

한번 그려진 화면은 계속 유지되며, 성능이 좋다.

​

Stateful Widget은 setState가 발생 시 다시 Build 하는

과정이 일어나며 동적 화면을 구현할 수 있다.