[전기차 충전소 찾기 앱/ReactNative] 파이어베이스로 정보 저장하기

 

 

우선 데이터베이스만 사용할 경우 리액트랑 똑같기 때문에(리액트 네이티브)

App으로 새 프로젝트를 만들지 않고

바로 기존 프로젝트 todoList 혹은 다른 프로젝트를 선택

​

우선 파이어스토어의 룰(규칙) 부터 살펴보자. 규칙의 날짜가 오버됬다면 우선

현재 날짜 이후로 간단히 수정해주고 프로젝트 완료후 규칙을 새로(인증등 적용)만들었다.

 

 

 

 

 

 

 

파이어베이스는 사용할려면 

 

라이브러리를 설치해야한다.

 

 

 

 

 

파이어베이스를 설치한다.

 

 

import { initializeApp } from "firebase/app";

import { getFirestore } from "firebase/firestore";

const firebaseConfig = {

  apiKey: process.env.EXPO_PUBLIC_FIREBASE_API_KEY,

  authDomain: process.env.EXPO_PUBLIC_FIREBASE_AUTH_DOMAIN,

  projectId: process.env.EXPO_PUBLIC_FIREBASE_PROJECT_ID,

  storageBucket: process.env.EXPO_PUBLIC_FIREBASE_STORAGE_BUCKET,

  messagingSenderId: process.env.EXPO_PUBLIC_FIREBASE_MESSAGEING_SENDER_ID,

  appId: process.env.EXPO_PUBLIC_FIREBASE_APP_ID,

};

// Initialize Firebase

initializeApp(firebaseConfig);

// 파이어스토어 db

export const db = getFirestore();

 

API키는 .env파일에 저장한다

 

PlaceItem.jsx 이미지 위에 하트 아이콘 추가

      <FontAwesome name="heart-o" size={24} color="coral" />

      <Image

 

아이콘이 클릭 가능하게 Pressable 안에 넣는다.

      <Pressable

        style={{ position: "absolute", right: 0, margin: 10, zIndex: 10 }}

        onPress={() => onSetFav()}

      >

        <FontAwesome name="heart-o" size={24} color="coral" />

      </Pressable>

 

하트 아이콘을 클릭하면 파이어스토어에 저장할거기 때문에

onSetFav 함수를 추가한다

  //하트아이콘 클릭 시 파이어스토어에 저장

  const onSetFav = async (place) => {

    //console.log(place.id);

    await setDoc(doc(db, 'favor-place', place.id), {

      ...place,

      email: user.primaryEmailAddress.emailAddress,

    });

    markedFav();

    ToastAndroid.show('저장됨!', ToastAndroid.TOP);

  };

  return (

    <View

      style={{

        width: Dimensions.get("screen").width * 0.9,

        backgroundColor: "white",

        margin: 5,

        borderRadius: 10,

      }}

    >

      <Pressable

        style={{ position: "absolute", right: 0, margin: 10, zIndex: 10 }}

        onPress={() => onSetFav(place)}

      >

 

 

 

 

 

하트 버튼을 누르면 파이어 스토어에 저장된다.

 

 

 

import { collection, query, where, getDocs } from 'firebase/firestore';
import { useUser } from '@clerk/clerk-expo';
import { db } from '../../Utils/FirebaseConfig';
...
const { user } = useUser();
...
  useEffect(() => {
    user && getFav();
  }, [user]);

  const getFav = async () => {
    const q = query(
      collection(db, 'favor-place'),
      where('email', '==', user.primaryEmailAddress.emailAddress)
    );
    const querySnapshot = await getDocs(q);
    querySnapshot.forEach((doc) => {
      console.log(doc.id, ' => ', doc.data());
    });
  };

 

스테이트로 즐겨찾기 리스트를 저장한다.

 

const [favList, setFavList] = useState([]);

setFavList((prev) => [...prev, doc.data()]);

 

 

즐겨찾기 추가한 장소들을 표시한다.

  //즐겨찾기 장소 표시

  useEffect(() => {

    user && getFav();

  }, [user]);

  const getFav = async (del = false) => {

    setFavList([]);

    const q = query(

      collection(db, "favor-place"),

      where("email", "==", user.primaryEmailAddress.emailAddress)

    );

    const querySnapshot = await getDocs(q);

    querySnapshot.forEach((doc) => {

      //console.log(doc.id, ' => ', doc.data());

      setFavList((prev) => [...prev, doc.data()]);

    });

  };

  const isFav = (place) => {

    const result = favList.find((item) => item.id == place.id);

    return result ? true : false;

  };

 

 

isFav를 props로 전달한다.

        renderItem={({ item, index }) => (

          <View key={index}>

            <PlaceItem

              place={item}

              isFav={isFav(item)}

              markedFav={() => getFav()}

            />

          </View>

        )}

 

 

 

 

즐겨찾기가 이미 추가된 장소는 빨간하트로 출력하기 

export default function PlaceItem({ place, isFav }) {

...

        {isFav ? (
          <FontAwesome name="heart" size={24} color="coral" />
        ) : (
          <FontAwesome name="heart-o" size={24} color="coral" />
        )}

 

 

그리고 즐겨찾기 추가하면 업데이트해줌

PlaceListView

       <PlaceItem place={item} isFav={isFav(item)} markedFav={() => getFav()} />

 

 

export default function PlaceItem({ place, isFav, markedFav }) {

 

markedFav()함수를 프롭스로 받아서 하트 클릭 시 업데이트를 실행한다.

  const onSetFav = async (place) => {

    //console.log(place.id);

    await setDoc(doc(db, 'favor-place', place.id), {

      ...place,

      email: user.primaryEmailAddress.emailAddress,

    });

    markedFav();

    ToastAndroid.show('저장됨!', ToastAndroid.TOP);

  };

 

 

 

즐겨찾기 삭제하기 

  //즐겨찾기 삭제

  const onRemoveFav = async (placeId) => {

    //console.log(placeId);

    await deleteDoc(doc(db, "favor-place", placeId));

    markedFav();

    ToastAndroid.show("삭제됨!", ToastAndroid.TOP);

  };

 

하트버튼에 즐겨찾기가 이미 추가되어있으면 removeFav함수 실행, 추가되어있지않으면 즐겨찾기 추가하는 SetFav함수실행한다.

    >

      <Pressable

        style={{ position: "absolute", right: 0, margin: 10, zIndex: 10 }}

        onPress={() => (isFav ? onRemoveFav(place.id) : onSetFav(place))}

      >

 

 

 

 

  //즐겨찾기 업데이트

  const getFav = async (del = false) => {

    setFavList([]);

    const q = query(

      collection(db, "favor-place"),

      where("email", "==", user.primaryEmailAddress.emailAddress)

    );

    const querySnapshot = await getDocs(q);

    querySnapshot.forEach((doc) => {

      //console.log(doc.id, ' => ', doc.data());

      setFavList((prev) => [...prev, doc.data()]);

    });

  };