자, 이제 그럼 main.dart를 하나하나 뜯어보는 시간을 가져보겠습니다.
뭔가 고쳐보고 만들기 위해서는, 최초에 만들어졌을 때 어떤 구조를 가지는지 이해하는 것도 중요하다고 생각합니다.
기본 프레임
main.dart의 구조는 다음 세 부분으로 구분할 수 있습니다.
모든 다트 프로그램은, 대부분의 C-like 프로그램과 마찬가지로 main()으로 시작합니다.
그리고, 내부에서 runApp()이라고 하는 동작을 하는데요. 이것이 뭔가 제가 말씀드린 액션 역할을 하는 것으로 보입니다.
딱 봐도 앱(App)을 실행시키라는(run) 느낌이죠?
그리고 그 앱이라는 타겟은, 밑에서 구현한 MainApp이라고 하는 클래스입니다.
이전에 엔트리를 말씀드릴 때 오브젝트 말씀을 드렸었죠?
다트에서 그 오브젝트에 해당하는 것이 여기 나오는 클래스(class)입니다.
그리고, MainApp 클래스 안에 보면, build()라는 이름의 함수가 있습니다.
이것의 기능은, 바로 플러터에서 기본 단위로 사용하는 오브젝트인 위젯(widget)을 화면에 출력하라는 의미로 볼 수 있습니다.
플러터가 위젯을 구성하는 방법
위에서 build() 함수를 통해 위젯을 만든다고 했으니, 그러면 실제로 위젯이 어떻게 생겼는지 한 번 보도록 합시다.
일반적으로 함수 안에 return이라고 하는 말이 붙어 있으면, 뒷 내용의 것을 함수 호출 결과로 돌려보낸다 라는 뜻입니다.
따라서 저 뒤의 내용이 실제 위젯의 생긴 모양이다라고 이해하면 맞습니다.
뒤에 코딩된 내용을 도식화하면 다음과 같습니다.
플러터의 UI 구성은, 이 위젯들을 겹치거나 나란히 늘어놓는 형태로 배치하면서 이루어집니다.
사진과 글이 보이는 화면이라던가, 아이콘과 텍스트, 버튼이 줄지어 있는 화면 같은 것들도,
기본적으로 이런 위젯들을 하나하나 겹치거나 붙이고, 늘어놓는 형상으로 만들도록 되어 있습니다.
맨 바깥의 MaterialApp은, 구글의 material design UI를 이용하기 위해 약간 관용적으로 사용하는 위젯입니다.
모든 플러터 앱들의 UI를 일관되게 가져가기 위해서도 필요하기 때문에 특수한 경우가 아니면 대부분 사용합니다.
하지만, 이건 그냥 가져다 쓸 수는 없고요. 외부 패키지를 연결해서 사용해야 합니다.
그것 때문에 소스 맨 위쪽의 import~ 로 시작하는 부분에서 material.dart를 가져다 쓴다고 선언한 것입니다.
일단 저 위젯 안에는, scaffold라는 이름의 독특한 위젯이 있습니다.
scaffold라고 하는 단어는 '발판, 골격' 이라는 뜻이 있는데요.
플러터 앱의 화면에 보이는 모든 위젯은 바로 이 위젯부터 그려지기 시작해야 합니다. 가장 기본적인 위젯이죠.
아까 밖에 있었던 MaterialApp 위젯은 필수가 아니었지만, 이 scaffold 위젯은 필수입니다.
그 안에는 center와 text 가 있는데, 이건 짐작할 수 있는 내용 같습니다.
일단 text 위젯은 말 그대로, 안에 있는 'Hello world'라는 문자열을 출력하라는 의미로 생각할 수 있겠죠?
그리고 center는 잘은 몰라도, 뭔가 중앙정렬 같은 느낌을 줍니다.
그러니까 저 두 가지를 조합하면,
'Hello world' 문자열을 화면 중앙에 출력해라.
는 의미가 되는 것이죠.
그래서 앱을 실행하면 지난 포스트에서 본 것처럼 화면 정중앙에 문자열을 출력한 것입니다.
내용이 직관적이죠?
다음 이야기
플러터는 뭔가 수많은 위젯과 위젯들을 모아서 화면을 구성하고,
그것을 화면에 그리려면 build() 함수 안에다 그려야 하며,
이것을 호출하기 위해서는 runApp이라는 액션을 호출하는 것으로 시작하게 됩니다.
그러니, build() 함수 안에 여러 가지 위젯을 조합해서 겹치거나 나열하는 것으로
우리가 원하는 다양한 화면을 만들 수 있는 것입니다.
다음 포스팅에서는 이 부분의 수정으로 화면을 어떻게 바꾸고 구현하는지 알아보겠습니다.
P.S. 오블완은 오늘로 끝이지만, 글은 당분간 진행해보려고 합니다.
아직 할 이야기가 적지 않아서요. 그런데 매일 할 수 있을지는 잘 모르겠습니다.
