스파르타_3주차 (Component, Props, State, useState, useEffect)

▶ 리액트 네이티브 기본 구조 이해하기

 

1. 컴포넌트 (Component)

 

화면을 구성하는 전체 또는 일부분 각각의 요소들

1) 주요 포인트

화면 내에 쓸만한 UI. 요소를 조각내서 따로 저장해놓고

다른 페이지, 다른 작업에서 빠르게 불러오려는 목적이 크다고 보여짐 

 

2) 컴포넌트화 하기

- Components 폴더 생성

- Card.js 파일 생성

 

Card.js 코드스피넷 예시)

import React from "react" import {View,Text,Image,StyleSheet} from "react-native"; export default function Card({content}) {     return (<View style={styles.card}>         <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>) } const styles = StyleSheet.create({   card:{     flex:1,     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",   } })

- MainPage.js 에서 Card 콘텐츠 불러오기

 

MainPage.js 코드스피넷 예시)

import React 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() {   let tip = data.tip;   let todayWeather = 10 + 17;   let todayCondition = "흐림"   return (     <ScrollView style={styles.container}>       <Text style={styles.title}>나만의 꿀팁</Text>       <Text style={styles.weather}>오늘의 날씨: {todayWeather + '°C ' + todayCondition} </Text>       <Image style={styles.mainImage} source={{uri:main}}/>       <ScrollView style={styles.middleContainer} horizontal indicatorStyle={"white"}>         <TouchableOpacity style={styles.middleButton01}><Text style={styles.middleButtonText}>생활</Text></TouchableOpacity>         <TouchableOpacity style={styles.middleButton02}><Text style={styles.middleButtonText}>재테크</Text></TouchableOpacity>         <TouchableOpacity style={styles.middleButton03}><Text style={styles.middleButtonText}>반려견</Text></TouchableOpacity>         <TouchableOpacity style={styles.middleButton04}><Text style={styles.middleButtonText}>꿀팁 찜</Text></TouchableOpacity>       </ScrollView>       <View style={styles.cardContainer}>         {            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,     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",   }, });

* MainPage에 있던 코드를 Card.js 로 옮기고

메인페이지에선 카드 내용을 불러오는 개념.

이렇게 필요한 카드들을 불러오면서 메인페이지를 꾸려나간다

 

2. 속성 (Props)

 

키와 벨류 의 형태로 컴포넌트에 데이터를 전달하는 역할

<Card image={'이미지 주소'}/>

이렇게 적으면 Card라는 컴포넌트는 image라는 속성에 이미지 주소라는 값을 가진다 라는 의미

 

* 규칙 정리

 

1) 속성(데이터)을 부여해서 전달하려면

(content={content})

 

2) 반복문을 돌리려면

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

 

 

3. useState & useEffect

 

1) State

각 컴포넌트에 쌓여있는 정보들을 보통 데이터라 부르지만

리액트에선 상태(State)라고 부른다

 

UI = component(state)

'사용자 화면(UI)은 컴포넌트에 어떤 데이터(state)가 주입되고 변경되냐에 따라 변화된다'

 

* 이 데이터들을 생성할땐 useState로, 함수로 정하거나 변경할땐 setState로

 

2) useEffect

useEffect 는 리액트 기본 제공함수

 

: 화면이 그려진 다음에 가장 먼저 실행되는 함수

useEffect(()=>{ .....화면이 그려지고 가장 먼저 실행되어야할 코드 작성 공간..... },[])

 

3) 실습해보기

-먼저 data.json 파일에 필요한 데이터를 입력해놓고 

메인페이지와 연동한다

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';  일단 data.json 불러오고 import Card from '../components/Card'; export default function MainPage() {   const [state,setState] = useState([])  state 상태를 생성하고, 변경할 준비   useEffect(()=>{   useEffect 함수로 data를 불러와서 써먹겠다!!     setState(data)   },[]) -------data.json 데이터는 state에 담기므로 상태에서 꺼내오는 것----- let tip = state.tip; return (  . . ...... ... ...           })          }                </View>         </ScrollView>   ); }

 

이러면 화면이 그려지고

state에서 tip 키 값에 접근해서 데이터를 꺼내 map 반복문을 돌리려는데

생기는 오류

데이터가 아직 없는 상태라 생기는 오류

처음부터 데이터가 없기때문에 꺼내올 수 없는 오류

 

로딩화면을 생성해줌으로써 해결한다.

 

4. 로딩화면

 

앱 운영에 필수 페이지. 로딩화면

 

- Component 폴더에 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'     } })

- MainPage.js 에서

import Loading from '../components/Loading'; 추가입력 const [ready,setReady] = useState(true) useEffect(()=>{    setTimeout(()=>{       setState(data)       setReady(false)    },1000)      *1000은 1초를 의미 로딩시간설정 return ready ? <Loading/> : (                * ? = true값,    : = false 값 ) }

- ready 상태값을 추가해서 useEffect 안에 setTimeout이란 함수를 넣고

로딩되는 시간을 설정한다

 

- 화면 로딩 구조

ready = true -> return ? Loading 화면 출력

1000(1초) 후 상태값이 채워지면서 ready 값이 false 가 되고

false 값인 : 뒤 메인페이지 컴포넌트 화면이 출력