Stateless Widget VS Stateful Widget

안녕하세요 플러터를 한번 공부하면서 정리 하려고 합니다.

 

플러터는 Google에서 만든 Cross-Platform Framework 입니다.

하나의 코드를 기반으로 해서 모바일 플랫폼 앱(iOS/Android) 를 아울러 Desktop App 도 개발은 가능하나 

많은 분들은  Mobile을 위해 개발 하실꺼로 보입니다. 

 

 

 

 

윈도우 프로그래밍에서 윈도우는 모든것을 윈도우로 생각합니다. 윈도우 , 버튼, 텍스트필드 등이 그렇습니다. 이와 마찬가지로

플러터에서는 모든것이 Widget 입니다. 

(Widget : 작은 장치, 또는 부품을 뜻합니다.)

 

1. 위젯이란?

플러터에서의 Widget의  의미는 다음과 같습니다. 

  1-1. UI 구성의 모든것을 위젯 이라고 보면 될거 같습니다. 일반적으로 보는 Control(Button, TextField, Label, Table)부터 표현 의 밑바탕이 되는 View 까지를 위젯으로 봐야 합니다.

 

  1-2. 플러터 에서는 특이하게도 눈에 보이지 않지면 표현되는 값들 (padding, center)도 위젯이라고 문서에서 표현됩니다. 따라서 이러한 위젯으로 만들어진 화면이나 동작등 모든것들을 위젯이라고 표현한다고해도 과언이 아니다.

 

2. 위젯의 종류

 2-1. Stateless Widget

  - 화면에 한번 로드가 될때 1회성으로 그려지는 위젯이며 한번 로드되서 표현된 이후에는 변경되거나 이벤트 동작이 없는 부분에 대해서 사용되는 위젯 이다. 이미지가 변경되지 않는 상태의 스플래시뷰등을 표현할때 사용된다.

 

 

 2-2. StateFul Widget

  - 사용자의 선택이나 앱의 상태 등을 저장하거나 입력을 받는 등의 TextView, textfield, 버튼의선택 등에 대해서 위젯의 상태가 변경되고 화면이 다시 그려지게 되는 상태의 위젯을 말한다. 버튼의 입력을 받아 다른화면으로 전환 하거나, 입력된 값이 저장되는 등, 우리가 흔히 알고 있는 네이티브 앱에서 구현된 버튼이 있는 뷰를 생각하면 된다.

 

​

 2-3. Inherited Widget

   - 위젯을 상속하여 사용 하는것이다. 특정위젯의 하위에 있는 위젯에. 이는 말 그대로 위젯을 상속하는 것인데 데이터를 특정 위젯의 하층에 있는 모든 위젯에게 효율적으로 전달하는 플러터만의 특별한 위젯이다. 

 

 

 

 3. Widget Tree 

 

  - 플러터의 Dart 언어로 개발을 하다 보면 위젯이 어떤구조로 되어 있는지 볼수 있지만 대충 보면 다음과 같이 도식화 된다. 전체 뿌리에서나오는 것처럽 트리구조로 나오기 때문에 위젯 트리라고 합니다.

  -  My App 은 프로젝트 전체 이름이 됩니다.

  -  그 아래 MaterialApp 이 존재 합니다.

  -  그 하단에 화면의 동작과 배치등이 가능한 View 가 위치한다.

  -  최종적으로는 Scaffold 는 뷰의 디자인과 기능이 본격적으로 들어가는 공간입니다.

 

 

 

다음은 플러터 기초 샘플에 대한 분석을 해보도록 하겠습니다.