[Flutter]. 06. Flutter tutorial on codelab(2)

지난 번에 버튼을 누르면 새로운 단어 쌍이 보여지는 샘플 앱을 만들었습니다.

https://learn-and-give.tistory.com/40

[Flutter]. 04. Flutter tutorial on codelab(1)

 

마지막에 추가 된 코드들이 어떤 역할을 하는지 정확히 파악되지 않은 상태인데, 이 상태로 진행하면 그 뒤의 내용도 잘 이해되지 않기 때문에 한번 살펴보고 가도록 하겠습니다.

 

 나름대로 정리 해 본 구조

 tutorial에도 앱의 구조 다이어그램이 있었는데, 이제 직접 이해하고 정리한 것이 아니라서 잘 이해가 안되어 다시 코드를 보고 정리 해 본 다이어그램입니다.

 

 일단, 눈에 보이는 모든 것은 Widget이고, Widget 내부에 또 Widget이 있을 수 있습니다. 여기서는 MyApp이라는 Widget 안에 MyHomePage라는 Widget이 있네요.MyHomePage라는 Widget에 표시되는 내용이나 데이터 갱신과 관련 된 로직은 MyAppState라는 ChangeNotifier에서 처리를 합니다. 왜 두 개의 Widget이 필요했는지는 차차 알아봐야겠습니다.

 

  App의 State(변수?)를 관리하는 방법은 꼭 ChangeNotifer를 써야 하는 것은 아니고, 이 예에서 간단한 예를 보여주기 위해 선택한 것이라고 합니다. 변경된 내용을 BroadCasting하는 그런 역할을 할 때 사용하는 클래스인 것 같습니다.

 

MyHomePage는 실제로 화면에 보여지는 부분인데, 보여질 내용이나 로직의 실행은 AppState를 통해 처리하고 있습니다. MyHomePage는 말하자면, UI 역할만 하고 있네요.

 

대략 이런 구조이고...

 

단어쌍을 만들어 줄 때 사용되는 WordPair라는 클래스는 코드 내에 보이지 않는 것으로 봐서, 이런 용도에 사용 할 수 있는 package인 것 같습니다. 코드 상단에 import 된 부분을 보면, 첫번째로 import 된 package가 아마도 그 역할을 하는 것 같습니다.

 

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

 

일단, 이 정도로 코드 구조를 대략 파악 한 것으로 하겠습니다. 

 

 

 

잠깐 옛날 이야기를 좀 하자면,

Visual C++ 6.0이 한참 쓰이던 시절, 그 때 MFC는 정말 대단했습니다. "MS의 개가 되지 않겠다."는 쓸데없는 고집을 부리며 가능하면  MFC를 덜 쓰려고 노력하기도 했는데, 돌이켜보면 슬기로운 처신은 아니었던 것 같습니다. 보편적인 기술을 빨리 습득하여 시장과 사용자들이 원하는 것을 빠르고 완성도 높게 구현하는 것이 훨씬 지혜로운 방향이었을 것 같습니다. 그 'MS'의 Visual C++의 대표적인 프로젝트 템플릿 중 하나가 Document-View 구조의 템플릿이었습니다. 다이얼로그형 프로젝트도 있었고, Document-View 구조도, Single/Multi 두 가지 타입이 있었습니다. 

 

 저는 OpenGL 공부를 하면서 개발 환경을 이 기반으로 한 환경에서 공부를 하다보니, Single Document 템플릿에 OpenGL 설정하는 것이 거의 당연히 해야 할 과정과 같았습니다. 이 때, Document-View-MainFrame 이 구조에 대한 이해가 없는 상태로 그냥 막 개발을 했기 때문에, 그냥 다 View에 넣으면 되는데 왜 불편하게 Document로 나눠서 이렇게 개발하기 불편하게 해두었을까 싶은 생각을 많이했고, 실제로 Document 클래스를 사용하지 않고, View 클래스 내부에 필요한 데이터를 멤버로 추가하여 사용한 경우가 많았습니다.

 

 지나고 보니, 꼭 Documennt-View로 엄격히 나누는 것이 정답도 아닌 것 같고, UI와 데이터를 구분하면 좋은 점도 분명히 있다는 것도 이해하게 되었습니다.

 

 아직 Flutter의 철학에 대해서는 거의 모르고 있습니다만, Flutter가 화면을 구성하는 것을 주 목적으로 하는 도구라면 View와 같은 역할을 할 것이고, 데이터는 State라는 독립 된 구조로 처리하는 것을 지향하는 것 같습니다. 

 

 

Flutter의 내용을 보면, 마치 Android의 리소스 편집기를 XML 형태에서 JSON 형태로 변경한 것 같은 느낌이 듭니다. 거기에 로직과 연동 할 수 있는 부분을 조금 더 보완하고... 이런 이해가 꼭 맞다고 할 수는 없지만, 새로운 것을 배울 때는 자기가 기존에 알던 것에 투영시켜 이해하고, 거기서 차이가 나는 부분을 확인 해 나가면 좀 더 이해하는데 도움이 될 것 같습니다.

 

 다음 시간에는 화면을 좀 더 이쁘게 꾸며보는 순서이니, 여러 옵션값을 조정하면서 비교 해 볼 수 있겠네요. 

 골치는 덜 아프고 흥미를 느낄 수 있는 부분인 것 같습니다.

 

https://learn-and-give.tistory.com/46

[Flutter]. 06. Flutter tutorial on codelab(3)