[React] Props, Prop-types

props는 컴포넌트의 재사용성을 가능하게 해주는 속성값들이다.

속성값들은 HTML태그내에도 있는데 예를들면 링크를 설정하는 <a>태그는 내부에 href="연결할 링크" 라는 속성(attribute)을 가지고 있기 때문에 href부분에 다양한 링크를 넣으면서 재사용할 수 있다.

우리가 만든 컴포넌트도 어떠한 기능을 가지고 있는 단위인데 이 기능을 다양하게 쓰여질수 있게 해주는 속성값이 props이다.
아래예시에서는 여러문장을 <h1>태그에 담아 내보내는 기능을 하는 Subject 컴포넌트가 있다.
기본적인 사용방법은 이지만 내부에 title이나 sub라는 props를 만들어 값을 전달해 주면 Subject컴포넌트 내부에서 this.props로 그 값을 읽어낼 수 있다.

class Subject extends Component{
  render(){
    return ( 
    <header>
      <h1> { this.props.title } </h1>
      <h1> { 컴포넌트안에 중괄호를 사용하면 } </h1>
      <h1> { prop으로 넘어온값에 접근가능 } </h1>
      {this.props.sub}
    </header>
      );
  }
}

class App extends Component {
  
  render(){
    return (
    <div className="App">
      // subject컴포넌트 내부에 속성으로 적은 title과 sub의 밸류값들이 실제 출력에 영향을 			미치게 하고싶다.
	<Subject title="WEB" sub="world wide web!"></Subject>
    <Content />
    </div>
      );
  }
}

PropTypes

부모컴포넌트로부터 내려오는 props에는 다양한 타입이 존재한다.
props의 양이 많아질수록 타입과 존재유무를 일일이 확인하기는 힘들어진다.
그래서 proptypes이라는 모듈로 props의 타입이 예상한대로 전달되고있는지,
반드시 필요한값들이 잘 오고있는지 확인할 수 있다.

//설치방법
npm i prop-types

//사용방법
import PropTypes from 'prop-types';

// prop-types를 사용하고싶은 컴포넌트의 하단에 작성해준다.
function Food({ name, picture, rating }) {
 return (
   <div>
     <h2>I like {name}</h2>
     <h4>{rating}/5.0</h4>
     <img src={picture} alt={name} />
   </div>
 );
}
// 여기 이렇게
Food.propTypes = {
 name: PropTypes.string.isRequired,
 picture: PropTypes.string.isRequired,
 rating: PropTypes.number // 없어도 된다.
};

실제로 전달되어지는 props가 prop-types에서 지정한 내용을 어긴다면 콘솔창에 관련 warning이 발생하게 된다.

참고 :https://ko.reactjs.org/docs/typechecking-with-proptypes.html#gatsby-focus-wrapper