Flutter에서 FutureBuilder를 최적화하는 방법!

1장: Flutter와 FutureBuilder 소개

Flutter는 굉장히 유명한 모바일 애플리케이션 개발 프레임워크로, 안드로이드와 iOS로 개발된 앱을 빠른 시간 안에 높은 품질로 제작할 수 있게 도와줍니다. 본 글에서는 Flutter에서 사용되는 FutureBuilder 위젯의 불필요한 rebuild를 방지하는 방법에 초점을 맞추어 설명해 드리겠습니다.

FutureBuilder는 Flutter 위젯 중 하나로, Future 객체를 사용하여 비동기 작업을 처리할 때 유용한 도구입니다. 그러나 이렇게 효과적인 FutureBuilder를 사용하면서 가끔 불필요한 rebuild의 발생으로 앱의 성능이 저하되는 경우가 있습니다.

이 글에서는 FutureBuilder 위젯의 불필요한 rebuild를 방지하는 방법을 이해하고자 합니다. 다음의 장들을 통해 실제 예시와 함께 쉽게 설명해 드리겠습니다.

- 2장: FutureBuilder의 불필요한 rebuild가 발생하는 이유
- 3장: FutureBuilder의 불필요한 rebuild를 방지하는 방법
- 4장: 실제 예시와 함께 불필요한 rebuild를 방지하는 방법 적용하기

2장: FutureBuilder의 불필요한 rebuild가 발생하는 이유

Flutter의 FutureBuilder 위젯을 사용하면서 불필요한 rebuild가 발생하는 이유는 대개 다음과 같습니다.

1. Future 객체가 빌드 메서드 내부에서 생성되는 경우

빌드 메서드 내부에서 Future 객체를 생성하면 FutureBuilder가 화면을 다시 그릴 때마다 Future 객체를 새로 생성합니다. 이로 인해 불필요한 rebuild가 발생하여 앱의 성능이 저하됩니다.

FutureBuilder(
  future: getData(),
  ...
)

2. FutureBuilder의 상태가 변경되지 않은 채로 계속 재생성될 때

Flutter 앱이 다시 그려질 때마다 FutureBuilder의 상태가 변경되지 않은 경우에도 불필요한 rebuild가 발생할 수 있습니다. 상태가 변경되지 않아도 FutureBuilder를 계속해서 다시 생성하는 것은 앱의 성능에 영향을 줍니다.

3. StatefulWidget의 상태가 업데이트되지 않는 경우

FutureBuilder가 StatefulWidget에서 사용될 때 상태가 업데이트되지 않으면 빌드 메서드가 다시 실행됩니다. 이로 인해 FutureBuilder가 불필요하게 다시 생성되어 앱의 성능이 떨어질 수 있습니다.

이러한 불필요한 rebuild의 발생 원인을 이해하고 난 후에야 그에 맞는 해결책을 찾을 수 있습니다. 다음 장에서는 이러한 문제들을 해결할 수 있는 방법을 알아보도록 하겠습니다.

3장: FutureBuilder의 불필요한 rebuild를 방지하는 방법

불필요한 rebuild를 방지하기 위해, 각 원인에 맞는 해결책을 적용해 볼 수 있습니다.

1. Future 객체를 빌드 메서드 외부에 생성

빌드 메서드 내부에서 생성되는 Future 객체의 문제를 해결하기 위해, Future 객체를 빌드 메서드 외부에 생성하거나 StatefulWidget의 initState 메서드에서 설정할 수 있습니다.

class MyPage extends StatefulWidget {
  ...
}

class _MyPageState extends State<MyPage> {
  Future _dataFuture;

  @override
  void initState() {
    super.initState();
    _dataFuture = getData();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _dataFuture,
      ...
    );
  }
}

2. 상태 변경 시에만 FutureBuilder를 다시 그리기

상태가 변경되지 않았을 때 불필요한 다시 그리기를 방지하려면, setState()를 사용하여 상태가 변경될 때만 화면에 변화된 결과를 반영시키세요.

3. 업데이트된 상태를 반영하기 위해 StatefulWidget을 활용

StatefulWidget의 상태 업데이트를 활용하면 불필요한 다시 그리기를 방지할 수 있습니다. 이는 상태가 변화할 때만 FutureBuilder의 결과를 화면에 적용하게 된다는 뜻입니다.

위의 해결책들을 적절히 적용하면, FutureBuilder의 불필요한 rebuild를 효과적으로 방지할 수 있습니다. 다음 장에서는 실제 예시를 통해 이러한 해결책을 어떻게 적용하는지 자세히 살펴보도록 하겠습니다.

4장: 실제 예시와 함께 불필요한 rebuild를 방지하는 방법 적용하기

본 장에서는 간단한 예시를 통해 불필요한 rebuild를 방지하는 방법을 실제로 적용해볼 것입니다.

예시: 포스트 목록 불러오기

다음과 같은 상황에서 Flutter를 사용하여 인터넷에서 포스트 목록을 불러오는 앱을 구축하고자 합니다.

데이터를 가져오는 비동기 작업이 필요하며, 가져온 데이터를 화면에 출력해야 합니다. 이때 FutureBuilder를 사용해 불필요한 rebuild를 방지하는 방법을 적용하겠습니다.

1. StatefulWidget 사용 및 Future 객체 생성 위치 변경

먼저 StatefulWidget을 생성한 뒤, initState 메서드 내에서 앱의 상태를 초기화합니다. 이후, 빌드 메서드 내부가 아닌 initState 메서드에서 Future 객체를 생성합니다.

class MyApp extends StatefulWidget {
  ...
}

class _MyAppState extends State<MyApp> {
  Future _postsFuture;

  @override
  void initState() {
    super.initState();
    _postsFuture = fetchPosts();
  }

  @override
  Widget build(BuildContext context) {
    ...
  }
}

2. FutureBuilder 적절히 적용하기

그 다음, FutureBuilder를 사용하여 fetchPosts() 함수로부터 반환된 비동기 데이터를 처리합니다. 방금 생성한 _postsFuture를 사용하여 불필요한 다시 그리기를 줄입니다.

FutureBuilder(
  future: _postsFuture,
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator();
    } else if (snapshot.hasError) {
      return Text("Error: <${snapshot.error}>");
    } else {
      return ListView.builder(
        itemCount: snapshot.data.length,
        itemBuilder: (context, index) {
          return ListTile(title: Text(snapshot.data[index].title));
        },
      );
    }
  },
)

이러한 수정을 통해 불필요한 rebuild 현상을 효과적으로 방지할 수 있습니다. 이제 앱에서의 성능 저하 없이 비동기 작업을 수행할 수 있게 되었습니다.

결론적으로, 불필요한 FutureBuilder의 rebuild를 방지하려면 핵심 원인을 파악한 후 알맞은 해결책을 적용해야 합니다. 이를 통해 앱의 성능을 유지할 수 있으며, Flutter로 더 빠르고 효율적인 앱을 개발할 수 있게 됩니다.