fetch하여 state에 넣기

class _HomeScreenState extends State<HomeScreen> {
  List<WebtoonModel> webtoons = [];
  bool isLoading = true;

  void waitForWebToons() async {
    webtoons = await ApiService.getTodaysToons();
    isLoading = false;
    setState(() {});
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    waitForWebToons();
  }

  @override
  Widget build(BuildContext context) {
    print(webtoons);
    print(isLoading);
    return Scaffold(

코드의 일부

순서를 보면
1. initState에서 데이터를 받아오는 함수(waitForWebToons호출)
initState는 build 메소드가 호출이 되기 전에 한번 호출됨
2. 받아오기가 끝나면 데이터를 webtoons에 넣음
3. isLoading = false;
4. setState()로 화면 새로고침(build)

처음에는 빈 배열과 true였지만(api 로딩 중) 값이 들어오고 나서는 값이 들어온 배열과 false를 출력함

정리

initState의 waitForWebToons함수는 비동기로 동작함
따라서 waitForWebToons가 완료될 때까지 기다리지 않고 build()함수를 실행함
= 로딩하는 동안 print(~~)가 동작하면서 빈 배열과 true출력

apiservice가 값을 가져와서 반환하면 그 때부터 밑의 코드 isLoading=false;가 동작함. 그래서 위 사진같은 결과가 나오게 됨

1. initState
2. waitForWebToons
3. ApiService.getTodayToons(실행중)
4. build
5. ApiService.getTodayToons(완료)
6. isLoading = false
7. setState() > build

다음 포스트에서는 State를 사용하지 않는 방법을 보자.
State는 가능하면 사용하지 않는게 좋다.