props와 구조분해할당

 - 프로퍼티, props(properties의 줄임말) 라고 한다.
 - 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다.(단방향 데이터 흐름 갖는다.)
 - 프로퍼티는 수정할 수 없다는 특징이 있다.(자식입장에선 읽기 전용인 데이터이다.)

props.children 은 어떠한 작업도 없이 기본적으로 설정되는 예약어이다. 이를 사용하면 사용자 지정 컴포넌트에 있는 열고 닫는 태그 사이에 있는 컨텐츠의 내용을 표시할 수 있도록 해준다.

함수 컴포넌트에서의 구조 분해 할당

1. 함수의 인자 안에서 분해
const Greet = ({ name, heroName }) => {
  return (
    <div>
      <h1>
        Hello {name} a.k.a {heroName} 
      </h1>
    </div>
  )
}

2. 함수 본문 안에서 분해
const Greet = props => {
  const { name, heroName } = props;
  // 이  코드도 원래는 props.name,props.heroName으로 참조해야했던 것.
  return (
    <div>
      <h1>
        Hello {name} a.k.a {heroName}
      </h1>
    </div>
  )
}

const formName = form.name;
const formDesc = form.description;
const formOne = form.one;
const formTwo = form.two;

다음코드를 이렇게 줄일 수 있다.

const { name, desctiprion, one, two } = form;

const {name,level,item} = {this.props}
const {state1,state2} = {this.state}서도 구별해줄 수 있는 
this 를 쓰게 되는거 또는 onClick같은 이벤트가 있는 경우 
이벤트가 발생하는 객체가 this가 됨. 

//interface 타입으로 IChildrenType을 정의
interface IChildrenType {
  children: JSX.Element; 
  //jsx에서 사용할수있는 element 타입으로 지정됨.
}

function Layout({ children }: IChildrenType) {
  // children에 IchildrenType에 포함된 내용을 적용.
  // children : this.JSX.element 이런걸까?? 굳이 중요하려나
  return <main className={styles.globalLayout}>{children}</main>;
}