React-Native [11. Firebase로 특정 데이터 조회/저장]
7671 단어 react nativeFirebaseFirebase
한꺼번에 모든 데이터를 가지고 페이지를 이동하는것은 상식적으로 느릴 수 밖에 없다.
이동하는 페이지에 필요한 데이터만 가지고 오는 기능이 필요한 이유!
예시코드
Card.js
import React from 'react';
import {View, Image, Text, StyleSheet,TouchableOpacity} from 'react-native'
//MainPage로 부터 navigation 속성을 전달받아 Card 컴포넌트 안에서 사용
export default function Card({content,navigation}){
return(
//카드 자체가 버튼역할로써 누르게되면 상세페이지로 넘어가게끔 TouchableOpacity를 사용
<TouchableOpacity style={styles.card} onPress={()=>{navigation.navigate('DetailPage',{idx:content.idx})}}>
<Image style={styles.cardImage} source={{uri:content.image}}/>
<View style={styles.cardText}>
<Text style={styles.cardTitle} numberOfLines={1}>{content.title}</Text>
<Text style={styles.cardDesc} numberOfLines={3}>{content.desc}</Text>
<Text style={styles.cardDate}>{content.date}</Text>
</View>
</TouchableOpacity>
)
}
.
.
.
DetailPage.js
import React,{useState,useEffect} from 'react';
import { StyleSheet, Text, View, Image, ScrollView,TouchableOpacity,Alert,Share } from 'react-native';
import * as Linking from 'expo-linking';
import {firebase_db} from "../firebaseConfig"
export default function DetailPage({navigation,route}) {
.
.
.
useEffect(() => {
.
.
.
//넘어온 데이터는 route.params에 들어 있습니다.
const { idx } = route.params;
firebase_db
.ref("/tip/" + idx)
.once("value")
.then((snapshot) => {
let tip = snapshot.val();
setTip(tip);
});
}, []);
.
.
.
사용법
navigation.navigate('DetailPage',{idx:content.idx})
- 카드를 클릭하면 기존에는 content 데이터 전부를 넘겨주었었는데, 이를 {idx:content.idx}, 즉 primary key만 넘겨준다.
- {idx: 클릭한 카드의 idx}를 넘겨받은 DetailPage는, firebase_db를 사용하여 해당 데이터를 조회한다.
- firebase_db.ref("/tip/" + idx).once("value").then((snapshot) => {
let tip = snapshot.val();
setTip(tip);
});
- 이전 MainPage에서 조회했던 함수 중, ref() 내부의 주소값만 변경하였다.
- "/tip/" + idx는 리얼타임 데이터베이스에서 클릭한 데이터의 주소를 나타낸다!
특정 데이터 저장하기
navigation.navigate('DetailPage',{idx:content.idx})
- firebase_db.ref("/tip/" + idx).once("value").then((snapshot) => {
let tip = snapshot.val();
setTip(tip);
}); - 이전 MainPage에서 조회했던 함수 중, ref() 내부의 주소값만 변경하였다.
- "/tip/" + idx는 리얼타임 데이터베이스에서 클릭한 데이터의 주소를 나타낸다!
찜하기 버튼을 누르면 해당 데이터가 저장이 되고, 저장한 데이터를 출력해본다.
설치코드
expo install expo-constants
예시코드
DetailPage.js
.
.
.
import { firebase_db } from "../firebaseConfig";
import Constants from "expo-constants";
export default function DetailPage({ navigation, route }) {
const [tip, setTip] = useState({
idx: 9,
category: "재테크",
title: "렌탈 서비스 금액 비교해보기",
image: "https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/l~~",
desc: "요즘은 정수기, 공기 청정기, 자동차나 장난감 등 다양한 대여서비스가 활발합니다~~",
date: "2020.09.09",
});
.
.
.
useEffect(() => {
.
.
.
//넘어온 데이터는 route.params에 들어 있습니다.
const { idx } = route.params;
firebase_db
.ref("/tip/" + idx)
.once("value")
.then((snapshot) => {
let tip = snapshot.val();
setTip(tip);
});
}, []);
const like = () => {
const user_id = Constants.installationId;
firebase_db.ref(`/like/${user_id}/${tip.idx}`).set(tip, function (error) {
console.log(error);
Alert.alert("찜하기 완료!");
});
};
.
.
.
<TouchableOpacity style={styles.button} onPress={() => like()}>
<Text style={styles.buttonText}>팁 찜하기</Text>
</TouchableOpacity>
사용법
특정 카드를 클릭하여 들어간 상세페이지는 firebase_db에서 해당 카드 데이터만 가져와서 출력한다.
이 카드 데이터를 "팁 찜하기" 버튼을 눌러서 저장하는 작업이다.
- firebase_db에서 가져온 데이터가 어떤 형태인지 확인한다.
- tip이라는 데이터가 딕셔너리 형태로 관리되고 있다.
- "idx"가 primary key이다.
- 해당 데이터를 저장할 고유 저장소를 만들기 위해 사용자의 id를 확인한다.
- 설치한 "expo-constants" 라이브러리를 사용하여 사용자의 고유 id를 찾아 선언한다.
const user_id = Constants.installationId;
- 리얼타임 데이터베이스에 id를 사용하여, 찜하기 하려는 tip을 저장하도록 ref()의 주소를 입력한 함수를 선언한다.
- 여기서는 like라는 화살표 함수를 선언했다.
- like/유저id/ 폴더에 찜하기한 tip의 "idx"를 저장한다.
- 신기하게도 해당 idx를 누르면 그 idx에 해당하는 tip 데이터도 저장되어있다...?
- 확인결과 에러가 일어나지 않으면 console에 null이 출력되고 alert는 그대로 나온다.
firebase_db.ref(`/like/${user_id}/${tip.idx}`).set(tip, function (error) {
console.log(error);
Alert.alert("찜하기 완료!");
});
- 해당 like 함수를 실행하도록 "팁 찜하기" 버튼의 onPress의 화살표함수 내부에 선언한다.
Author And Source
이 문제에 관하여(React-Native [11. Firebase로 특정 데이터 조회/저장]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@minbrother/React-Native-11.-Firebase로-특정-데이터-조회저장하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)