React 정복기(5) - 비구조화 할당 문법

함수형 컴포넌트에서 props 값을 조회할 때마다 props.name, props.age 처럼 props. 키워드를 붙여 사용하고 있다.
ES6가 제공하는 비구조화 할당 문법을 사용하면 내부 값을 바로 추출 할 수 있다

비구조화 할당 문법을 적용한 Puppy 컴포넌트

Puppy.js

import React, { Component } from 'react';

const Puppy = (props) => {
    const {name, age} = props
    return(
        <div>
            <div>내 강아지 이름은 {name} 입니다.</div>
            <div>내 강아지 나이는 {age} 입니다.</div>
            
        </div>
    );
}

Puppy.defaultProps = {
    name: '뽀뽀'
};

export default Puppy;

객체에서 값을 추출하는 문법을 비구조화 할당(destructuring assignment)라고 부르며, 이 문법은 구조 분해 문법이라고도 불리며, 함수의 파라미터 부분에서도 사용할 수 있음

함수의 파라미터 부분에 비구조화 할당을 적용한 Puppy 컴포넌트

Puppy.js

import React, { Component } from 'react';

const Puppy = ({name, age}) => {
    return(
        <div>
            <div>내 강아지 이름은 {name} 입니다.</div>
            <div>내 강아지 나이는 {age} 입니다.</div>

        </div>
    );
}

Puppy.defaultProps = {
    name: '뽀뽀'
};

export default Puppy;