플러터와 파이어베이스 3탄 - 파이어 베이스 데이터 가져오기(READ)-DocumentReference란?? CollectionReference

플러터로 파이어 베이스 데이터 가져오기(READ)

1탄과 2탄에 이어 이번에는 파이어베이스(파이어스토어)에 저장된 데이터를 불러오는 방법에 대해 알아보겠습니다.
우선 기본 용어와 흐름 부터 정리해보도록 하겠습니다.

---

파이어베이스로 데이터 읽어오기에 필요한 용어, 지식 정리

DocumentReference란??

다큐먼트의 위치를 나타내며, 이것을 이용해서 저장하기, 읽어오기, 삭제, 수정의 기능을 할수 있습니다.

CollectionReference 란??

- CollectionReference.doc(path)를 이용해 특정 다큐먼트를 가지고 오고 이 메소드의 결과는
DocumentReference 형태로 반환됩니다.
- CollectionReference.add(data)를 이용해 data를 저장할수 있습니다.
- CollectionReference.get()을 통해 Future<QuerySnapshot<T>> 형태로 다큐먼트들을 가지고 옵니다.

QuerySnapshot란??

- QuerySnapshot은 쿼리의 결과를 담고 있는 박스라고 생각하시면 됩니다.
- 여기서 우리는 docs 프로퍼티를 통해 박스를 열어 안에 List<QueryDocumentSnapshot<T>> 형태의
데이터를 받아 올수 있습니다.
- 결국 QuerySnapshot.docs로 QueryDocumentSnapshot으로된 리스트를 얻습니다.

QueryDocumentSnapshot??

- QueryDocumentSnapshot은 우리가 저장한 데이터들이 들어 있습니다.
- QueryDocumentSnapshot.data()를 통해 최종적으로 우리가 원하는 데이터를 얻어올수 있습니다.
- QueryDocumentSnapshot.reference를 통해 DocumentReference도 얻을수 있습니다.

이렇게 기본적인 용어 정리를 마쳐보았습니다. 이제 본격적으로 코드를 통해 알아보도록 하겠습니다.

---

불러오기 코드 설명

우선 CollectionReference.get()을 하여 QuerySnapshot을 가지고 와야 합니다.

CollectionReference<Map<String, dynamic>> _collectionReference = 
	FirebaseFirestore.instance.collection("memo");

이렇게 CollectionReference 인스턴스를 생성하고 get() 메소드를 통해 QuerySnapshot을 가지고 옵니다.

QuerySnapshot<Map<String, dynamic>> querySnapshot =
    await _collectionReference.orderBy("date").get();

그 뒤 아래 코드와 같이 querySnapshot.docs를 통해 그 안에 List<QueryDocumentSnapshot<T>> QueryDocumentSnapshot을 이전에 만든 FireModel.fromQuerySnapshop(doc)을 통해 우리가 원하는 자료형으로 바꿔 줍니다.

List<FireModel> mottos = [];
for (var snapshot in querySnapshot.docs) {
  FireModel fireModel = FireModel.fromQuerySnapshot(snapshot);
  mottos.add(fireModel);
}

 

FireModel.fromQuerySnapshop(doc) 코드

스냅샷이 들어오면 forward constructor로 snapshot 각각 네임드 생성자인 fromJson으로 갑니다. 그리고 이 snapshot은 snapshot.data()와 snapshot.reference로 쪼개져 FireModel 객체를 생성하게 됩니다.

FireModel.fromQuerySnapshot(
    QueryDocumentSnapshot<Map<String, dynamic>> snapshot)
    : this.fromJson(snapshot.data(), snapshot.reference);

 

자료 불러오기 전체 코드는 아래와 같습니다.

Future<List<FireModel>> getFireModel() async {
  CollectionReference<Map<String, dynamic>> _collectionReference =
      FirebaseFirestore.instance.collection("memo");
  QuerySnapshot<Map<String, dynamic>> querySnapshot =
      await _collectionReference.orderBy("date").get();

  List<FireModel> mottos = [];
  for (var doc in querySnapshot.docs) {
    FireModel fireModel = FireModel.fromQuerySnapshot(doc);
    mottos.add(fireModel);
  }
  logger.d(mottos);
  return mottos;

 

데이터를 보여주는 부분

아래 퓨쳐빌더를 통해 손쉽게 데이터를 보여 줄수 있습니다.

FutureBuilder<List<FireModel>>(
  future: FireService().getFireModel(),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      List<FireModel> datas = snapshot.data!;
      return ListView.builder(
          itemCount: datas.length,
          itemBuilder: (BuildContext context, int index) {
            FireModel data = datas[index];
            return Card(
                child: ListTile(
              title: Text("${data.motto}"),
              subtitle: Text("${(data.date)!.toDate()}"),
            ));
          });
    } else {
      return const Center(child: CircularProgressIndicator());
    }
  },
)

완성된 화면

이것으로 불러오기 부분은 마치겠습니다.

추가로 where를 사용한 파이어베이스 쿼리 부분 포스팅을 하였습니다. 아래 링크 참조해주시기 바랍니다. 

2023.02.25 - [플러터와 파이어베이스] 데이터 쿼리 정리(WHERE 문)

[플러터와 파이어베이스] 데이터 쿼리 정리(WHERE 문)

---

2022.06.19 - 플러터와 파이어베이스 4탄 - 파이어스토어에 데이터 수정하기(UPDATE), 데이터 삭제하기(Delete)

 

플러터와 파이어베이스 4탄 - 파이어스토어에 데이터 수정하기(UPDATE), 데이터 삭제하기(Delete)