Flutter 소개 (나는 왜 Flutter를 하는가)

나는 기계공학 전공에 학부생 시절 접해본 언어라고는 C언어, 매트랩, 파이썬이 전부였다. 이마저도 발만 담궈 본 느낌이고, 졸업 후 개발자를 꿈꾸면서 첫 개발 언어를 선택하는 시점에서 Flutter를 만났다.

🚀 플러터 Flutter 소개

Flutter가 개발 언어는 아니다.
단일 소스 코드로 여러가지 플랫폼(iOS, 안드로이드, 웹, Desktop앱)에서 모두 구동 가능한 UI 프레임워크다.

프레임워크(Framework)
Frame(틀) + Work(일하다) = "작업을 위해 일정하게 짜여진 틀"

레고처럼 정해진 요소들과 룰을 통해 다양한 결과물을 만들어 낼 수 있는 것!

플러터는 2017년 5월 구글 Google 에서 출시된 크로스 플랫폼 UI 프레임워크로, 사용하는 언어 역시 구글에서 만든 Dart 언어를 사용한다.

구글의 차세대 OS 퓨시아의 인터페이스, 애플리케이션은 Flutter를 사용합니다. 퓨시아가 이미 안정화된 안드로이드 시장을 대체할 수 있을지는 여전히 의문이다.

🤖 Flutter VS React Native

팀에서 앱 개발을 논의하면서 앱 개발 인원이 1명 뿐이었기 때문에 선택지가 넓지 않았다. 안드로이드, iOS 네이티브는 과감히 포기하고 크로스플랫폼 개발을 선택했다.

플러터와 리액트 네이티브 중 어떤 것을 선택하느냐 였는데, 그 당시 플러터를 선택한 이유는 간단했다.

1. Dart, JavaScript 모두 처음 접하기 때문에 어떤 것을 해도 상관없었다.
2. RN이 대세였지만, Flutter의 무서운 성장세
3. Google > Facebook

당시 두 프레임워크를 비교했을 때 본 자료가 생각나 그대로 가져왔다.

React Native 구조

Android는 Kotlin과 Java, iOS는 Objective-C와 Swift로 개발하는 것이 일반적이다.

네이티브 성능이 가장 좋지만, 그 만큼 개발자도 더 필요하고 개발/유지 비용이 두 배로 든다. 이를 해결하기 위해 웹앱(Web App)이 등장했다.
웹 화면을 그리고, 웹 기술로 필요한 기능 등을 구현하고 웹 브라우저를 앱으로 래핑하는 것이다.

하지만 웹 브라우저의 성능이 곧 앱의 성능이기 때문에 한계가 명확했고, 이를 보완하기 위해 페이스북에서 만든 것이 React Native이다.

자바스크립트로 코드를 짜고 브릿지를 통해 네이티브와 통신하여 앱이 작동한다.

예를 들어, 사용자가 버튼을 누르면 Native Side에서 브릿지를 통해 JS Side로 해당 이벤트를 전송하고, JS Side에서 callback 함수가 실행되고 다시 브릿지를 통해 변경 사항을 전달한다. Native Side에서 다시 UI를 렌더링 한다.

문제는 이러한 작업이 몰리면 브릿지에서 성능 병목이 발생한다. 어떻게 처리해주냐에 따라 성능 저하를 줄일 수 있겠지만, 결국 개발자의 몫이다.

Flutter 구조

Flutter는 브릿지가 없다.
Dart 컴파일러를 통해 네이티브 코드로 앱이 구동되며 자체적인 Skia 엔진을 통해 UI를 렌더링한다.

디바이스에 상관없이 동일한 UI를 그릴 수 있는 이유다. 플랫폼의 UI 컴포넌트를 사용하지 않고 자체적으로 기기에 상관없이 동일한 UI를 그린다.

🧨 Flutter에서 화면을 만드는 법

Flutter = Widget
플러터 앱에서 화면 상에 보이는 것은 전부 위젯이다. 하나도 빠짐없이!

Flutter 공식 위젯 모음 사이트

위젯들이 계층구조로 위젯 트리를 구성하고 있다.
위젯들을 가로로 나열하려면 아래와 같이 작성한다.

Row(children: [Widget1, Widget2, Widget3, ...])

Row도 위젯이다.

Flutter의 Widget은 기본적으로 immutable이다.
위젯 내에 데이터가 바뀌어서 변경해야 한다면 위젯을 처음부터 다시 그린다.

Widget이 immutable하다고 하면 의문점이 생긴다.

🤔 Stateful Widget도 immutable한가요?
네, immutable 입니다.

위젯은 모두 immutable이다. 하지만 변경 가능한 위젯이 필요하기 때문에 immutable한 위젯에 State라는 새로운 클래스를 만들어서 변경 가능하도록 만들어 준것이 Stateful Widget이다.

class MyHomePage extends StatefulWidget {
  // Widget은 Immutable!! const!
  const MyHomePage({Key? key}) : super(key: key);
  
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

// State 클래스를 통해 변경 가능하다.
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold();
  }

위젯이 변경될 때 마다 새로운 Widget 인스턴스를 생성하지 않고 변할 때 build method를 통해 빌드만 새로하면서 인스턴스를 재사용한다.