[React] 03. はんのうしちゅう

💚props

propertiesの略語
構成部品のプロパティの設定propsを設置する方法はいろいろあります.

💛 JSXコードでpropsを設定する

JSXの内部にpropsを設定する方法は、前述したJavaScript式を使用する方法と同じである.
下記のコードに従って{}で設定できます!

const Introduce = (props) => {
    return (
        <div>
            <h1>안녕하세요!</h1>
            <p>{props.name}의 블로그입니다.</p>
        </div>
    );
}

💛 propsを非構造割当に設定する

次の設定は、Structure以外の割り当てで行うこともできます.

const Introduce = (props) => {
    const {name, major} = props;
    return (
        <div>
            <h1>안녕하세요!</h1>
            <p>이름은 {name}이고, 전공은 {major}입니다.</p>
        </div>
    );
}

Introduceという名前のエレメントにnameのプロパティ値を設定できます.

ReactDOM.render(
    <Introduce name ="송우든" major="컴퓨터공학과"/>,
  document.getElementById('root')
);

これまで,関数型素子にpropsを設ける方法をまとめた.クラス要素にpropsを設定する方法を振り返ってみましょう.
クラスエレメントにpropsを使用する場合、render()関数にthisを使用して、以下に示すように設定できます.

class Introduce extends Component {

    render(){
        const { name, major} = this.props;
        return (
            <div>
                <h1>안녕하세요!</h1>
                <p>이름은 {name}이고, 전공은 {major}입니다.</p>
            </div>
        );
    }
}

💚propsのデフォルト設定と検証

propsでデフォルト値を設定する場合は、defaultPropsを使用して設定できます.컴포넌트명.defaultProps = {}の形態で使用される.

Introduce.defaultProps = {
    name : "송우든"
}

propsTypeはまた、propsまたはpropsの認証タイプを指定することもできる.

import PropTypes from 'prop-types';

Introduce.propTypes = {
    name: PropTypes.string
};

最後に、isRequiredを使用すると、propsTypeが指定されていないときに警告メッセージを受信できます.

Introduce.propTypes = {
    name: PropTypes.string,
    major : PropTypes.string.isRequired
};

次のメッセージは、majorに値が設定されていないことを示します.

リファレンスとサイト

React公式文書
ベロフェットとのモダン反応