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

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

---

Firestore Stream

이번에는 Stream을 이용해 Firestore에 저장되어 있는 data에 접근해보는 방법을 알아볼게요.

개인적으로 Stream에 익숙하지 않아서 조금 헤맸어요 ...😂
헤맨만큼 조금 더 성장한 것이라고 믿고 !

열심히 정리해 볼게요 :)

Stream

Stream은 Firestore에서 변경사항을 즉각적으로 반영해줄 수 있는 아이에요.
새로운 document가 생성되거나, 기존의 data가 변경이 된다면 재빠르게 알아채요.

snapshot이라는 개념이 등장하는데 다른말로 '순간순간 update된 data'라고 생각하면 돼요.
여기서 snapshot은 현재 document현황과 내부의 필드(속성)들을 포함하는 객체가 돼요.

현재 아래와같이 firestore에는 'users'라는 collection이 있어요.

새로운 user가 회원가입을 하게되면 아래 코드를 통해 firestore users collection에 자동으로 저장(업데이트) 되도록 했어요.

Future updateUserData(
    String _email,
    String _password,
  ) async {
    print('updating database...');
    return await userCollection.doc(uid).set({
      'uid': uid,
      'email': _email,
      'password': _password,
    });
  }

get snapshot

collection의 현재 상태, 즉 collection의 snapshot을 얻어오기 위해 class 내부에 method를 만들어 볼게요.

DatebaseService class

  Stream<QuerySnapshot> get _users {
    return userCollection.snapshots();
  }

snapshots() method는 Stream의 형태로 QuerySnapshot class를 반환해줘요.

StreamProvider

나중에 stream을 home screen에서 사용할 것이기 때문에
home_screen에서 StreamProvider를 이용해서 Scaffold를 감싸줘요.

home_screen

return StreamProvider<QuerySnapshot>.value(
      value: DatabaseService().users,
      initialData: null,
      child: Scaffold( ...
      body : UserList() 

이제 Scaffold의 하위 widget들은 'users' (get stream data)에 접근이 가능해져요.
Scaffold의 body 부분에 UserList class를 띄울 수 있도록 해줄게요.
UserList class는 이제 만들어줄거에요.

UserList Class

Stateful Widget으로 UserList class를 만들고, 상위 Scaffold에서 QuerySnapshot에 대한 접근을 허락해줬으니 UserList class에서 사용할 인스턴스 _users를 Provider로 만들어줘요.

user_list.dart

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

'users' 를 로그로 찍어보면

print(_users);

//console
flutter: Instance of 'QuerySnapshot'

라는 결과가 나와요.
이 QuerySnapshot 이라는 Instance는 getter method에서 설정했듯이 user collection을 의미해요.

user collection 내부의 document에 접근하고 싶으면 docs로 접근하면 돼요.
이것도 로그로 찍어볼게요.

print(_users.docs);

//console
flutter: [Instance of 'QueryDocumentSnapshot', Instance of 'QueryDocumentSnapshot']

현재 아래 사진과 같이 users collection 내부의 document 갯수 (회원 수)는 2개라서 Instance of 'QueryDocumentSnapshot' 가 List의 형태로 두 개가 찍히는 거에요.!

더 안쪽으로 가볼게요.
collection 내부에 document가 있고, document 내부에 각각의 user에 대한 정보가 들어있어요. 그 필드들을 들여다보고 싶다면!

data() method를 사용해주면 돼요.

이것 또한 로그로 찍어볼게요.

_users.docs는 List니까,
for문으로 각각의 document에 접근해서 document의 data를 print 해볼게요.

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

여기까지 document 내부 data까지 접근이 가능해졌어요 👏🏻