00007. 📌 [APP-00001] 실시간 미세먼지 & 날씨 알림 앱 #6 – 새로고침 버튼 & 자동 데이터 갱신 구현하기

안녕하세요! 실시간 미세먼지 & 날씨 알림 앱 개발 시리즈 여섯 번째 글입니다.
지금까지 우리는 API를 연동하고, 받아온 날씨 및 미세먼지 데이터를 UI에 예쁘게 표시하는 것까지 구현했어요.

이번 글에서는 앱을 더 실용적으로 만들기 위한 기능인 데이터 새로고침과 자동 갱신 기능을 구현해보겠습니다.

---

🎯 이번 목표

• 사용자 인터랙션을 위한 ‘새로고침’ 버튼 구현
• 일정 시간마다 자동으로 데이터 다시 받아오기
• setState(), Timer.periodic() 사용해보기

---

🔄 1. 새로고침 버튼 추가하기

🔹 버튼 UI 추가

Scaffold 하단에 FloatingActionButton을 추가해서 새로고침 기능을 넣어보겠습니다.

floatingActionButton: FloatingActionButton(
  onPressed: _refreshData,
  child: Icon(Icons.refresh),
  tooltip: '새로고침',
),

🔹 새로고침 함수

void _refreshData() {
  setState(() {
    _futureData = Future.wait([getWeather(), getDust()]);
  });
}

💡 _futureData는 FutureBuilder에서 사용되는 Future 객체입니다.

---

⏱️ 2. 일정 주기마다 자동 갱신하기

앱이 실행된 뒤 일정 시간마다 데이터를 자동으로 갱신하도록 Timer.periodic을 사용해봅니다.

🔹 타이머 설정

@override
void initState() {
  super.initState();

  _futureData = Future.wait([getWeather(), getDust()]);

  _timer = Timer.periodic(Duration(minutes: 5), (timer) {
    _refreshData();
  });
}

🔹 타이머 해제

StatefulWidget에서는 타이머를 해제하지 않으면 앱이 종료되어도 백그라운드에서 계속 실행될 수 있습니다. 꼭 dispose()에서 타이머를 취소해주세요.

@override
void dispose() {
  _timer?.cancel();
  super.dispose();
}

---

🧪 3. 전체 코드 흐름 요약

late Future<List<Object>> _futureData;
Timer? _timer;

@override
void initState() {
  super.initState();
  _futureData = Future.wait([getWeather(), getDust()]);
  _timer = Timer.periodic(Duration(minutes: 5), (timer) {
    _refreshData();
  });
}

void _refreshData() {
  setState(() {
    _futureData = Future.wait([getWeather(), getDust()]);
  });
}

@override
void dispose() {
  _timer?.cancel();
  super.dispose();
}

FutureBuilder는 이전 포스팅(#5)에서 작성한 부분을 그대로 사용하시면 됩니다!

---

✅ 마무리

이제 사용자가 수동으로 새로고침 버튼을 누르거나, 일정 시간마다 자동으로 데이터를 새로 받아오도록 앱을 개선했습니다.

실제 사용성 측면에서 이 기능은 매우 중요하며, 향후 푸시 알림 같은 기능과도 자연스럽게 연결될 수 있어요.

---

📌 다음 예고

[APP-00001] #7 – 날씨 & 미세먼지 상태에 따른 사용자 푸시 알림 기능 추가하기 🔔

다음 글에서는 특정 조건(예: 미세먼지 나쁨 이상)일 때 사용자에게 알림을 보내는 기능을 구현해볼 거예요. 그럼 다음 포스팅에서 만나요! 🌥️