비구조화 할당(destructing assignment)

ES6의 비구조화 할당문법을 사용해, 내부값을 바로 추출하는 방법. props 값을 조회 할 때마다, props.[변수].. 이런식으로 키워드를 앞에 붙여주는 방식보다 편리하게 값조회가 가능함.

• 함수의 파라미터가 객체라면 그 값을 비구조화해서 사용.
• 구조 분해 문법 이라고도 함.
• 함수의 파라미터 부분에서도 사용가능.

> props에서 직접 추출

function App(props) {

  return (
    <Fragment >
      <div>{props.name}</div>
      <div>{props.children}</div>
    </Fragment>
  );
}

> 비구조화 할당방식

...
function App(props) {
const { name, children } = props;

  return (
    <Fragment >
      <div>{name}</div>
      <div>{children}</div>
    </Fragment>
  );
}
...