TIL 11주 2일차-react native project

리뷰 작성 및 읽어오기

 

firebase를 이용하여 리뷰 작성하는 기능을 구현하기로 했다.

 

 

// C - 생성

 

    const [modalContent, setModalContent] = useState('');
    const [ratings, setRatings] = useState(0);
    const getRatings = (rating) => { setRatings(rating) };
    const addReview = async () => {
        //addDoc을 이용해서 내가 원하는 collection에 내가 원하는 key로 값을 추가
        await addDoc(collection(dbService, 'reviews'), {
            contents: modalContent,
            createdAt: Date.now(),
            rating: ratings,
            userId: authService.currentUser?.uid,
            writer: authService.currentUser?.displayName ?? '닉네임없음',
            musicalId,
        });
        setIsOpenModal(false);
        setModalContent('');
        setRatings(0);
    };

-> reviews 라는 이름으로 컬렉션 생성 후 리뷰 내용 / 작성시간 / 별점 / 뮤지컬 ID / 작성자 닉네임 등 추가

 

파이어스토어에 추가된 모습 :

 

 

 

// R- 데이터 읽어오기

export default function ReviewsPart({ musicalId }) {
  const [isOpenModal, setIsOpenModal] = useState(false);
  const [reviews, setReviews] = useState([]); // reviews 추가, 삭제 state
  const { navigate } = useNavigation();

  const addreview = () => {
    const isLogin = !!authService.currentUser;
    if (!isLogin) {
      navigate('Login');
      return;
    }
    setIsOpenModal(true);
  };

  useEffect(() => {
    const reviewsCollectionRef = collection(dbService, 'reviews');
    const q = query(
      reviewsCollectionRef,
      where('musicalId', '==', musicalId),
      orderBy('createdAt', 'desc')
    );
    const getReviews = onSnapshot(q, (snapshot) => {
      const newReviews = snapshot.docs.map((doc) => ({
        id: doc.id,
        ...doc.data(),
      }));
      setReviews(newReviews);
    });
    return getReviews;
  }, []);

-> 'reviews' 콜렉션에서 props로 받아온 musicalID랑 같은 뮤지컬 아이디를 포함하는 데이터를 최신순으로 불러온다. (query, where, orderBy 메소드 이용)

 

firebase onSnapshot 이라는 메소드를 통해 실시간 데이터를 가져온다

=> 데이터를 가져온 후 바로 최신화 시켜주는 메소드