3. 인터페이스 개발 기초 및 위젯 활용 (1)

1. 위젯

* 위젯: 화면에 보이는 뷰, 화면과 관련된 모든 것(화면 구성)

• 보이는 위젯
• 보이지 않는 위젯

  ▶ 플러터: 위젯으로 사용자 I/F를 만들어 화면 구성

  ▶ runApp() 함수: 위젯트리를 만든다! / 최상위 위젯 객체 전달?

  ▶ 위젯은 불변(불변 객체) → 정보 갱신은 새로운 객체를 다시 생성해야

  ▶ 그러나!! 위젯은 실제 화면이 아니다!! 즉, 실제 화면은 플러터 프레임워크에서 만들어 사용 

  ▶ 3가지 클래스 중 하나를 상속(InheriteWidget, StatelessWidget, StatefulWidget)

• InheriteWidget: 여러 위젯에서 공통으로 이용할 화면에 업데이트 되는 데이터(상태) 관리
• StatelessWidget: 화면에 업데이트 되는 데이터를 관리하지 않는 정적인 위젯
• StatefulWidget: 화면에 업데이트 되는 데이터를 관리하는 동적인 위젯

 

 

2. 화면 구성

* 화면 구성은 선언형 프로그래밍 이용

  ▶ 선언형: 화면 구성 정보인 위젯 정보만 작성하면 된다!

       (프레임워크가 API 이용하여 화면 출력)

 

 

3. 위젯 트리

* 3개 트리 구조로 구성되는 화면

  ▶ 단일 트리 구조로 한 화면이 구성되나(위젯 트리), 플러터 프레임워크가 화면 만들 때는 2개 구조 추가(총 3개 트리)

  ▶ 위젯 트리(widget tree)

  ▶ 엘리먼트 트리(element tree)

  ▶ 렌더 트리(render tree) : 실제 화면 출력과 관계

 

* 위젯 트리 → 엘리먼트 트리 → 렌더 트리

  ▶ 위젯 객체 하나 - 엘리먼트 객체 하나

 

* 엘리먼트 트리: ComponentElement 와 RenderObjectElement 객체로 구성

  ▶ ComponentElement: 객체 포함하는 역할만(화면출력X)

  ▶ RenderObjectElemet: 화면출력정보O

 

* 렌더 트리

  ▶ 실제 화면에 출력할 정보 가지는 RenderObjectElement 객체만 렌더 트리로 구성

  ▶ RenderObject 타입 객체(RenderDocorateBox, RenderImage, RenderFlex 등) 

 

 

4. 정적인 화면 & 동적인 화면

* 정적인 화면 - 상태(state)와 연결되지 X 위젯 - StatelessWidget 클래스 

• StatelessWidget - 상속 클래스 선언
• build() 함수 재정의 - 반환하는 Widget 객체가 출력할 화면 정보
• ★StatelessWidget에서 변수/함수 선언/변경 가능. 그러나!! 화면에 적용되지 않는다~

* 동적인 화면 - 상태(state) 유지 위젯, 즉 데이터 갱신 필요 - StatefullWidget 클래스 

• StatefulWidget - 위젯 클래스
• State - StatefulWidget 상태값 유지 & 화면 구성 // StatefulWidget은 State 객체를 따로 메모리에 유지
• StatefulWidget에서도 변수/함수 선언/변경 가능. 그러나!! 화면에 적용되지 않는다~
• build() 함수 없음. ★ 그러나!! createState() 함수 재정의 필수! ★

  ▶ createState() 함수에서 반환하는 상태 클래스는 State를 상속받으며,

      상태 클래스에는 build()함수가 꼭 재정의 되어야 하며,

      이를 반환하는 위젯이 StatefulWidget 화면을 구성

 

 

5. 상태(State)의 생명주기

* State 객체의 생명주기 - State는 한 번 생성된 후 메모리에 유지되므로

 

* 생명주기 함수

• initState() - 최초에 호출 / 상탯값 초기화
• didChangeDependencies() - initState() 함수 호출된 후 이어서 // State 생성시 자동 호출
• didUpdateWidget() - 상위 위젯에서 State와 연결된 StatefulWidget이 다시 생성
• build() - State 작성시 꼭 재정의 필요 (최초호출, setState()함수에 의해, didUpdateWidget()에 의해) 
• dispose() - State 객체 소멸 시 자동 호출

▶ State 객체 생성 →initState() → didChangeDependencies() → build() → 화면에 나옴 [Clean 상태]  

▶ setState(): State 상태 변경시 호출 함수 [Clean → Dirty 상태: State 화면이 표시 X → build() 함수 호출]  

▶ didUpdateWidgetState(): State는 Dirty 상태 → build() 다시 호출

 

* 상태

• Dirty : State 화면을 다시 빌드해야하는 상태
• Clean : State에 의해 화면이 출력되고 있는 정상 상태

 

6. 위젯 정보 BuildContext 객체 & 위젯 식별 키

  ▶ BuildContext - 위젯 트리에서의 위치 정보

  ▶ 위젯의 키 - 객체 식별 용도

 

 

< 참고 >
강성윤, "Do it! 깡샘의 플러터 & 다트 프로그래밍", 이지스퍼블리싱, 2023.