리액트 기초지식
1. 속성 (Props)
-
속성은 쉽게 생각해서 컴포넌트에 데이터를 전달한다는 것
-
그 전달 모습은 키와 벨류의 형태
ex) <Card image={'이미지 주소'}/>
image라는 속성이름에{'이미지 주소'}값을 가진다.
➡ 속성을 부여받은 컴포넌트에서 해당 속성 값을 받아서 사용할 수 있다.
➡ <비구조 할당 방식>: 딕셔너리에서 키값을 바로 취해서 변수로써 함수안에서 즉시 사용할 수 있는 방식🤜규칙!
1. 컴포넌트에 속성(데이터)을 부여해줘서 전달할땐, 키와 벨류(`content={content}`) 형태로 전달해줘야 할 것 2. 컴포넌트를 반복문 돌릴땐, 컴포넌트마다 고유하다는 것을 표현하기 위해, map에서 나오는 인덱스(i)를 `key = {i}` 속성 전달 형태로 꼭 넣을것!
2.상태(useState)와 useEffect
🙂useState
- 상태 : 컴포넌트에서 보유/관리되는 데이터
- 리액트에서 상태(state)는 리액트 라이브러리에서 제공해주는 useState로 생성하고 setState 함수로 정/변경 할 수 있음
- useState =데이터가 변경되면 화면이 바뀐다. 감지/반영/ 컴포넌트 값 전달
- UI = component(state)
🙂useEffect
- 화면이 그려진다음 가장 먼저 실행되는 함수
useEffect(()=>{
...화면이 그려진 다음 가장 먼저 실행되야 할 코드 작성 공간
},[])- 보통 useEffect는 데이터 준비할 때 사용(데이터를 어디로 부터 받은 후 상태(state)에 반영)
- 처음부터 데이터가 없어서 , 꺼내올수 없는 오류는
useEffect를 이용하여 로딩화면을 만들어줌으로써 해결이 가능!
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 구문 안에서는 {슬래시 + * 방식으로 주석
*/
<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}>
{/* 하나의 카드 영역을 나타내는 View */}
{
tip.map((content,i)=>{
return (<Card content={content} key={i}/>)
})
}
</View>
</ScrollView>)
}1) ready 값이 true이므로 return 구문에서 ? 물음표 바로 뒤의 Loading 컴포넌트가 화면에 그려짐
2) 화면이 그려지고 난다음, 1초 이따가 상태값들이 채워지고 변경됨
3) ready 상태 값이 false가 됨
4) 상태값이 변경되었으므로 화면이 다시 그려짐
5) ready 값이 false 이므로 return 구문에서 : 콜론 뒤의 MainPage 컴포넌트가 화면에 그려짐
3-8강 카테고리 강의는 아직 이해가 잘 되질 않는다..강의만 들으면 알 것 같은데 코드를 보면 state,순서들이 헷갈린다.. 내일 다시 봐야지!
winwin