use effect error | 스파르타 커뮤니티

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

use effect error

[왕초보] 나만의 수익성 앱, 앱개발 종합반

3주차

김*찬

・

추천

・

조회수

답변 완료

import React,{useState,useEffect} from 'react';

import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native';

const main = 'https://storage.googleapis.com/sparta-image.appspot.com/lecture/main.png'

import data from '../data.json';

import Card from '../components/Card';

import Loading from '../components/Loading';

export default function MainPage() {

//useState 사용법

//[state,setState] 에서 state는 이 컴포넌트에서 관리될 상태 데이터를 담고 있는 변수

//setState는 state를 변경시킬때 사용해야하는 함수

//모두 다 useState가 선물해줌

//useState()안에 전달되는 값은 state 초기값

const [state,setState] = useState([])

//하단의 return 문이 실행되어 화면이 그려진다음 실행되는 useEffect 함수

//내부에서 data.json으로 부터 가져온 데이터를 state 상태에 담고 있음

const [ready,setReady] = useState(true)

useEffect(()=>{

//뒤의 1000 숫자는 1초를 뜻함

//1초 뒤에 실행되는 코드들이 담겨 있는 함수

setTimeout(()=>{

setState(data)

setReady(false)

},1000)

},[])

//data.json 데이터는 state에 담기므로 상태에서 꺼내옴

let tip = state.tip;

let todayWeather = 10 + 17;

let todayCondition = "흐림"

//return 구문 밖에서는 슬래시 두개 방식으로 주석

return ready ? <Loading/> : (

return 구문 안에서는 {슬래시 + * 방식으로 주석

<Text style={styles.weather}>오늘의 날씨: {todayWeather + '°C ' + todayCondition} </Text>

</ScrollView>

{/* 하나의 카드 영역을 나타내는 View */}

{

tip.map((content,i)=>{

return (<Card content={content} key={i}/>)

})

}

</View>

</ScrollView>)

}

const styles = StyleSheet.create({

container: {

//앱의 배경 색

backgroundColor: '#fff',

title: {

//폰트 사이즈

fontSize: 20,

//폰트 두께

fontWeight: '700',

//위 공간으로 부터 이격

marginTop:50,

//왼쪽 공간으로 부터 이격

marginLeft:20

weather:{

alignSelf:"flex-end",

paddingRight:20

mainImage: {

//컨텐츠의 넓이 값

width:'90%',

//컨텐츠의 높이 값

height:200,

//컨텐츠의 모서리 구부리기

borderRadius:10,

marginTop:20,

//컨텐츠 자체가 앱에서 어떤 곳에 위치시킬지 결정(정렬기능)

//각 속성의 값들은 공식문서에 고대로~ 나와 있음

alignSelf:"center"

middleContainer:{

marginTop:20,

marginLeft:10,

height:60

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

middleButtonText: {

color:"#fff",

fontWeight:"700",

//텍스트의 현재 위치에서의 정렬

textAlign:"center"

middleButton04: {

width:100,

height:50,

padding:15,

backgroundColor:"#f886a8",

borderRadius:15,

margin:7

cardContainer: {

marginTop:10,

marginLeft:10

card:{

flex:1,

//컨텐츠들을 가로로 나열

//세로로 나열은 column <- 디폴트 값임

flexDirection:"row",

margin:10,

borderBottomWidth:0.5,

borderBottomColor:"#eee",

paddingBottom:10

cardImage: {

flex:1,

width:100,

height:100,

borderRadius:10,

cardText: {

flex:2,

flexDirection:"column",

marginLeft:10,

cardTitle: {

fontSize:20,

fontWeight:"700"

cardDesc: {

fontSize:15

cardDate: {

fontSize:10,

color:"#A6A6A6",

});

----------------------------------Loading.js

import React from 'react';

import {View,Text,StyleSheet} from 'react-native';

export default function Loading(){

return(<View style={styles.container}><Text style={styles.title}>준비중입니다...</Text></View>)

}

const styles = StyleSheet.create({

container: {

//앱의 배경 색

flex:1,

justifyContent:'center',

alignItems:'center',

backgroundColor: '#fdc453',

title: {

fontSize:20,

fontWeight:'700'

}

})

----------------------------------Card.js

import React,{useState,useEffect} from 'react';

import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native';

const main = 'https://storage.googleapis.com/sparta-image.appspot.com/lecture/main.png'

import data from '../data.json';

import Card from '../components/Card';

export default function MainPage() {

//useState 사용법

//[state,setState] 에서 state는 이 컴포넌트에서 관리될 상태 데이터를 담고 있는 변수

//setState는 state를 변경시킬때 사용해야하는 함수

//모두 다 useState가 선물해줌

//useState()안에 전달되는 값은 state 초기값

const [state,setState] = useState([])

//하단의 return 문이 실행되어 화면이 그려진다음 실행되는 useEffect 함수

//내부에서 data.json으로 부터 가져온 데이터를 state 상태에 담고 있음

useEffect(()=>{

setState(data)

},[])

// let tip = data.tip;

//data.json 데이터는 state에 담기므로 상태에서 꺼내옴

let tip = state.tip;

let todayWeather = 10 + 17;

let todayCondition = "흐림"

//return 구문 밖에서는 슬래시 두개 방식으로 주석

return (

return 구문 안에서는 {슬래시 + * 방식으로 주석

<Text style={styles.weather}>오늘의 날씨: {todayWeather + '°C ' + todayCondition} </Text>

</ScrollView>

{/* 하나의 카드 영역을 나타내는 View */}

{

tip.map((content,i)=>{

// return (<View style={styles.card} key={i}>

// <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>

// </View>)

return (<Card content={content} key={i}/>)

})

}

</View>

</ScrollView>

);

}

const styles = StyleSheet.create({

container: {

//앱의 배경 색

backgroundColor: '#fff',

title: {

//폰트 사이즈

fontSize: 20,

//폰트 두께

fontWeight: '700',

//위 공간으로 부터 이격

marginTop:50,

//왼쪽 공간으로 부터 이격

marginLeft:20

weather:{

alignSelf:"flex-end",

paddingRight:20

mainImage: {

//컨텐츠의 넓이 값

width:'90%',

//컨텐츠의 높이 값

height:200,

//컨텐츠의 모서리 구부리기

borderRadius:10,

marginTop:20,

//컨텐츠 자체가 앱에서 어떤 곳에 위치시킬지 결정(정렬기능)

//각 속성의 값들은 공식문서에 고대로~ 나와 있음

alignSelf:"center"

middleContainer:{

marginTop:20,

marginLeft:10,

height:60

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

middleButtonText: {

color:"#fff",

fontWeight:"700",

//텍스트의 현재 위치에서의 정렬

textAlign:"center"

middleButton04: {

width:100,

height:50,

padding:15,

backgroundColor:"#f886a8",

borderRadius:15,

margin:7

cardContainer: {

marginTop:10,

marginLeft:10

card:{

flex:1,

//컨텐츠들을 가로로 나열

//세로로 나열은 column <- 디폴트 값임

flexDirection:"row",

margin:10,

borderBottomWidth:0.5,

borderBottomColor:"#eee",

paddingBottom:10

cardImage: {

flex:1,

width:100,

height:100,

borderRadius:10,

cardText: {

flex:2,

flexDirection:"column",

marginLeft:10,

cardTitle: {

fontSize:20,

fontWeight:"700"

cardDesc: {

fontSize:15

cardDate: {

fontSize:10,

color:"#A6A6A6",

});

--------------------------------------------------error

댓글 알림