State

• 살면서 변할 수 있는 값(상태)
• 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값
• 외부의 영향을 받지않고 내부에서 변화함.

props

특징

• 컴포넌트의 속성(property)를 의미
• 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값.
• 부모 컴포넌트(상위 컴포넌트)로부터 전달 받은 값
• 객체 형태
• 읽기 전용

Props vs State

• props: 외부로부터 전달 받은 값 // 한번 설정되면 변하지 않는 값
• state: 내부에서 변화하는 값 //변할수 있는 값

---

State : 컴포넌트에서 변화가 필요한 데이터는 state로 정해야 한다.
state가 변경되면 --> re-rendering이 되면서 컴포넌트에는 반영이 된다.
함수 컴포넌트에서도 state를 사용할 수 있다.
state는 최상위 컴포넌트에서만 쓸 수 있는게 아니고 하위 컴포넌트에서도 사용할수 있다.(구지 최상위에서 몇번에 걸쳐서 관리하는것은 이상함)

Props : Props는 immutable한 데이터이다. (변하지 않는 값)
함수 컴포넌트 클래스 컴포넌트 모두 props를 사용할 수 있다.
props의 속성을 props로만 하는것은 지양하는것이 좋다. props.props가 안된다는말
props는 객체 타입으로 내려옴.(여러가지 데이터가 담김)

state & Props 활용 : useState는 state를 함수 컴포넌트 안에서 사용할 수있게 해준다.
useState를 사용하여 새로운 state를 선언할때 []라고 선언해야 한다.
useState의 전달인자는 state의 초기값. useState의 전달인자는 하나만 전달할 수 있다.(만약 두개를 사용한다고 해도 에러는 발생하지 않지만, 두번째 전달 인자를무시하거나 undefined가된다.)
useState가 배열을 반호나하기 때문에 구조분해 할당을 쓸때도 배열을 사용해야 한다.

props 전달 방법은 두가지가 있음

1. <Component attribute={value}>
 	props.attribute
2. <Component>태그와 태그 사이도 전달 가능해요!</Component>
	props.children

내려 내려줄 props가 객체라면 speard를 써서 값을 내려주면됨

function Say() {
  const props = {
    name: "walli"
  };
  return <Hello {...props} />;
}

React 이벤트 처리방식
1.이벤트 이름을 설정할때는 camelCase로 설정해야한다.
2.이벤트에 전달하는 값은 함수여야 한다
3.이벤트 핸들러를 설정할때는 호출연산자를 사용하면 안됨. 하게되면 바로실행해서 결과값이 전달이 되어버림(최초 rendering과 함께 같이 실행됨)
만약 인자를 주고 싶은경우에는 이벤트 핸들러에 추가로 화살표 함수를 사용(함수를 두개 쓴다는 느낌)

React 데이터 흐름
Top Down ==> React의 데이터 전달 주체는 부모 컴포넌트
자식 컴포넌트는 부모 컴포넌트로 데이터를 전달하는게 아닌 업데이트 하는것.