(본 포스트는 필자가 공부를 목적으로 진행한 것입니다. 혹시 틀리거나 알려주고 싶으신게 있다면 댓글을 남겨주세요!)
네, 이번에는 어떤 부분을 배워볼까? 하다가 flutter에 존재하는 state에 대해서 다뤄보려고 합니다!
Flutter documentation
Get started with Flutter. Widgets, examples, updates, and API docs to help you write your first Flutter app.
docs.flutter.dev
위 링크를 타고 가시면 https://www.youtube.com/watch?v=QlwiL_yLh6E
What is State? 라는 제목으로 자세히 다루어져 있으니 참고하시면 좋을거 같아요!
이를 이해하려면 먼저 위젯이라는 개념을 알아야 해요! 이 부분은 나중에 공부해보도록 할게요!
공식문서에서 설명하는 widget은 UI에서 불변하는 녀석, 그리고 동영상에서 설명하길 widget은 설명된 것 외에는 아무것도 하지 않는다고 하네요! 이게 무슨 뜻일까요?
동영상에서는 케이크를 만드는 방법을 비유로 설명하고 있어요!
케이크를 만들기 위해서는 만들 계획을 세우고 어떤 요리법을 사용할지, 어떻게 장식을 할지~ 등등 수많은 과정 중에 하나를 선택해서 케이크를 만들겠죠! 그리고 세워진 계획대로 케이크를 만들거예요!
특별한 일이 없다면 여러 개의 케이크를 만들 때 요리법을 새로 만들기보다는 이미 세워진 계획의 절차를 따라서 차근 차근 케이크를 만들겠죠!
Flutter도 마찬가지로 앱을 만드려고 할때 문서에서 어떤 부분을 수정하지 않고 정해진 절차를 따라서 진행을 한다고 해요!
그렇다면 공식문서에서 설명하는 widget은 뭘까요?
위젯은 UI에 대한 설명이라고 하네요! 또 대상을 설명하지만 사용하는 동안에는 모습이 변하지 않는다고 합니다!!!
오잉? 여기서 궁금점이 생기죠?
앱은 어떻게 보면 사용자와 UI가 상호작용하면서 이뤄지는 일련의 작업인데 변하지 않으면 어떻게 상호작용을 하지??
사용자가 사용할 때 변경하고 싶으면 어떻게 해야하나요?
그래서 Flutter에는 State가 있답니다!
Stateless 에서 UI를 구성하면 어떤 짓을 해도 UI가 변경되지 않아요!
이 코드에서는 onChanged에 어떤 동작도 지정되지 않았기 때문에 변경되지 않기도 하지만 동작을 넣는다고 하면 아래와 같은 오류가 떠요!
첫 문장을 직역하면 final 필드가 아닌 클래스에 const 생성자를 선언할 수 없다고 하네요.
동영상에서는 이에 대한 설명을 위에 있는 widget에 대한 문장과 엮어서 이야기해요.
위젯은 변경이 불가해서 이러한 클래스 안에 가지고 있는 변수들은 변수가 될 수 없고 동작시킬 수 없다!
왜? 위젯이 변경이 불가한데 어떻게 그 안에 있는 녀석들이 변경 가능하냐!! 안돼! 라고 하는 거 같네요!
뭐... 그런가 봐요 ㅋㅋㅋㅋ 아무튼 그렇답니다!
다만 UI는 그렇게되면 안되겠죠! UI는 사용자의 선택에 따라 변화 또는 다른 동작들이 진행되야 하니까요!
그래서 앱 개발에서는 이런 과정들을 상태에 적용시킨답니다!
상태는 쉽게 말해서 UI가 변화하기 위해 필요한 데이터를 제공한다고 생각하면 될 거 같아요!
위에 있는 코드는 stateless 위젯이었죠! 즉, 사용자와 상호작용할 수 없는 불변의 UI라는 겁니다!
반대로 상태를 적용시킨 위젯을 Stateful 위젯이라고 합니다! 다음과 같이 사용할 수 있죠.
위 코드와 다른 점은 StatelessWidget ==> StatefulWidget 그리고
onChanged 부분에서 Arrow 함수 body부분을 setState()로 감싸주었다는 것입니다!
물론 @override부분에 createState()가 생기기도 했어요!
자, 더 자세하게 알아볼까요?
Stateless에서는 build가 StatelessWidget 이라는 위젯 내부에 존재했어요!
반면 Stateful에서는 build가 _TaskItemState라는 클래스, 객체 내부에서 선언되었네요?
동영상에서는 이 부분을 생성 방법이 존재하는 위치와 라벨의 값의 시작점이 변경되었다고 해요!
이걸 통해서 위젯 변경 불가능하도록 유지한다고 해요!
그러니까, 위젯은 처음부터 끝까지 변경이 불가능하고 state라는 녀석을 통해서 사용자가 만지는 UI를 변경시켜준다.
이렇게 정리할 수 있겠죠?
그리고 이렇게 말하십니다
"앱의 일부를 직접 제작하지 않고 새로운 상태 객체에 이를 위임하죠, 그런 식으로 값의 변수와 같은 데이터는 주변에 머물게 되고 우린 이를 바탕으로 UI를 생성하는 거예요"
네? 무슨 뜻이죠? 여기에 주어를 넣어서 읽으면 어느 정도 해석이 되는 거 같아요. 물론 제 생각이니까 틀릴 수도 있어요!
위젯은 앱의 일부를 직접 제작하지 않는다. 대신 새로운 상태 객체에 앱의 제작을 위임하기 때문에 이 객체에 변수와 같은 데이터가 존재하기 때문에 우리는 이 객체를 통해서 UI를 생성한다. 그렇게 하면 위젯을 건들이지 않고도 이 객체를 이용해서 사용자가 선택한 어떤 데이터 변화를 UI로 나타낼 수 있다!!!
오오 맞는 거 같아요! 네! 그렇답니다!
"상태에 대해서는 알아야 할 게 많고 가장 효율적으로 접근하기 위한 앱의 구성 방법과 앱 내의 모든 위젯에 걸쳐 공유하는 방법도 마찬가지죠, 다음 에피소드에서, 이들 중 한 방법을 살펴보도록 할게요."
네, 다음 포스팅이 정해졌죠?^^
오늘은 간단하게 state에 대해서 알아봤습니다!
'IT > Flutter' 카테고리의 다른 글
| <Dart> Streams 비동기 프로그래밍 (0) | 2023.03.16 |
|---|---|
| <Dart> Effective Dart: Documentation (0) | 2023.03.06 |
| <Dart> What is Future and how to use it? (2) | 2023.03.02 |
| <Flutter> Scaffold란? (0) | 2023.02.14 |
| <Dart> 효과적인 Dart: Style (0) | 2023.02.13 |
댓글