props

컴포넌트 내부의 immutable data(변하지 않는 데이터)를 처리할 때 사용
JSX 내부에 {this.props.프로퍼티이름} 으로 작성
컴포넌트의 속성에서 <Component 프로퍼티이름="값" /> 으로 값 전달
this.props.children은 기본 props로,
컴포넌트 내에 작성한 값이 들어감 <Component>값</Component>

class Codelab extends React.Component{
  render(){
    
    return(
      <div>
        <h1>Hello {this.props.name}</h1>
        <div>{this.props.children}</div>
      </div>
    );
  }
}

class App extends React.Component{
  render(){
    return(
      <Codelab {this.props.name}>
        {this.props.children}
      </Codelab>
    );
  }
}

ReactDOM.render(
  <App name="velopert">value</App>, document.getElementById('root')
)

props의 기본 값 설정

컴포넌트의 선언이 끝난 후 defaultProps 객체로 작성하여 설정

Component.defaultProps= {기본 값}

class App extends React.Component{
  render(){
    return(
      <div>{this.props.value}</div>
    );
  }
}

App.defaultProps = {
  value :0
}

props type 검증

** React v15.5 부터 패키지 변경, prop-types 라이브러리 추가 후 사용
     1. import propTypes from 'prop-types'
     2. propTypes.PropTypes.타입 으로 사용해야함

Component.propTypes = {
     프로퍼티이름: React.PropTypes.타입
};

props type의 종류
sting
number
any: 타입에 관계 없음

옵션
.isRequired: 필수 입력

** 리액트 메뉴얼 참고

prop types 사용 예

import * as propTypes from "https://cdn.skypack.dev/prop-types@15.7.2";
class Codelab extends React.Component{
  render(){
   
    return(
      <div>
        <h1>Hello {this.props.name}</h1>
        <h2>{this.props.number}</h2>
        <div>{this.props.children}</div>
      </div>
    );
  }
}


Codelab.propTypes = {
  name: propTypes.PropTypes.string,
  number: propTypes.PropTypes.number.isRequired
  
};

Codelab.defaultProps = {
  name:'val'
}


class App extends React.Component{
  render(){
    
    return(
      <Codelab name={this.props.name}>
          {this.props.number}
      </Codelab>
    );
  }
}

App.defaultProps = {
  value:'value'
}

ReactDOM.render(
  <App>child</App>, document.getElementById('root')
)

react min

react와 react-dom의 min 버전에서는 오류를 보여주지 않는다
위의 코드에서 number에 대한 Props를 설정하지 않았음
-> defaultProps에서 작성하거나 컴포넌트 속성 값으로 전달

PropTypes의 의의

PropTypes는 필수 요소가 아니다.
코드의 디버깅을 위해(안정성), 유지보수를 위해(효율성) 사용한다.