[Flutter] Flutter개발일지 - FutureBuilder사용 시 미친듯이 화면 재로딩되는 문제

 

 

swagger

현재 학교 프로젝트로 플러터와 스프링부트를 이용하여 개발을 진행하고 있다. 

지금은 백엔드 api를 미리 완성하여 서버를 띄워놓은 상태로 http통신을 하면서 flutter 개발을 하는 중이다!

플러터로 REST통신을 하는 건 처음이여서 챗지피티와 구글링을 열심히 사용하여 코드를 짰다. 플러터로 restapi통신을 하는 방법은 크게 3가지였다.

 

1. FutureBuilder로 값을 받아서 위젯을 빌드해주기

2. initState()에서 restapi통신을 하여 값을 받아오는 함수를 호출하고 class변수에 담아 화면에 뿌리기

3. api통신을 하여 받을 데이터를 class로 정의하여 json파싱해주기(Factory를 사용하였다)

 

변수를 사용하기도 조금 귀찮고, 위젯을 띄울 때 http통신을 하여 값을 받지 않으면 아예 위젯 빌드도 안되게 만들고 싶어서 FutureBuilder를 사용하는 방법을 애용했던 것 같다.

그런데.. 서버 로그를 보니 조금 이상했다.

 

이게 뭐지?

엄청 빠른 속도로 로그가 쌓이는 게 아닌가....!!!!

안그래도 지금 서버비가 6천원을 넘은 상황인데 이러다가 4만원을 찍을 것 같았다. 

flutter코드를 살펴보니까 FutureBuilder가 원인이었다. build하면 그대로 있으면 될것을 계속 화면을 재로딩하고 있었다;;;

 

이걸 해결하려면 initState()와 class필드를 사용하는 방법을 쓰거나, future함수의 중복 호출을 방지하는 AsyncMemoizer라는 것을 사용하면 된다고 하였다. 한 코드에 AsyncMemoizer를 사용해봤는데 똑같이 재로딩을 미친듯이 하길래 빠르게 포기하고 initState() 방법을 사용하였다. (빠르게 올라오는 로그가 너무 무서웠다)

 

돌아가는 원리를 간단하게 보면

 

class _ManagerSecondAllimPageState extends State<ManagerSecondAllimPage> {
  late Map<String, dynamic> _noticeDetail = Map<String, dynamic>();

  void initState() {
    getNoticeDetail();
  }
}

• initState에 백엔드와 통신하는 함수를 호출해준다.

 

Future<void> getNoticeDetail() async {
    http.Response response = await http.get(
      Uri.parse(backendUrl+ 'notices/' + _noticeId.toString()),
      headers: <String, String>{
        'Content-Type': 'application/json',
        'Accept-Charset': 'utf-8'
      }
    );

    if (response.statusCode != 200) {
        throw Exception('POST request failed');
    }

    var data =  utf8.decode(response.bodyBytes);
    dynamic decodedJson = json.decode(data);

    Map<String, dynamic> parsedJson = Map<String, dynamic>.from(decodedJson);
    _noticeDetail = parsedJson;
    setState(() {});
}

• 비동기 함수를 하나 구현해준다
• 백엔드에 get요청을 보내 데이터를 받아온 후 jsonDecoding한 값을 아까 선언한 class변수에 넣어준다.
• setState로 화면을 한 번 재로딩 해준다

 

 

이 방법을 사용하니 서버가 조금 잠잠해졌다.

작년 flutter 프로젝트를 할 때 비동기 처리에 FutureBuilder가 큰 역할을 해주어 정말 고마운 존재였는데, 이렇게 미친듯이 재로딩을 하는 친구인 줄은 몰랐다. 물론 잘 사용하면 재로딩을 안할 것 같은데 아직은 플러터를 제대로 공부하지 않아 돌아가는 원리를 잘 모르는 것 같다. 일단 FutureBuilder를 다 삭제하여 급한 불은 껐지만, 나중에 FutureBuilder를 사용해야할 일이 생길 것 같아 조금 더 찾아보고 공부해보려고 한다. 

 

 

 

 

 

참고한 자료

https://landroid.tistory.com/16