Flutter에서 SharedPreference

서버 통신시 SharedPreference는 거의 꼭 필요하다고 볼 수 있다.

 

프론트 쪽에서 token, user_id(때에 따라 다름)를 계속 가지고 있어야 하는 경우가 많다. 이럴 때 SharedPreference로 쉽게 token을 가지고 있을 수 있다.

 

sharedPreference의 공식문서는 여기서 확인할 수 있다.

https://pub.dev/packages/shared_preferences

shared_preferences | Flutter Package

 

일단 pubspec.yaml에 shared_preference를 추가하고 pub get을 해줘야 한다.

dependencies:
  shared_preferences: ^2.0.7

 

공식문서 속 방법 자체도 아주 간단하긴 했지만 나의 경우 저장해야할 정보들이 너무 많아서 파일을 따로 만들어서 관리하는 게 더 깔끔할 것 같다는 생각에 따로 만들었다. 하지만 저장할 정보가 한두개라면 그냥 파일을 따로 만들지 않고 구현하는 게 더 좋을 것 같다.

 

import 'package:shared_preferences/shared_preferences.dart';

// token을 저장하는 함수
setToken(context, String? TOKEN) async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  prefs.setString('token', TOKEN!);
}

 

그래서 위와 같이 따로 파일을 만든 뒤 작성해주었고

 

각 파일에서 필요에 따라  setToken을 사용해 token을 저장하고 관리했다. 다만 여기서 setToken만 만들고 getToken을 만들지 않은 이유가 있다. setToken의 경우 별 그저 저장하는 거라 문제가 없었지만 getToken으로 토큰을 불러올 때에는 비동기의 문제가 있었다. 토큰을 받아오는데 시간이 걸리다보니 여기서 뷰가 뜰 때 에러가 엄청 발생했었다.

(나의 경우만 그럴 수도 있음)

그래서 token을 받아올 때에는 받아오는 token이 필요한 곳에 따로 함수를 직접 작성하였고 여기서도 FutureBuilder를 사용해서 받아왔다. 먼저 setToken을 사용하는 방식은 아래와 같고, 그 아래에 getToken을 썼던 내 방식에 대해서도 간단히 작성해 보자면

setToken(context, "token");

Future<void> getToken() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  token = prefs.getString('token');
}

우선 이런식으로 token을 불러오는 코드를 작성해주었다.

그리고 필요한 부분에 futurebuilder를 추가하여 token을 받아와 사용하였다...(귀찮은 방법이라.. 더 좋은 방법이 있을 것이라 생각됨)

return FutureBuilder(
           future: getToken(),
           initialData: "",
           builder: (context, AsyncSnapshot snapshot){
              if (snapshot.connectionState == ConnectionState.waiting)
                return Center(
                  child: CircularProgressIndicator(),
                );
                      
              print(token);
            }
  );

이런 식으로 sharedpreference의 토큰을 받아와 사용했다. 작동은 잘 되었다. 효율적인 코드인지는 사실 잘 모르겠다

 

일단 SharedPreference의 원리가 이런식이라는 정도의 이해는 잘 된 것 같다 😊