React Native에서 Flutter로 갈아타기 #1 - 문법? 차이?

React native는 Javascript, Flutter는 Dart를 기반으로 해. 그런데 사실 큰 차이점을 모르겠더라고 눈에 띄는 Asynchronous 부분부터 보자구. 우선 Javscript에서는 promise로 선언된 함수를 .then()과 함께 사용하잖아? 이런식으로 👇👇

const result = fetch("example.url").then(response => response.json()).then(jsonResult => jsonResult);

Promise는 fetch 안에 숨어있을거야 그러니까 then() 도 사용할 수 있는거고. 혹시나 도중에 error 처리를 하고 싶으면 .catch()를 붙여주면되고..

 

Dart도 거의 똑같아. 그런데 promise 대신 Future를 키워드로 사용해. ㅎㅎ 반환하는 형식 이름만 틀린거지. 동작은 같아.👇👇

/// Dart
import 'dart:convert';

import 'package:http/http.dart' as http;

class Example {
  Future<String> _getIPAddress() { //Future로 Async함수인 것을 선언.
    final url = Uri.https('httpbin.org', '/ip');
    return http.get(url).then((response) {
      String ip = jsonDecode(response.body)['origin'];
      return ip;
    });
  }
}

void main() {
  final example = Example();
  example
      ._getIPAddress()
      .then((ip) => print(ip))
      .catchError((error) => print(error));// Javascript에서는 .catch
}

에러 처리할 때고 양심에 쪼금 찔렸는지 ㅋㅋ .catch() 가 아니고 .catchError()라는 이름을 사용하지 ㅋㅋㅋㅋ

async와 await도 사용법이 완전 똑같음. 대신 위에서 설명한 것처럼 async로 선언하면 javascript는 promise를 반환하고 dart는 future를 반환. 이름만 다르고 용법은 완전 동일해. Dart는 타입을 강하게 제한한다는 점에서 typescript랑 비슷한 느낌이랄까? ㅋㅋ

 

음 그런데 Arrow function은 좀 사용법이 틀려. Javascript에서는 그냥 대수롭지 않게 사용했는데 Dart에서도 무심결 사용해보니 이상한 에러가 나오더라고.. -_-;

;를 넣으면 안된단다...

그래서 확인해보니 👇👇 single statement function을 위한 거라나 뭐라나. 그러니까 한줄밖에 못쓴다고 ㅎ 그러니까 react 할 때 처럼 arrow function 남발하면 안되겠지?

Dart arrow function is for a single statement

 

그리고 import 시키는 부분이 좀 틀려. 이건 dart가 쫌 나쁨 ㅋㅋㅋ 둘다 import 키워드를 사용해 그런데 javascript는 뭘 불러올지 명확하지. 그런데 dart는 그냥 dart파일만 import해. 뭐랄까 그냥 c언어에서 printf쓰려면 stdio include 시켜야 하는 것처럼.. 뭔가 불친절하지. 그래서 dart 파일을 불러오더라도 안에 어떤 클래스가 있는지 미리 알아야 해... 아니면 뭐 파일 까봐야지 ㅋㅋㅋ

// React Native
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

// dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:my_widgets/my_widgets.dart';

물론 Javascript도 뭘 import 시킬지는 알아야 하지만 나중에 코드 볼때 이게 무슨 패키지에서 튀어나온 패키지인지 헤깔릴 수 있을 듯. 암튼 아이 불편해 ㅋ

뭐 문법 관련된 건 이 정도만 알아도 dart 하는데에는 크게 문제가 없을 거야. 다음에는 javascript와 dart의 문법차이가 아닌 React와 flutter의 일반적?인 차이를 알아보자고 ㅋㅋㅋ 할거 음청 많어 ㅋㅋ 안녕!