[LAB-5] fireStore 데이터 별로 각각 해당하는 데이터 읽어오기

문제 상황

<랜더링 되는 화면>

<MainPage 파일> = fireStore에 data를 Create 하는 코드

<ShowMeetings 파일> = Create한 데이터를 화면에 카드로 생성시키는 코드

<ReadMeetings 파일> = fireStore에 data를 Read 하는 코드 (아직 미완성. 진행중)

카드를 클릭하면 그 카드 정보를 팝업창에 띄우고 싶은데 로직이 고민되어 질문을 남깁니다.
제가 생각한 로직 방법 2가지를 말씀드리고 이 방향성이 맞는건지, 야무쌤이 생각하시는 로직은 어떠한 것인지 조언을 듣고싶습니다. (무조건 야무쌤 방식으로 하겠다기보다는, 말씀하시는 보편적인 방법에 대해 인지하고 참고하고 싶습니다.)

<제가 생각한 로직 방법>

카드를 클릭할때 localStorage에 uniqueID(firestore에 올라간 id)를 저장한 뒤, 저장한 uniqueID와 fireStore에 있는 data들의 id가 같다면 해당 data 정보들을 팝업창에 render 시킴.
=> 이방법은 시도하였으나, fireStore에 있는 id값을 어떻게 가져오는지 알아내지 못했습니다. snapshot으로 가능할 것 같다고 짐작만 했습니다.

fireStore에서 데이터를 불러와 render시키는 것이 아니라, 그냥 localStorage에 배열로 모든 정보를 저장한 뒤,
클릭할 때 localStorage에서 정보들을 불러온다. => 이방법은 지금도 구현 가능하지만, 제가 구현해보려 했던 fireStore에서 데이터 불러오기(Read)가 아니어서 하지 않은 상태입니다.

질문 분석

카드를 클릭하면 그 카드 정보를 팝업 창에 띄울 로직이 고민 된다.

카드를 클릭할 때 localStorage에 uniqueID(Firestore에 올라간 id)를 저장한 뒤, 저장한 uniqueID와 FireStore에 있는 data들의 id가 같다면 해당 data 정보들을 팝업창에 render 시킴.
Firestore에서 데이터를 불러와 render 시키는 것이 아니라, localStorage에 배열로 모든 정보를 저장한 뒤, 클릭할 때 localStorage에서 정보들을 불러 온다.

⚠️ 접근 권한

Firestore에 접근할 수 있는 권한이 제게 없습니다. (.env 파일이 없기 때문) 그러므로 테스트 수행 없이 답변합니다.

답변

남겨주신 @seoohyeon 님의 로직에 대해 답변 드립니다. 🤔

Firestore에서 특정 `id`로 데이터 필터링

Firestore(데이터베이스)에서 id 값이 일치하는 데이터만 필터링 할 수 있습니다. (참고) 아래 예시 코드의 query 함수 사용 부분을 참고하세요.

import { collection, query, where } from "firebase/firestore";

const parkingLotsRef = collection(db, "parkingLots");

const q = query(parkingLotsRef, where("id", "==", "비교할 uniqueID"));

const querySnapshot = await getDocs(q);

querySnapshot.forEach((doc) => {
  const parkingLot = { id: doc.id, ...doc.data() };
  console.log(parkingLot);
});

이 방법은 팝업 해야 할 때마다 Firestore에 저장된 데이터를 읽어와 화면에 렌더링 해야 하므로 로딩 스피너를 화면에 표시해야 합니다. 반면, Firestore에서 데이터를 직접 읽어올 수 있어 업데이트 된 사항을 정확하게 UI에 반영할 수 있습니다.

LocalStorage에 데이터 쓰기 / 읽기

이 방법을 사용하면 데이터 로딩(loading)에 관한 사용자 경험(UX)이 향상될 수 있습니다. 다만, Firestore와 LocalStorage 데이터가 동기화 되지 않은 경우 UI에 즉각적으로 반영되지 않을 수 있습니다. 그러므로 이 방식을 사용한다면 Firestore와 LocalStorage 데이터 동기화를 신경써야 합니다.

yamoo9 / likelion-FEQA