현재 LikePage에 찜한 데이터를 띄우는 숙제를 하고 있습니다.
코드
import React, { useState, useEffect } from "react";
import {
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
ScrollView,
} from "react-native";
import LikeCard from "../components/LikeCard";
import { StatusBar } from "expo-status-bar";
import { firebase_db } from "../firebaseConfig";
import Loading from "../components/Loading";
export default function LikePage({ navigation, route }) {
const [tip, setTip] = useState([
{
idx: 3,
category: "재테크",
title: "잠자는 내 돈을 찾아라",
image:
"https://storage.googleapis.com/sparta-image.appspot.com/lecture/money1.png",
desc: "‘새는 돈’에는 미처 몰랐던 카드 포인트, 휴면예금이나 환급금도 포함됩니다. 확실히 파악하지 못한 잠자는 돈을 찾아보고 자투리 돈들을 모으는 것도 중요합니다. 케이블방송, 위성방송 서비스를 이용하면서 중복 납부한 요금, 셋톱박스 보증금 등 돌려받지 않은 돈이 있는지 확인 해보세요. 또, 카드 포인트 통합 조회 서비스를 이용해 여러 개의 카드 포인트가 모두 얼마인지 체크해두는 것이 좋습니다. 보험해약 환급금, 휴면 보험금이나 휴면 예금을 찾아보고 돌려받는 일도 요즘에는 어렵지 않습니다.",
date: "2020.09.09",
}
]);
const [ready, setReady] = useState(true);
useEffect(() => {
//뒤의 1000 숫자는 1초를 뜻함
//1초 뒤에 실행되는 코드들이 담겨 있는 함수
setTimeout(() => {
console.log("useEffect를 실행합니다.")
//헤더의 타이틀 변경
navigation.setOptions({
title: "꿀팁 찜",
});
firebase_db
.ref("/like/e84f0d1e5b948147")
.once("value")
.then((snapshot) => {
console.log("!!파이어베이스에서 가져왔습니다!!");
let tip_temp = snapshot.val();
console.log(tip_temp)
if (Object.values(tip_temp).length) {
setTip(tip_temp);
console.log('ready를 false로 바꿉니다.')
console.log("111111111111", tip_temp)
console.log("222222222222",tip)
setReady(false);
}
});
}, 1000);
}, []);
return ready ? <Loading/> : (
<ScrollView style={styles.container}>
<StatusBar style="light" />
<View style={styles.cardContainer}>
{/* 하나의 카드 영역을 나타내는 View */}
{tip.map((content, i) => {
console.log("-------------------------")
console.log("content : ", content)
console.log("i : ", i)
return <LikeCard content={content} key={i} navigation={navigation} />;
})}
</View>
</ScrollView>
);
}
const styles = StyleSheet.create({
container: {
//앱의 배경 색
backgroundColor: "#fff",
},
title: {
//폰트 사이즈
fontSize: 20,
//폰트 두께
fontWeight: "700",
//위 공간으로 부터 이격
marginTop: 50,
//왼쪽 공간으로 부터 이격
marginLeft: 20,
},
weather: {
alignSelf: "flex-end",
paddingRight: 20,
},
introduction: {
alignSelf: "flex-end",
backgroundColor: "pink",
width: 100,
height: 40,
borderRadius: 10,
marginTop: 10,
marginRight: 20,
},
introText: {
color: "white",
fontWeight: "bold",
alignSelf: "center",
marginTop: 10,
},
mainImage: {
//컨텐츠의 넓이 값
width: "90%",
//컨텐츠의 높이 값
height: 200,
//컨텐츠의 모서리 구부리기
borderRadius: 10,
marginTop: 20,
//컨텐츠 자체가 앱에서 어떤 곳에 위치시킬지 결정(정렬기능)
//각 속성의 값들은 공식문서에 고대로~ 나와 있음
alignSelf: "center",
},
middleContainer: {
marginTop: 20,
marginLeft: 10,
height: 60,
},
middleButtonAll: {
width: 100,
height: 50,
padding: 15,
backgroundColor: "#20b2aa",
borderColor: "deeppink",
borderRadius: 15,
margin: 7,
},
middleButton01: {
width: 100,
height: 50,
padding: 15,
backgroundColor: "#fdc453",
borderColor: "deeppink",
borderRadius: 15,
margin: 7,
},
middleButton02: {
width: 100,
height: 50,
padding: 15,
backgroundColor: "#fe8d6f",
borderRadius: 15,
margin: 7,
},
middleButton03: {
width: 100,
height: 50,
padding: 15,
backgroundColor: "#9adbc5",
borderRadius: 15,
margin: 7,
},
middleButton04: {
width: 100,
height: 50,
padding: 15,
backgroundColor: "#f886a8",
borderRadius: 15,
margin: 7,
},
middleButtonText: {
color: "#fff",
fontWeight: "700",
//텍스트의 현재 위치에서의 정렬
textAlign: "center",
},
middleButtonTextAll: {
color: "#fff",
fontWeight: "700",
//텍스트의 현재 위치에서의 정렬
textAlign: "center",
},
cardContainer: {
marginTop: 10,
marginLeft: 10,
},
});
파이어베이스에서 가져온 데이터를 tip_temp에 넣고
setTip(tip_temp)로 tip을 tip_temp로 바꿔주려고 하는데
콘솔을 보시면
===========================================콘솔 내용============================================
useEffect를 실행합니다.
!!파이어베이스에서 가져왔습니다!!
Object {
"0": Object {
"category": "생활",
"date": "2020.09.09",
"desc": "먹다 남은 피자는 수분이 날라가기 때문에 처음처럼 맛있게 먹을 수 없는데요. 이럴 경우 그릇에 물을 받아 전자레인지 안에서 1분 30초에서 2분 정도 함께 돌려주면 촉촉하게 먹을 수 있습니다. 물이 전자레인지 안에서 수증기
를 일으키고, 피자에 촉촉함을 더해줍니다.",
"idx": 0,
"title": "먹다 남은 피자를 촉촉하게!",
},
"1": Object {
"category": "생활",
"date": "2020.09.09",
"desc": "바나나에 날파리가 꼬이거나 금방 익어버리는 것을 예방하기 위한 방법인데요. 바나나 양쪽 끝을 자른 후, 보관용 케이스나 비닐봉지에 묶어 밀봉합니다. 그리고 냉장고에 넣어주면 되는데요. 하루에 1~2개씩 꺼내서 싱싱하게 먹
을 수 있습니다.",
"idx": 1,
"title": "바나나를 싱싱하게 보관하기",
},
"7": Object {
"category": "반려견",
"date": "2020.09.09",
"desc": "분리불안교육은 반려견에게 혼자 남는 법을 알려주기 위한 것이 아니라, 보호자가 ‘언제나 너에게 돌아올 거야’라고 알려주는 교육이다. 반려견과 5초 동안 떨어져 있다가 다시 문을 열고 들어가 손 냄새를 맡게 해주는 훈련을
하루 10번씩 7일 동안 반복하는 ‘5,10,7 법칙’을 통해 반려견의 마음을 편안하게 해줄 수 있다.",
"idx": 7,
"title": "반려견이 주인과 떨어지는 것을 무서워 할 때",
},
}
ready를 false로 바꿉니다.
111111111111 Object {
"0": Object {
"category": "생활",
"date": "2020.09.09",
"desc": "먹다 남은 피자는 수분이 날라가기 때문에 처음처럼 맛있게 먹을 수 없는데요. 이럴 경우 그릇에 물을 받아 전자레인지 안에서 1분 30초에서 2분 정도 함께 돌려주면 촉촉하게 먹을 수 있습니다. 물이 전자레인지 안에서 수증기
를 일으키고, 피자에 촉촉함을 더해줍니다.",
"idx": 0,
"title": "먹다 남은 피자를 촉촉하게!",
},
"1": Object {
"category": "생활",
"date": "2020.09.09",
"desc": "바나나에 날파리가 꼬이거나 금방 익어버리는 것을 예방하기 위한 방법인데요. 바나나 양쪽 끝을 자른 후, 보관용 케이스나 비닐봉지에 묶어 밀봉합니다. 그리고 냉장고에 넣어주면 되는데요. 하루에 1~2개씩 꺼내서 싱싱하게 먹
을 수 있습니다.",
"idx": 1,
"title": "바나나를 싱싱하게 보관하기",
},
"7": Object {
"category": "반려견",
"date": "2020.09.09",
"desc": "분리불안교육은 반려견에게 혼자 남는 법을 알려주기 위한 것이 아니라, 보호자가 ‘언제나 너에게 돌아올 거야’라고 알려주는 교육이다. 반려견과 5초 동안 떨어져 있다가 다시 문을 열고 들어가 손 냄새를 맡게 해주는 훈련을
하루 10번씩 7일 동안 반복하는 ‘5,10,7 법칙’을 통해 반려견의 마음을 편안하게 해줄 수 있다.",
"idx": 7,
"title": "반려견이 주인과 떨어지는 것을 무서워 할 때",
},
}
222222222222 Array [
Object {
"category": "재테크",
"date": "2020.09.09",
"desc": "‘새는 돈’에는 미처 몰랐던 카드 포인트, 휴면예금이나 환급금도 포함됩니다. 확실히 파악하지 못한 잠자는 돈을 찾아보고 자투리 돈들을 모으는 것도 중요합니다. 케이블방송, 위성방송 서비스를 이용하면서 중복 납부한 요금,
셋톱박스 보증금 등 돌려받지 않은 돈이 있는지 확인 해보세요. 또, 카드 포인트 통합 조회 서비스를 이용해 여러 개의 카드 포인트가 모두 얼마인지 체크해두는 것이 좋습니다. 보험해약 환급금, 휴면 보험금이나 휴면 예금을 찾아보고 돌려
받는 일도 요즘에는 어렵지 않습니다.",
"idx": 3,
"image": "https://storage.googleapis.com/sparta-image.appspot.com/lecture/money1.png",
"title": "잠자는 내 돈을 찾아라",
},
]
===========================================콘솔 내용============================================
이렇게 setTip함수를 실행한 후에도 tip이 아직 초기값 3번 인덱스 내용에서 변경되지 않은게 보여서
- setTip함수가 적용되는 시점이 언제인지?
- tip_temp라는 함수 명을 그냥 tip과 같이 tip으로 사용해도 되는지?
궁금합니다!
