구조 분해 할당

es6는 배역의 값이나 객체 속성을 고유 변수로 풀 수 있게끔 지원한다.

Props 구조 분해 할당

일반적인 props를 파라미터로 받는 경우

import React from "react";

const Greet = (props) => {
    return (
        <div>
            <h1>Hello {props.name} {props.heroName}</h1>
        </div>
    )
}

export default Greet;

props 구조 분해 할당1

const Greet = ({name, heroName}) => {
    return (
        <div>
            <h1>Hello {name} {heroName}</h1>
        </div>
    )
}

props 구조 분해 할당2

const Greet = (props) => {
    const {name, heroName} = props;
    return (
        <div>
            <h1>Hello {name} {heroName}</h1>
        </div>
    )
}

구조 분해 할당으로 props를 할당하여 변수를 선언할 경우 props를 계속 입력해야하는 번거로움을 덜 수 있다.