Flutter - 6.5 waitForWebToons

(6.4는 Recap 이었다.)

static을 이용해서 getTodaysToons()에 들어가는 공통적인 인수들을 로드 할 때 빠르게 하도록 한다.
./services/api_services.dart

  static const String baseUrl = "https://webtoon-crawler.nomadcoders.workers.dev";

  static const String today = "today";

  static Future<List<WebtoonModel>> getTodaysToons() async {

이렇게 세 부분에서 static을 선언해준다.

static이 뭘까?
참고 : https://velog.io/@tygerhwang/FlutterDart-Singleton-Static-Class-%EC%B0%A8%EC%9D%B4%EC%A0%90%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90

🔎 [Flutter&Dart] Singleton ? Static ? Class ? .. 차이점을 Instance 관점에서 알아보자

Static으로 선언된 것은 프로그래밍의 실행부터 종료까지 메모리가 고정되어 있고, 공유된다.
아예 일부를 계속 점유한다. 그리고, 공유되기 때문에, 직접적으로 접근이 가능하다.
class를 선언하지 않더라도 실행이 가능하다는 의미이다.
그래서, 잘 보면 home_screen.dart에서 클래스를 선언하지 않고, 그냥 ApiService라는 이름의 클래스 안에 있는 함수 getTodaysToons()를 그냥 실행한다.

이제 ./screens/home_screen.dart를 수정해보자.
우리는 홈 스크린에서 이 데이터를 표시해야 하기 때문이다.

class _HomeScreenState extends State<HomeScreen> {

  List<WebtoonModel> webtoons = [];

  bool isLoading = true;

  // http 요청을 기다리는 함수.

  void waitForWebToons() async {

    webtoons = await ApiService.getTodaysToons();

    isLoading = false;

    // refresh

    setState(() {});

  }

  @override

  void initState() {

    // TODO: implement initState

    super.initState();

    waitForWebToons();

  }

'WebtoonModel' 의 인스턴스를 webtoons의 리스트 안으로 가져온다.
전부 가져오면 isLoading을 false로 만들어서 로딩이 끝났음을 알리면서 refresh를 해준다.

왜 여기에 setState가 꼭 필요할까?
initState에 웹툰을 가져오라는 함수가 있는데?
이것은 Flutter의 흐름과, async의 흐름에 대해서 확인 해 볼 필요가 있다.
해당 내용은 nomadcoders 강의 댓글 sunkist5691님이 작성하신 것을 내가 이해한 대로 다시 작성한 것이다.

Flutter 전체적인 흐름	waitForWebToons 함수
super.initState()
waitForWebToons();
	webtoons = await ApiService.getTodaysToons();
build
	데이터 도착
	isLoading = false;
	setState(() {});
build

핵심은 "initState()는 async 함수가 아니다"라는 것이다.
그래서 함수 waitForWebToons를 실행하고 바로 build를 먼저 해버린다.
하지만, 함수 waitForWebToons는 async 함수이기 때문에 ApiService.getTodaysToons()함수가 끝날 때 까지 기다린다.
(물론, getTodaysToons도 async 함수이다.)
그 후 데이터가 도착하고 isLoading이 false로 변경된다.
그리고 setState가 없다면, 화면을 refresh하지 않기 때문에 화면에 표시되지 않는다.
따라서, setState가 있어야 다시 build를 해서 refresh하도록 한다.

기억하자. async함수를 통해서 데이터를 받으면 setState로 refresh해줘야 한다는 사실을!