기초적인 방법
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으로 해결을 볼 수 있다.