한꺼번에 모든 데이터를 가지고 페이지를 이동하는것은 상식적으로 느릴 수 밖에 없다.
이동하는 페이지에 필요한 데이터만 가지고 오는 기능이 필요한 이유!

예시코드

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})

1. 카드를 클릭하면 기존에는 content 데이터 전부를 넘겨주었었는데, 이를 {idx:content.idx}, 즉 primary key만 넘겨준다.
2. {idx: 클릭한 카드의 idx}를 넘겨받은 DetailPage는, firebase_db를 사용하여 해당 데이터를 조회한다.
   • 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에서 해당 카드 데이터만 가져와서 출력한다.
이 카드 데이터를 "팁 찜하기" 버튼을 눌러서 저장하는 작업이다.

1. firebase_db에서 가져온 데이터가 어떤 형태인지 확인한다.
   • tip이라는 데이터가 딕셔너리 형태로 관리되고 있다.
   • "idx"가 primary key이다.
2. 해당 데이터를 저장할 고유 저장소를 만들기 위해 사용자의 id를 확인한다.
   • 설치한 "expo-constants" 라이브러리를 사용하여 사용자의 고유 id를 찾아 선언한다.

const user_id = Constants.installationId;

3. 리얼타임 데이터베이스에 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("찜하기 완료!");
});

4. 해당 like 함수를 실행하도록 "팁 찜하기" 버튼의 onPress의 화살표함수 내부에 선언한다.