TIL # 53 < React Native 10 - 리뷰 CRUD >

  개발/공부 진행 및 완료상황, 무엇을 더 하면 좋을지

 

React Native 팀 프로젝트 진행

 

  오늘 새로 배운 내용

 

📖영화 리뷰 Read

// My 탭 화면 리스트 Read 로직
useFocusEffect(useCallBack(()=>{
	const q = query(
        collection(dbService, "reviews"),
        orderBy("createdAt", "desc"),
        where("userId", "==", authService.currentUser?.uid)
      );
      const unsubcribe = onSnapshot(q, (snapshot) => {
        const newReviews = snapshot.docs.map((doc) => ({
          id: doc.id,
          ...doc.data(),
        }));
        setReviews(newReviews);
      });
      return unsubcribe;
}, []))

 

📌영화 리뷰 Update

// React-Query의 useMutation (DB에 추가/수정/삭제 발생시킬 때 사용하는 hook)
const { isLoading: isLoadingEditing, mutate: reviseReview } = useMutation(
    ["editReview", review.id],
    (body) => editReview(body),
    {
      onSuccess: () => {
        console.log("수정성공");
      },
      onError: (err) => {
        console.log("err in edit:", err);
      },
    }
  );

 

🔥영화 리뷰 Delete

// 출처(My탭 or Detail화면) -> 리뷰 상세화면 -> 리뷰 수정 화면에서 삭제 시
// 리뷰 상세화면으로 진입했던 출처를 알아야 삭제 후 화면을 어디로 이동시킬 지 결정할 수 있음

// My탭 또는 Detail 화면에 있는 리뷰 상세화면 이동 함수
const goToReview = () => {
    navigate("Review", {
      review,
      from: "Detail",
    });
  };

// 리뷰 수정 화면에서의 삭제함수
const onDelete = async () => {
    Alert.alert("리뷰 삭제", "정말 현재 리뷰를 삭제하시겠습니까?", [
      { text: "cancel", style: "destructive" },
      {
        text: "OK. Delete it.",
        onPress: async () => {
          try {
            // await deleteDoc(doc(dbService, "reviews", review.id));
            await removeReview(review.id);
            if (from === "Detail") {
              navigation.navigate("Detail", { movieId: review.movieId });
            } else if (from === "My") {
              navigation.navigate("Tabs", { screen: "My" });
            }
          } catch (err) {
            console.log("err:", err);
          }
        },
      },
    ]);
  };