Sanyo의 개발 블로그

Future란?

지금은 없지만 미래에 데이터가 담길 그릇.

import 'dart:async';

Future<int> futureNumber() {
  // 3초 후 100이 상자에서 나옵니다
  return Future<int>.delayed(Duration(seconds: 3), () {
    return 100;
  });
}

void main() {
  // future 라는 변수에서 미래에(3초 후에) int가 나올 것입니다
  Future<int> future = futureNumber();

  future.then((val) {
    // int가 나오면 해당 값을 출력
    print('val: $val');
  }).catchError((error) {
    // error가 해당 에러를 출력
    print('error: $error');
  });

  print('기다리는 중');
}

https://velog.io/@jintak0401/FlutterDart-%EC%97%90%EC%84%9C%EC%9D%98-Future-asyncawait

위 코드는 위 블로그를 참고했다.

then 함수를 통해 미래에 값이 들어왔을 때 어떻게 행동할 것인지를 정의한다. then 내부에 함수가 들어있는데,

val에 값이 들어가서 100이 출력된다.

다음은 동기, 비동기에 대해 설명하겠다.

• 동기는 모든 동작을 차례대로 완료 후 수행하는 것.
• 비동기는 동작이 완료되지 않아도 다음 동작을 수행하는 것.

Future는 비동기를 위해 존재한다.

다음으로 에러코드를 살펴보겠다.

import 'dart:async';

Future<int> futureNumber() {
  // 3초 후 Error!가 상자에서 나옵니다
  return Future<int>.delayed(Duration(seconds: 3), () {
    throw 'Error!';
  });
}

void main() {
  // future 라는 변수에서 미래에(3초 후에) error가 나올 것입니다
  Future<int> future = futureNumber();

  future.then((val) {
    // int가 나오면 해당 값을 출력
    print('val: $val');
  }).catchError((error) {
    // error가 해당 에러를 출력
    print('error: $error');
  });

  print('기다리는 중');
}

Future<int> 상자에 int가 아닌 다른 값이 들어가면 error가 발생, catchError함수에 걸리게 된다.

따라서 위 코드는 error가 발생한다.

async, await란?

이 두 녀석 또한 비동기 처리를 위한 것이다.

일단 이 녀석들에게는 2가지 규칙이 존재한다.

1. await 키워드를 사용한 함수는 무조건 async 함수이어야 한다.
2. async 함수는 무조건 Future를 반환해야 한다.

1번 규칙은 그냥 함수를 정의할 때 async로 정의해주면 되는건데, 2번 규칙은 Future를 무조건 반환해야

한다는 점에서 좀 의아하다.

Future<ProcessedData> createDate() async {
  final id = await _loadFromDisk();
  final data = await _fetchNetworkData(id);
  return ProcessedData(data);
}

async / await을 사용하면 위 같이 직관적으로 비동기를 다룰 수 있게 된다.

State는 앱에서 사용되는 data를 의미한다.

플러터에는 2개의 state가 있다.

• App state
• Widget state

1. App stateApp state는 앱 전반에 걸쳐 사용되는 data이다. App state를 변경해서 전반적으로 데이터 수정을 할 수 있을 것이다.
2. Widget stateWidget state는 이름에서 알 수 있듯이 한 Widget 내에서 사용하는 데이터를 의미한다. 특정 위젯 내에서만 필요하고 다른 위젯에는 필요하지 않을 때 사용한다.

Flutter를 처음 배울 때도 이 state를 접하게 될 것이다. 바로 StatelessWidget과  StatefulWidget을 본 적이 있을 것이다.

<StatelessWidget>

StatelessWidget은 state가 없는 widget이다. data가 아예 없다는 의미는 아니고,

변경할 data가 없다고 이해하면 편하다.

<StatefulWidget>

State가 존재하는 Widget이다. 내부 데이터가 변경되면 그를 바탕으로 화면을 다시 그릴 수 있다.

먼저 StatelessWidget을 살펴보자.

class TestStatelessWidget extends StatelessWidget{

  int number = 0;
  @override
  Widget build(BuildContext context) {
    throw UnimplementedError();
  }
}

여기서 number의 값이 변할 수 있기에 오류까지는 아니지만 경고가 표시된다.

어처피 number의 값이 변한다고 해도 StatelessWidget에서는 변경된 데이터를 반영하지 않기에,

소용없기 때문이다.

경고를 없애려면

final int number = 0;

이런 식으로 정의해야 한다.

다음으로 StatefulWidget을 살펴보자.

StatefulWidget은 2개의 클래스로 이루어져 있다.

바뀌는 부분과 바뀌지 않는 부분.

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  @override
  Widget build(BuildContext context){
    return Container(
      
    );
  }
}

위 코드를 살펴보자.

변화가 생기면 _TestState에서 다시 Test로 올려보내고, Test가 새로 받은 위젯을 보여준다.

createState를 사용해서 서로 연결하고, _TestState는 State를 통해 연결한다.

https://www.youtube.com/playlist?list=PLzMcBGfZo4-knQWGK2IC49Q_5AnQrFpzv

이 유튜브 강의 영상을 참고했다.

강의대로 플러터를 설치했으나 문제가 발생했었다. 에뮬레이터가 작동하지 않았는데, flutter doctor 커멘드를 사용해서 문제를 찾고, 필요한 플러그인을 설치했으나 작동하지 않았다.

위 강의에서는 android studio에 있는 에뮬레이터만 사용하고 vscode 환경에서 앱을 작동시킨다. 

한참을 찾아보다 가상화가 켜져 있어야 한다는 것을 깨달았다.

CPU 탭에 보면 가상화 라는 것이 보일텐데 이게 '사용'으로 되어 있어야만 작동한다.

처음에는 저게 꺼져 있어서 bios에 접근하여 켜두었다.

안 되는 분들은 꼭 확인해보길 바란다.

가상화를 켜고 처음 앱을 실행해 보았다.