기초적인 방법

statefulwidget로 변경 - 데이터가 들어갈 리스트 공간 마련 - asnyc 함수 만듬 - initState에 asnyc함수 넣기

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

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

  // HTTP요청을 기다려야 하기 때문에 비동기 함수
  // getTodayToons가 요청을 기다리기 때문에
  void waitForWebtoons() async {
    webtoons = await ApiService.getTodayToons();
    isLoading = false;
    setState(() {});
  }

  // initState는 라이프사이클중 단 한번만 실행된다
  // 그래서 API를 호출할 때 사용
  @override
  void initState() {
    waitForWebtoons();
  }
  • state는 많이 쓰이지 않기에 비추
  • 쓸모 없는 과정이 많음
  • stateful보다 stateless가 엔진효율 측면에서 더 좋음



심화된 방법

  class HomeScreen extends StatelessWidget {
  HomeScreen({super.key});

  Future<List<WebtoonModel>> webtoons = ApiService.getTodayToons();


  Widget build(BuildContext context) {
  .
  .
  .

  body: FutureBuilder(
        future: webtoons, // 기다릴 값
        // snapshot : future의 상태
        // builder function : context, snapshot 전달받음
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return const Text('Its Data!!');
          }
          return const Text('Loading...');
        },
      ),

  • stateless로 해결할 수 있어서 효율이 좋음
  • widget으로 해결을 볼 수 있다.