Stateless widget vs Stateful widget in Flutter

📢 사이드 프로젝트를 진행하며 Flutter의 Stateless, Stateful Widget 각각의 의도를 이해하고 사용하고 싶었어요

 

※ 24년 작성한 글 이에요

 

Stateless와 Stateful Widget을 Flutter 설계 철학에 맞게 사용하는 방법을 알아봤어요

 

 

❔Flutter의 2가지 Widget Type

Flutter의 widget은 Stateless와 Stateful 2가지 유형이 있어요

각 유형을 어떤 상황에 써야 하는지 보통 어떤 식으로 쓰는지 알아봐요

Stateless Widget

불변(immutable)으로, 한 번 생성되면 그 속성들이 변경되지 않아요

• 사용자 상호작용이나 다른 동적 변화에 반응할 필요가 없는 정적 콘텐츠를 표시
• Ex) 텍스트 레이블, 아이콘, 그리고 외형이나 동작이 사용자 입력에 따라 변하지 않는 버튼

Stateful Widget

시간이 지남에 따라 변할 수 있는 가변 상태 widget 이죠

• 사용자 행동, 데이터 가져오기, 또는 기타 이벤트에 반응하여 동적으로 업데이트 되어야 하는 구성 요소에 사용
• Stateful widget은 setState() 를 통해 새로고침 됨
• Ex) 폼, 체크박스, 그리고 실시간 업데이트가 필요한 모든 인터랙티브 요소

 

 

🤔 Flutter의 설계 철학에 따른 widget 배치 방법

"Stateful widget을 Stateless 위젯 안에 배치하는 것"이 Flutter의 설계 철학이에요

효율성

Stateful 위젯을 Stateless 위젯 내에 포함시킴으로써, 상태 관리를 UI의 필요한 부분으로만 국한시킬 수 있어요

성능

Flutter는 위젯을 효율적으로 재구성하도록 최적화 되어 있어요

• Stateful 위젯이 상태를 업데이트하면 그 위젯과 그 하위 요소들만 재구성되며 부모 Stateless 위젯 전체가 재구성되지는 않음
• UI를 반응성 있게 만들면서도 성능 비용을 크게 증가시키지 않음

 

 

🛍️ Takeaway

Stateless와 Stateful Widget을 Flutter 설계 철학에 맞게 사용하는 방법을 익혔어요

• "Stateful widget을 Stateless 위젯 안에 배치" 하자!