Flutter 작동 방식, Hello World

새로운 언어인 Dart를 배울 때, 이 경우 기본으로 돌아가는 것이 좋은 출발점입니다.
그래서 오늘은 Flutter의 기본 Hello World 앱에 대한 최소 요구 사항을 살펴보겠습니다.

Flutter 작동 방식

시작하기 전에 Flutter가 실제로 어떻게 작동하는지 살펴보겠습니다.
핵심적인 세부 사항에 대해서는 다루지 않고 보다 높은 수준의 관점으로 살펴보겠습니다.

Flutter는 Ionic 또는 React 네이티브와 매우 유사한 Google 버전의 하이브리드 프레임워크입니다.

모바일 및 웹을 포함한 모든 프로젝트를 위한 단일 코드베이스. 꽤 멋진 것 같군요, 그렇죠!

큰 문제는 많은 사람들에게 새로운 언어인 Dart를 사용하고 있다는 것입니다.

Flutter는 다른 프레임워크에 비해 자체 렌더링 방법을 사용합니다.
또한 속도 측면에서 더 나은 성능을 발휘해야 합니다.

Flutter의 샘플 Hello World

기본 반례인 Flutter 앱을 볼 때 처음에는 상당히 혼란스러웠습니다. 일부 위젯과 확장된 코드베이스를 보여 주었고 무슨 일이 일어나고 있는지 전혀 알 수 없었습니다.

그래서 제가 만들 수 있는 가장 기본적인 앱으로 돌아가기로 했습니다. 일부 텍스트를 렌더링하는 데만 필요했습니다.

따라서 새 Flutter 앱을 시작하고 lib/main.dart 파일에서 전체 코드를 지웁니다.

먼저 flutter 패키지를 가져오는 것부터 시작하겠습니다. 이를 통해 기성품 위젯을 사용할 수 있습니다.

import 'package:flutter/material.dart';

Dart 언어에서는 항상 main 함수를 정의해야 합니다. 이것은 Dart 파일의 경우이며 Flutter 애플리케이션의 경우에도 마찬가지입니다.

기본적인 Dart 예제에서는 다음과 같이 할 수 있습니다.

void main() {
  print('Hello World 👋');
}

이 코드를 실행하면 빈 Flutter 앱이 표시되지만 콘솔에는 로그Hello World 👋가 표시됩니다.

Flutter에서는 이 기본 함수 안에 runApp 함수를 포함해야 합니다.
이 함수는 Flutter 앱을 실행합니다.

우리는 Hello World를 표시하는 이 함수runApp 안에 일부 콘텐츠를 갖고 싶습니다.

이를 위해 Flutter와 함께 제공되는 Center 위젯을 활용할 수 있습니다. 이 위젯 내에서 자식을 전달할 수 있습니다. 이 경우에는 텍스트를 포함하는 Text 위젯입니다.

void main() {
  runApp(
    Center(
      child: Text(
        'Hello World 👋',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

이제 flutter run 로 앱을 실행하면 첫 번째 Flutter 애플리케이션이 표시됩니다.



그러나 Flutter 스캐폴딩을 활용하여 좀 더 깔끔하게 만들 수 있습니다.

void main() async {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: MyApp(),
      ),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Hello World 👋',
        textDirection: TextDirection.ltr,
      ),
    );
  }
}

이 코드는 동일한 앱을 렌더링하지만 보시다시피 Flutter는 React에서 볼 수 있는 것과 매우 유사하게 위젯 기반입니다.

아이디어는 위젯에서 앱을 빌드한다는 것입니다. 이러한 위젯은 특정 상태 및 구성에 따라 보기가 어떻게 표시되어야 하는지를 설명합니다. 이러한 위젯의 상태가 변경되면 새 구성으로 다시 빌드됩니다.

저는 이 개념이 마음에 듭니다. 앱 디자인 측면에서 생각하고 애플리케이션 전체에 걸쳐 위젯을 확장해야 하기 때문입니다.

오늘은 Dart와 Flutter의 기본 사항을 배웠고 Hello World 애플리케이션을 만들었습니다.

내 GitHub 지점에도 업로드했습니다.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나