TIL_211215

리액트 기초지식

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,순서들이 헷갈린다.. 내일 다시 봐야지!