[UMC 블로그챌린지] PE-Mobile 파트 4주차_2

About this offer

이번 4주차에서는 Flutter에서 비동기 작업을 처리하는 방법과 비동기 작업의 결과에 따라 화면을 다르게 보여주는 방법을 학습했다. 특히 Future , async/await , FutureBuilder 를 이용하여 영화 데이터를 불러오는 과정을 구현하고, Loading / Empty / Error / Success 상태를 각각 처리했다. 또한 mounted 를 이용해 비동기 작업이 끝난 후 Widget의 상태를 안전하게 변경하는 방법과 shared_preferences 를 이용해 마지막으로 선택한 장르를 저장하고 앱을 다시 실행했을 때 복원하는 기능까지 구현했다. 1. Future Flutter에서 서버 요청이나 파일 읽기처럼 시간이 걸릴 수 있는 작업은 바로 결과를 반환하지 않을 수 있다. 이처럼 나중에 결과가 완료되는 작업을 표현할 때 Future 를 사용한다. Future<T> 에서 T 는 비동기 작업이 완료되었을 때 반환되는 값의 타입을 의미한다. 예를 들어 문자열을 나중에 반환하는 함수라면 다음과 같이 작성할 수 있다. Future<String> getMessage() async { return 'Hello Flutter'; } 여기서 Future<String> 은 지금 당장 String을 반환하는 것이 아니라, 나중에 String이 완료될 예정이라는 의미이다. 숫자를 반환한다면 Future<int> , 영화 목록을 반환한다면 Future<List<Movie>> 처럼 사용할 수 있다. Future<int> getNumber() async { return 10; } Future<List<Movie>> getMovies() async { return movies; } 2. async와 await async 와 await 는 비동기 작업을 처리할 때 함께 사용한다. 2-1. async 함수 뒤에 async 를 붙이면 해당 함수가 비동기 함수가 된다. Future<String> getMessage() async { return 'Hello'; } async 가 붙은 함수는 기본적으로 Future 를 반환한다. 2-2. await await 는 비동기 작업이 완료될 때까지 결과를 기다릴 때 사용한다. Future<String> getMessage() async { final message = await getMessageFromServer(); return message; } await 를 사용하면 비동기 작업이 완료된 이후의 결과를 받아서 다음 코드를 실행할 수 있다. 중요한 점은 await 를 사용하는 함수에는 async 가 필요하다는 것이다. Future<void> loadData() async { final data = await getData(); } 3. try-catch-finally try { // 예외가 발생할 수 있는 코드 } catch (e) { // 예외가 발생했을 때 실행 } finally { // 성공 여부와 관계없이 실행 } 각각의 역할은 다음과 같다. try → 실행할 코드를 작성 catch → 예외가 발생했을 때 처리 finally → 예외 발생 여부와 관계없이 마지막에 실행 예를 들어 데이터를 가져오는 과정에서 오류가 발생할 수 있다면 다음과 같이 작성할 수 있다. try { final data = await getData(); } catch (e) { print('데이터를 가져오는 중 오류가 발생했습니다.'); } finally { print('작업이 종료되었습니다.'); } 4. FutureBuilder FutureBuilder<T> 는 Future 의 결과에 따라 화면을 구성할 때 사용하는 Widget이다. 비동기 작업은 시간이 걸리기 때문에 작업이 진행되는 동안에는 Loading 화면을 보여주고, 작업이 완료되면 결과에 따라 화면을 보여줘야 한다. 이때 FutureBuilder 를 사용할 수 있다. FutureBuilder<String>( future: getMessage(), builder: (context, snapshot) { if (snapshot.connectionState == ConnectionState.waiting) { return const CircularProgressIndicator(); } return Text(snapshot.data ?? ''); }, ) 여기서 FutureBuilder<String> 의 String 은 Future가 최종적으로 반환하는 데이터의 타입이다. 즉, Future<String> 을 사용한다면 FutureBuilder<String> 처럼 작성할 수 있다. 4-1. AsyncSnapshot FutureBuilder 의 builder 에서는 snapshot 을 통해 비동기 작업의 상태와 결과를 확인할 수 있다. 대표적으로 다음과 같은 값을 확인할 수 있다. snapshot.connectionState snapshot.data snapshot.hasError 예를 들어 Loading 상태인지 확인하려면 다음과 같이 작성할 수 있다. if (snapshot.connectionState == ConnectionState.waiting) { return const CircularProgressIndicator(); } 오류가 발생했는지는 다음과 같이 확인할 수 있다. if (snapshot.hasError) { return const Text('오류가 발생했습니다.'); } 그리고 정상적으로 데이터가 전달되었다면 snapshot.data 를 이용해 결과를 가져올 수 있다. 5. mounted Flutter에서는 비동기 작업이 진행되는 동안 Widget이 화면에서 사라질 수 있다. 예를 들어 화면에서 데이터를 불러오는 작업을 시작했는데 사용자가 그 전에 다른 화면으로 이동할 수도 있다. 이 상태에서 비동기 작업이 끝난 후 setState() 를 호출하면 문제가 발생할 수 있다. 따라서 비동기 작업이 끝난 후 현재 Widget이 아직 화면에 존재하는지 확인할 수 있다. 이때 사용하는 것이 mounted 이다. Future<void> loadData() async { final data = await getData(); if (!mounted) { return; } setState(() { // 상태 변경 }); } mounted 가 false 라면 해당 State가 더 이상 Widget tree에 연결되어 있지 않다는 의미이다. 따라서 mounted 를 확인한 후 setState() 를 호출하면 안전하게 상태를 변경할 수 있다. 6. shared_preferences 앱을 종료했다가 다시 실행하면 일반적인 변수에 저장한 값은 사라진다. 예를 들어 다음과 같은 변수에 장르를 저장했다면 String selectedGenre = '드라마'; 앱을 종료하고 다시 실행했을 때 다시 초기값으로 돌아간다. 앱을 다시 실행해도 유지해야 하는 간단한 설정값은 로컬 저장소에 저장할 수 있다. Flutter에서는 shared_preferences 패키지를 사용할 수 있다. flutter pub add shared_preferences shared_preferences 는 문자열, 숫자, boolean과 같은 간단한 데이터를 로컬에 저장할 때 사용할 수 있다. 이번 실습에서는 새로운 코드에서 비동기 방식으로 동작하는 SharedPreferencesAsync 를 사용했다. final preferences = SharedPreferencesAsync(); 값을 저장할 때는 다음과 같이 사용할 수 있다. await preferences.setString( 'selected_genre', '드라마', ); 저장된 값을 가져올 때는 다음과 같이 작성한다. final genre = await preferences.getString( 'selected_genre', ); 여기서 selected_genre는 저장할 데이터를 구분하기 위한 Key이다. 마무리 이번 4주차에서는 Flutter에서 비동기 작업을 처리하는 방법과 그 결과에 따라 화면의 상태를 나누는 방법을 학습했다. 특히 Future<String> 과 같은 Future<T> 의 개념부터 async/await , FutureBuilder , AsyncSnapshot 까지 비동기 작업이 어떤 흐름으로 처리되는지 이해할 수 있었다. 실습에서는 FakeMovieService 를 이용해 실제 API 없이도 영화 데이터를 비동기로 불러오는 상황을 만들었고, FutureBuilder 를 이용하여 Loading, Empty, Error, Success 상태를 각각 구현했다. 또한 Error 상태에서는 다시 시도 버튼을 눌렀을 때만 새로운 Future를 생성하도록 하면서 비동기 작업을 다시 실행하는 방법도 익혔다. mounted 를 이용해서 비동기 작업이 끝난 후 Widget이 아직 존재하는지 확인하는 방법도 배웠고, SharedPreferencesAsync 를 이용해서 사용자가 마지막으로 선택한 장르를 저장하고 앱을 다시 실행했을 때 복원하는 기능도 구현했다. 3주차에서는 화면을 연결하고 데이터를 전달하는 과정에 집중했다면, 4주차에서는 데이터를 불러오는 과정에서 발생할 수 있는 여러 상태를 처리하는 방법까지 확장해서 학습할 수 있었다. 처음에는 Future와 FutureBuilder가 낯설었지만 실제로 Loading부터 Error, Empty, Success까지 직접 구현해보면서 비동기 데이터가 화면에 표시되기까지의 흐름을 조금씩 이해할 수 있었다.