3.3.5 비구조화 할당 문법을 통해 props 내부 값 추출하기

    현재 MyComponent에서 props 값을 조회할 때마다 props.name, props.children과 같이 props.이라는 키워드를 앞에 붙여 주고 있습니다. 이러한 작업을 더 편하게 하기 위해 ES6의 비구조화 할당 문법을 사용하여 내부 값을 바로 추출하는 방법을 알아보겠습니다.

    MyComponent를 다음과 같이 수정해 보세요.

    MyComponent.js

    import React from 'react';
     
    const MyComponent = props => {
      const { name, children } = props;
      return (
        <div>
          안녕하세요,  이름은 {name}입니다. <br />
          children 값은 {children}
          입니다.
        </div>
      );
    };
     
    MyComponent.defaultProps = {
      name: '기본 이름'
    };
     
    export default MyComponent;

     

    이렇게 코드를 작성하면 name 값과 children 값을 더 짧은 코드로 사용할 수 있습니다.

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.