비구조화 할당 (구조분해할당)

코드를 더 짧게 작성하기 위해 객체에서 값을 추출하는 문법을 비구조화 할당이라고 부른다. 함수의 파라미터 부분에서도 사용할 수 있다. 함수의 파라미터가 객체라면 그 값을 바로 비구조화해서 사용할 수 있다

함수안 에서 사용하는 경우

-비구조화할당 전

handelInput = e => {
  this.setState({
    value: e.target.value,
  })
}

-비구조화할당 후

handelInput = e => {
  const {value} = e.target;
  this.setState({
    value: value,
  })
}

함수형 컴포넌트 경우

함수형 컴포넌트는 api,state를 사용하지 않고 props만 전달해주면 뷰를 렌더링만 해준다.

- 비구조화할당 사용

const MyComponent = ({ name, children}) => {
  return {
    <div> 
      안녕! 내 이름은 {name}이야 
    </div>
    );
  };
  
Mycomponent.defaultProps = {
  name : '기본이름'
};
  

render 함수 안에서 사용하는 경우

함수에서 뿐만 아니라 render 함수 안에서도 state,props 객체에 비구조화 할당을 적용할 수 있다

render() {
  const {email} = this.state;
  const { handleInput } =this;