1. 플러터의 핵심 아이디어는 무엇인가?
Flutter widgets are built using a modern framework that takes inspiration from React.
The central idea is that you build your UI out of widgets. Widgets describe what their view should look like given their current configuration and state. When a widget’s state changes, the widget rebuilds its description, which the framework diffs against the previous description in order to determine the minimal changes needed in the underlying render tree to transition from one state to the next.
UI는 state를 기반으로 만들어진다. state이 변하면 이전 UI tree와 비교해서 달라진 부분에 대해서만 렝더링을 한다. 이 핵심 아이디어는 리액트로 부터 영감을 받았다.
2. runApp()의 역할은 무엇인가?
The runApp() function takes the given Widget and makes it the root of the widget tree.
3. wiget이 무엇인가?
A widget’s main job is to implement a build() function, which describes the widget in terms of other, lower-level widgets.
build function을 실행해서 화면을 만드는 역할을 맡음.
You might wonder why StatefulWidget and State are separate objects. In Flutter, these two types of objects have different life cycles. Widgets are temporary objects, used to construct a presentation of the application in its current state. State objects, on the other hand, are persistent between calls to build(), allowing them to remember information.
다른 요소와의 차이를 통해서 그것을 명확하게 이해하기 쉬움. widget은 state과 비교하여 명확하게 이해할 수 있는 것 같음. widet은 화면을 그리는 역할을 맡는 구성요소. state은 화면을 그리는 재료를 제공하는 구성요소. 역할이 다르고, 그렇기 때문에 생명주기도 다름.
Notice the creation of two new stateless widgets, cleanly separating the concerns of displaying the counter (CounterDisplay) and changing the counter (CounterIncrementor). Although the net result is the same as the previous example, the separation of responsibility allows greater complexity to be encapsulated in the individual widgets, while maintaining simplicity in the parent.
이런식으로 관심과 역할을 구분해서 구축해나가는 것은 복잡한것을 단순하게 만들어서 복잡성을 다룰 수 있도록 만들어줌.
4. stateful wiget과 stateless widget은 왜 구분되는가?
So far, this page has used only stateless widgets. Stateless widgets receive arguments from their parent widget, which they store in final member variables. When a widget is asked to build(), it uses these stored values to derive new arguments for the widgets it creates. In order to build more complex experiences—for example, to react in more interesting ways to user input—applications typically carry some state. Flutter uses StatefulWidgets to capture this idea. StatefulWidgets are special widgets that know how to generate State objects, which are then used to hold state.
In more complex applications, different parts of the widget hierarchy might be responsible for different concerns; for example, one widget might present a complex user interface with the goal of gathering specific information, such as a date or location, while another widget might use that information to change the overall presentation.
개발자 입장에서는 어떤 위젯이 그 자체로 상태를 포함해야 한다면, 그건 꽤 복잡한 컴포넌트가 될 것 같음. stateless 컴포넌트를 품고 있는 부모 컴포넌트가 statefule 컴포넌트가 될 것 같음.
When writing an app, you’ll commonly author new widgets that are subclasses of either StatelessWidget or StatefulWidget, depending on whether your widget manages any state.
설계자 입장에서는 리소스 자원을 효과적으로 관리하기 위해 구분했다고 생각함. 상태에 따라 화면을 다시 렌더링하는 프로세스는 비싼 작업이기 때문에 이 작업이 필요한 곳과 필요하지 않은 곳을 구분하는 것은 신경써야하는 곳과 쓰지 않아도 되는 곳을 구별할 수 있기 때문에 도움이 되지 않을까? 그런데 구체적으로 무엇이 어떻게 좋은지에 대해서는 잘 모르겠음.
6. widget component는 어떻게 만들어지는가?
The MyAppBar widget creates a Container with a height of 56 device-independent pixels with an internal padding of 8 pixels, both on the left and the right. Inside the container, MyAppBar uses a Row layout to organize its children. The middle child, the title widget, is marked as Expanded, which means it expands to fill any remaining available space that hasn’t been consumed by the other children. You can have multiple Expanded children and determine the ratio in which they consume the available space using the flex argument to Expanded.
Many widgets use a GestureDetector to provide optional callbacks for other widgets. For example, the IconButton, RaisedButton, and FloatingActionButton widgets have onPressed() callbacks that are triggered when the user taps the widget.
Appbar는 Container와 Row 등의 기본 컴포넌트를 활용하여 만들어져있다. Button은 GestureDector 등의 기본 컴포넌트를 활용하여 만들어져있다. 머터리얼 디자인시스템 역시 내가 디자인시스템 컴포넌트를 만드는 원리와 동일한 원리로, 유저들이 사용하기 쉽게 기존의 것들을 조합하여 만들어진 것이다.
6. key는 왜 필요한걸가?
By assigning each entry in the list a “semantic” key, the infinite list can be more efficient because the framework syncs entries with matching semantic keys and therefore similar (or identical) visual appearances. Moreover, syncing the entries semantically means that state retained in stateful child widgets remains attached to the same semantic entry rather than the entry in the same numerical position in the viewport.
위젯에 정체성을 부여해서 뭔가 보다 효과적으로 처리하기 위해 필요한 것 같은데, 구체적으로 뭐를 어떻게 효과적으로 처리하는지는 잘 이해가 안된다.
7. flutter의 state는 어떤 life cycle을 갖는가?
After calling createState() on the StatefulWidget, the framework inserts the new state object into the tree and then calls initState() on the state object. A subclass of State can override initState to do work that needs to happen just once. For example, override initState to configure animations or to subscribe to platform services.
createState 후 initState 작동됨.
If you wish to be notified when the widget property changes, override the didUpdateWidget() function, which is passed as oldWidget to let you compare the old widget with the current widget.
state이 변경되면 didUpdateWidget 작동됨.
When a state object is no longer needed, the framework calls dispose() on the state object. Override the dispose function to do cleanup work
state이 더이상 필요없을 때 dispose 작동됨.
8. state이 변동되면 widget은 어떻게 렌더링되는가?
When handling the onCartChanged callback, the ShoppingListState mutates its internal state by either adding or removing a product from shoppingCart. To signal to the framework that it changed its internal state, it wraps those calls in a setState() call. Calling setState marks this widget as dirty and schedules it to be rebuilt the next time your app needs to update the screen.
setState으로 감싸진 부분이 호출되면, 해당 state이 변동된 형태로 복제되고, 변동된 부분에 대해서 리-렌더링해야 한다는 스케쥴이 잡힌다음 리-렌더링이 진행됨.
