저장한 데이터 조회하기

예시코드

LikePage.js

.
.
.

import Constants from "expo-constants";
import { firebase_db } from "../firebaseConfig";

export default function LikePage({ navigation, route }) {
  const [tip, setTip] = useState([]);
  const [ready, setReady] = useState(true);

  useEffect(() => {
    navigation.setOptions({
      title: "꿀팁 찜",
    });
    const user_id = Constants.installationId;
    firebase_db
      .ref("/like/" + user_id)
      .once("value")
      .then((snapshot) => {
        console.log("파이어베이스에서 데이터 가져왔습니다!!");
        let tip = snapshot.val();
        console.log(tip);
        let tip_list = Object.values(tip);
        if (tip_list.length > 0) {
          setTip(tip_list);
          setReady(false);
        }
      });
  }, []);

.
.
.

사용법

1. 리얼타임 데이터베이스의 like 폴더에서, 유저의 id에 해당하는 폴더의 데이터를 가져오도록 ref()에 주소값을 입력한다.
2. 가져온 데이터가 존재할때, 그 화면이 보이도록 tip에 데이터를 입력하고, ready를 false로 변경한다.
   • firebase_db에서 가져온 데이터가 Object라는 딕셔너리에 쌓여서 가져와지기 때문에, 이를 리스트 형태로 바꿔서 가져오는 Object.values() 함수를 사용해 tip_list로 새로 데이터를 정제한다.
   • 이 리스트에 데이터가 1개라도 있을 경우 화면이 출력하도록 if문을 적용한다.

firebase_db
  .ref("/like/" + user_id)
  .once("value")
  .then((snapshot) => {
    console.log("파이어베이스에서 데이터 가져왔습니다!!");
    let tip = snapshot.val();
    console.log(tip);
    let tip_list = Object.values(tip);
    if (tip_list.length > 0) {
      setTip(tip_list);
      setReady(false);
    }
  });

저장한 데이터 삭제하기 + 조회

예시코드

LikeCard.js

.
.
.

import { firebase_db } from "../firebaseConfig";
import Constants  from "expo-constants";

//LikePage로 부터 navigation 속성을 전달받아 Card 컴포넌트 안에서 사용
export default function LikeCard({ content, navigation, reload }) {
  const user_id = Constants.installationId;
  
  const detail = () => {
    navigation.navigate("DetailPage", { idx: content.idx });
  };

  const remove = () => {
    firebase_db
      .ref(`/like/${user_id}/${content.idx}`)
      .remove()
      .then(() => {
        Alert.alert("해당 찜목록이 삭제되었습니다!");
        // navigation.navigate("LikePage");
        reload()
      })
      .catch((error) => {
        console.log("삭제를 실패했습니다ㅠㅠ : " + error.message);
      });
  };

.
.
.

LikePage.js

.
.
.

import Constants from "expo-constants";
import { firebase_db } from "../firebaseConfig";

export default function LikePage({ navigation, route }) {
  const [tip, setTip] = useState([]);
  const [ready, setReady] = useState(true);

  const user_id = Constants.installationId;

.
.
.

  const reload = () => {
    firebase_db
      .ref(`/like/${user_id}`)
      .once("value")
      .then((snapshot) => {
        //snapshot에 값이 있는지 없는지 체크하는 exists 함수 사용
        if (snapshot.exists()) {
          let tip = snapshot.val();
          let tip_list = Object.values(tip);
          setTip(tip_list);
        } else {
          setReady(true);
          setTip([]);
        }
      });
  };

.
.
.

1. firebase_db의 ref()에 삭제할 데이터 주소를 입력한다.
   • Constants로 가져온 user_id, 데이터의 idx를 사용했다.
2. firebase_db의 remove() 함수를 사용하여 데이터를 삭제한다.
   • .then()과 catch 함수를 사용하여 에러 처리를 한다.
   • navigation.navigate("LikePage")를 사용하여 다시 화면을 가져오는것은 작동하지 않는다...
     - 왜지...ㅠㅠ

firebase_db
  .ref(`/like/${user_id}/${content.idx}`)
  .remove()
  .then(() => {
    Alert.alert("해당 찜목록이 삭제되었습니다!");
    // navigation.navigate("LikePage");
    reload()
  })
  .catch((error) => {
    console.log("삭제를 실패했습니다ㅠㅠ : " + error.message);
  });

3. 삭제를 성공하였으면, 삭제가 되었다는 alert를 출력하고, reload()를 사용하여 화면을 다시 그린다.
   • reload 함수는 LikeCard로 넘어오기 이전 화면인 LikePage를 갱신해서 보여줘야한다.
   • 따라서 reload 함수는 LikeCard의 인자로 받아서 가져와야한다!

export default function LikeCard({ content, navigation, reload }) {

4. reload 함수를 구현한다.
   • 기존 useEffect 내부에서 firebase_db를 사용하여 데이터를 가져오는 방식과 유사하다.
   • snapshot.exists()를 사용해 값이 있는지 확인하는 방식만 다르다!

const reload = () => {
  firebase_db
    .ref(`/like/${user_id}`)
    .once("value")
    .then((snapshot) => {
      //snapshot에 값이 있는지 없는지 체크하는 exists 함수 사용
      if (snapshot.exists()) {
        let tip = snapshot.val();
        let tip_list = Object.values(tip);
        setTip(tip_list);
      } else {
        setReady(true);
        setTip([]);
      }
    });
};

최종화면