#이 포스팅은 플린이의 입장에서 쓰여진 글입니다. 코드 지적은 언제나 환영입니다. 🙆🏻‍♂️

이 프로젝트는 'Youtube The net ninja'의 flutter firebase tutorial 강의를 참고했습니다.

---

Stream data - UserModel

이번에는 Stream data를 UserModel과 연결해볼거에요.
model화는 꼭 필요한건 아니에요. 하지만 이렇게 하면 나중에 data처리가 유용할 수 있어요.

하나를 예로 들자면..
data에 접근 하는 방식이 달라질 수 있어요.

모델화 x

for (var doc in _users.docs) {
      print(doc.data());
    }
    
//console
flutter: {email: example2@google.com, password: 12341234}
...

모델화 o

for (var doc in _users) {
      print(doc.email);
      print(doc.uid);
      print(doc.password);
    }
//console
flutter: example4@naver.com
flutter: mKjJFW5RoBdoBKwwOTfXfi9HW6r1
flutter: 12341233
...

결과는 비슷해요.
위쪽은 data() method로 불러오면 map 자료형으로 출력되는 것을 볼 수 있어요.
아래쪽은 각각의 필드값에 다이렉트로 접근한 예시에요.
물론 모델화를 안해도 필드값을 다이렉트로 불러올 수 있지만.. 코드가 더 길어질 수 있어요.

개인의 취향 차이일 수 있지만.. 전 해볼게요 !

---

UserModel class

먼저 UserModel class를 볼게요.
uid, email, password 필드를 가지고 있어요.

UserModel class

class UserModel {
  final String uid;
  final String email;
  final String password;

  UserModel({this.email, this.password, this.uid});
}

DatabaseService class

이전 포스팅에서 User collection을 Stream으로 snapshot을 받아오는 method를 작성했었어요. (아래 코드)

DatabaseService class

//get 'Users collection' stream data
Stream<QuerySnapshot> get getUsers {
  return userCollection.snapshots(); //return QuerySnapshot.
}

이 method를 변형해서, 아래와같이
결과적으로 QuerySnapshot이 아닌 UserModel class를 List의 형태로 변환해줄 수 있도록 해볼거에요.

DatabaseService class

  //get 'UserModel' list using _userListFromSnapshot method
Stream<List<UserModel>> get getUsers {
  return userCollection.snapshots().map(_userListFromSnapshot);
}

map()의 인자로 받는 method는 이제 만들건데 snapshot을 인자로 받아서 collection 내부의 각각의 document들을 UserModel로 변형해주는 아이에요.

firestore에 저장되어있는 필드값들을 UserModel의 필드값과 매핑 해줘요.

DatabaseService class

  List<UserModel> _userListFromSnapshot(QuerySnapshot snapshot) {
    return snapshot.docs.map((doc) {
      return UserModel(
        uid: doc.data()['uid'] ?? 'doesn\'nt exist uid',
        email: doc.data()['email'] ?? '',
        password: doc.data()['password'] ?? '',
      );
    }).toList();
  }

두 method가 서로 연결되어 있는 형태인데, 말로 풀어서 설명해볼게요.

getUsers
일단 Stream의 형태로 userCollection data를 snapshot으로 가져와요.
가져온 snapshot을 _userListFromSnapshot method로 처리해주는데 이 method를 거치면 결과적으로 UserModel들의 List 형태가 나와요.

_userListFromSnapshot
getUsers method에서 snapshot(collection data)을 넘겨주면 인자로 받아서 각각의 document들은 UserModel class가 되며, document의 필드값을 UserModel의 필드값들과 연결시켜줘요.
UserModel들의 List를 return 해줘요.

---

이제 method 설정은 끝났어요.
home screen에서 StreamProvider로 getUsers method를 불러와볼게요.

home screen

StreamProvider<List<UserModel>>.value(
      value: DatabaseService().getUsers,
      initialData: null,
      child: Scaffold( 
      body : UserList()...

UserList class에서 data접근이 가능해져요.
provider로 불러올게요.

final _users = Provider.of<List<UserModel>>(context);

다 끝났어요.
_users를 로그로 찍어보면 QuerySnapshot data가 아닌 UserModel data가 나와요!

    print(_users);
    
  //console
  //현재 firestore users collection의 document에는 세개의 계정이 있어요.
  flutter: [Instance of 'UserModel', Instance of 'UserModel', Instance of 'UserModel']

UserModel 각각의 필드값들도 다이렉트로 불러올 수 있어요.

 for (var doc in _users) {
      print(doc.email);
      print(doc.uid);
      print(doc.password);
    }
//console
flutter: example@google.com
flutter: mKjJFW5RoBdoBKwwOTfXfi9HW6r2
flutter: 12341234 ....

여기까지.

플린이의 입장에서 이번 챕터는 좀 어려웠네요 😭