[React] 기초 개념 (3)

• props
  하위 컴포넌트한테 properties를 넘겨줄 수 있다. 이때 커스텀한 HTML 속성을 사용한다.
• Array props 넘기기
   대괄호를 이용해서 배열을 넘겨줄 수 있다. 하위 컴포넌트에서 받을 때는 join()과 같은 배열 함수를 이용하여 props에 접근할 수 있다.

<!--상위 컴포넌트-->
<ParentComponent>
	<ChildComponent colors={["green", "blue", "red"]}/>
<ParentComponent>

<!--하위 컴포넌트에서 받을때-->
const ChildComponent = (props) => <p>{props.colors.join(', ')}</p>

<!--보여질때-->
<p>green, blue, red</p>

 

• 기본 props
  props에 기본 값을 설정할 수 있다. 기본 값을 설정하면 따로 props를 정의하지 않아도 설정해 놓은 값으로 정의된다. 하지만 값으로 null을 전달하면 기본 값이 아닌 null로 정의된다.

 

• 예상하는 props를 정의하도록 propTypes를 사용한다.
  리액트는 컴포넌트가 올바른 타입의 props를 받는지 인증하기 위해 타입을 체크해주는 유용한 기능을 제공한다.
  예를 들면, API를 이용해서 데이터를 가져올때 내가 array로 받기를 예상하면, propTypes를 사용해 array type을 설정할 수 있다. 그러면 만약 다른 타입의 데이터가 돌아오는지 확인할 수 있다.
  defaultProps 설정하듯이 같은 방식으로 propTypes도 설정해주면 된다.

// Items 라는 이름을 가진 컴포넌트 정의
const Items = (props) => {
  return <h1>Current Quantity of Items in Cart: {props.quantity}</h1>
};

// 원하는 데이터 타입을 props에 요구할 수 있음
Items.propTypes = { quantity: PropTypes.number.isRequired };

//props의 기본 값 설정 
Items.defaultProps = {
  quantity: 0
};


class ShoppingCart extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <Items />
  }
};

 

** freeCodeCamp에서 공부하고 있습니다. **

 

React 기초 개념 3