props 원형

import React from 'react';

function Hi(props) {
  return <div style={{ color: props.color }}>안녕 {props.name}</div>
}

export default Hi;

기존의 props는 위의 코드와 같이 props의 children을 사용하기 위해 컴포넌트 내부에서 props.children처럼 사용해주는 불편함이 존재한다.

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

import React from 'react';

function Hi({ color, name }) {
  return <div style={{ color }}>안녕 {name}</div>
}

export default Hello;

위의 코드에서 비구조화 할당을 사용하여, props를 사용하지 않고 children을 바로 제어할 수 있도록 만든 코드이다.