Jacob Ko

Jacob Ko

Everything is Awesome 👍

Stateful widget

Updated:

1.State?

  • State 란 UI 가 변경되도록 영향을 미치는 데이터입니다.

  • App 수준과 Widget 수준의 데이터가 있습니다 (클릭을해서 check box 가 true / false , textbox 에서 ID, Password 등 입력 하는 데이터등 app 의 상태를 바꾸는 모든 상태를 가리 킵니다)

2.Stateless widget

  • 흔희 생태가 없는 위젯을 가리키나, 실제적으론 State 가 정해져 있고, 그것이 변하지 않은 위젯을 말합니다 (한번 지정된 text, color 등은 widget 이 삭제되지 않는한 변하지 않는다는 것입니다)

3.Widget, Element, Render tree

Widget tree 는 사용자가 설정하는 tree 로 UI 를 구성하는데 사용되는 tree 이며, element, render tree 는 구성된 widget tree 를 바탕으로 flutter 내부에서 실행되는 tree 구조 입니다

  • widget tree 는 사용자가 작성한 code 에 근거해서 flutter 가 build method 를 호출해서 생성하는 것입니다. (예, MyApp -> Scaffold -> AppBar -> Text) => 이것은 하나의 구성일뿐 직접적으로 스크린에 그려 지는것은 아닙니다. 즉, widget tree 역활은 하나의 설계도 역활로써 flutter 에게 순서와 방식을 알려주는 단계입니다

  • Element tree 는 중간에서 widget tree 와 render tree 를 연결하는 역활을 합니다. flutter 가 widget tree 를 바탕으로 자동으로 생성해주는 tree 이고, 모든 widget tree 에 하나하나씩 맞대응해서 생성됩니다.

  • render tree 는 screen 에 직접적으로 그려주는 high level system 입니다. Element tree 는 실질적으로 render 되기 위해서 render object 끼리 일대일 맞대응해서 연결 되어 있습니다. 최종적으로 눈으로 보여지는 스크린상에 모든 요소는 render tree 의 작업 결과 입니다.

image

Stateless widget 값 변경시 일어나는 순서

Container widget 의 색을 white 에서 blue 로 변경 => Hot reload => build method => widget tree rebuild => Element tree link update => Element tree info => Render tree => Render object re-rendering

  • flutter 의 hot-reload 는 실행 될때 마다 화면에 다시 그리는것이 아니라 (rebuild 되는 것이 아니라) element tree 를 통해서 변경된 부분만을 다시 그리는 방법을 사용하기 때문에 빠르고 효율적인 rendering 이 가능한것입니다

  • stateless widget 에서 값이 변경되면 오직 rebuild 만을 통해서 새로운 State 를 적용해서 화면이 변경됩니다

4.Stateful widget

  • Stateful and Stateless widget 의 공통점은 생성자를 통해서 외부에서 데이터가 입력이 되면 그 결과를 반영하기 위해서 build method 가 호출이 되면서, widget 들이 rebuild 되며 필요한 부분의 UI를 다시 rendering 하게 됩니다

  • 하지만 Stateless 와의 결정적인 차이점은 Stateful widget 은 내부에 State 라는 또다른 class 를 가지고 있다는 점입니다. 2개의 class 가 결합해서 Stateful widget 을 만들고 있는것입니다.

  • Stateful widget 이 rebuild 되는 2가지의 경우

    • child 위젯의 생성자를 통해 새로운 데이터가 전달 될때

    • internal state 가 바뀔때

🔶 🔷 📌 🔑

Reference

Categories:

Updated:

Leave a comment

You may also enjoy