[React] props / 비구조화 할당

props 는 properties 의 줄임말입니다. 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props 를 사용합니다.

 

 

import React from 'react';

function HelloWorld(props) {
  return <div style={{ color: props.color }}>반갑습니다 {props.name}</div>
}

export default HelloWorld;

 

로 사용하면 props 내부의 값을 조회 할 때마다 props. 를 입력해야 합니다. 함수의 파라미터에서 비구조화 할당 (혹은 구조 분해라고도 불릅니다) 문법을 사용하면 아래와같이 좀 더 코드를 간결하게 작성 할 수 있습니다.

 

 

결과는 똑같이 나옵니다.

 

 

defaultProps 로 기본값 설정도 가능합니다.

참고> 

https://react.vlpt.us/basic/05-props.html