리액트 기본

1. 컴포넌트(Component) : 정해진 요소를 사용하여 만든 화면의 일부(block)
porps를 input하고 UI가 어떻게 보여야 하는지 정의하는 React Element를 output하는 함수

2. 상태(State) : 컴포넌트에서 데이터를 관리하기 위한 방법
== 사용할 데이터, 상황에 따라 변경되어야 하는 값

3. 속성(Props) : 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식
== 데이터 전달, 컴포넌트 내부에서 값을 변경할 수 없다.


4. useEffect : 화면에 컴포넌트가 그려지면 처음 실행해야 하는 함수들을 모아두는 곳

---

2. State

컴포넌트 내에서 보유/관리 되는 데이터를 state라 한다.
state는 리액트 라이브러리에서 제공해주는 useState로 생성하고 setState 함수로 정하거나 변경 가능

React는 state로 관리되는 데이터가 변경되면 화면이 바뀐다.

// UI은 component에 들어가는 state따라 변경된다
UI = component(state)

---

3. Props

컴포넌트에 데이터를 전달하는데 그 모습은 key-value형태.
ex) Text태그의 numberOfLines 속성...
만든 컴포넌트에도 속성을 부여할 수 있다.

//Main.js
<View style={styles.cardContainer}>
        {/* 하나의 카드 영역을 나타내는 View */}
        {cateState.map((value, i) => {
          return <Card content={value} key={i} />;
        })}
</View>

//Card.js
export default function Card({ value }) {
  return (
    //카드 자체가 버튼역할로써 누르게되면 상세페이지로 넘어가게끔 TouchableOpacity를 사용
    <TouchableOpacity>
      <Image style={styles.cardImage} source={{ uri: value.image }} />
      <View style={styles.cardText}>
        <Text style={styles.cardTitle} numberOfLines={1}>
          {value.title}
        </Text>
        <Text style={styles.cardDesc} numberOfLines={3}>
          {value.desc}
        </Text>
        <Text style={styles.cardDate}>{value.date}</Text>
      </View>
    </TouchableOpacity>

Card.js에선 value안에 있는 data 쓰기 위해 비할당구조(key.data)로 데이터 할당함

---

4. useEffect

useEffect(()=>{

	...화면이 그려진 다음 가장 먼저 실행되야 할 코드 작성 공간

},[deps])

useEffect는 데이터를 서버나 어디선가에서 받은 후 state에 반영할때 사용한다.

✔️순서
1. 화면이 그려진다.
2. useEffect가 데이터를 준비한다.
3. ❗️❗️state 데이터가 업데이트된 후 화면이 다시 그려진다.❗️❗️

🔑 deps

deps에 특정 값을 넣게 된다면 컴포넌트가 처음 mount될 때에도 호출되고 지정한 값이 바뀔 때도 호출이 된다. 그리고 deps에 특정 값이 있다면 unmount시에도 호출되고 값이 바뀌기 직전에도 호출이 된다. []를 지정해야지만 component가 최초로 렌더링이 완료되었을 때 1회만 동작한다.

//useState 사용법
//[state,setState] 에서 state는 이 컴포넌트에서 관리될 상태 데이터를 담고 있는 변수, setState는 state를 변경시킬때 사용해야하는 함수

//모두 다 useState가 선물해줌
//useState()안에 전달되는 값은 state 초기값
//()안 초기 상태값으로 [],bool,dic,string등.. 다양하게 들어갈 수 있음
  const [state,setState] = useState([])
	

//하단의 return 문이 실행되어 화면이 그려진다음 실행되는 useEffect 함수
//내부에서 data.json으로 부터 가져온 데이터(data)를 state 상태에 담고 있음
  useEffect(()=>{
    setState(data)
  },[])


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