応答素子(Day 2)

構成部品
英文は“元素”で、“部品”の意味
機能を単位でカプセル化するための反応器の基本単位.
コンポーネント

Property:親コンポーネントから子コンポーネントに渡される読取り専用データ

状態:構成部品の状態を格納変更可能なデータ

コンテキスト:親コンポーネントからすべてのサブコンポーネントに作成および渡すデータ

保証する
使用法:エクスポートされたjsxファイルに必要なproperty値を作成し、インポートされたjsxファイルでthis.propsで処理します.
例
1) App.jsx

// src폴더안에 App.js을 연 다음 기존 내용을 모두 지우고 아래의 내용으로 작성해 보세요
import React from 'react';
import ChildComponent from "./03/ChildComponent";


class App extends React.Component {
  render() {
    return (
        <div>
         <ChildComponent
         numValue={1}
         arrayValue={[1,2,3]}/>
        </div>
    );
      }
}
export default App;

2) ChildComponent.jsx

import React from 'react';
import PropTypes from 'prop-types';

class ChildComponent extends React.Component {
    render(){
    return (
      <div>
        <span>숫자값: {this.props.numValue}</span><br/>
        <span>Array: {this.props.arrayValue}</span>
      </div>
    );
  }
}

ChildComponent.propTypes = {
  numValue: PropTypes.number,
  arrayValue: PropTypes.arrayOf(PropTypes.number),
 }

export default ChildComponent;

App.jsxからエクスポートされた内容はChildComponentです.jsxから対応するコンテンツを受信して出力します.
結果

숫자값: 1
Array: 123

this.道具とは何ですか.
現在のコードのthis.propsを見つけると{numValue: 1, arrayValue: Array(3)}という内容があります.
つまり、これ.propsは、この素子の輪郭として入力される値を表す.
上のコードをもう一度整理してください.
1) App.jsx

// src폴더안에 App.js을 연 다음 기존 내용을 모두 지우고 아래의 내용으로 작성해 보세요
import React from 'react';
import ChildComponent from "./03/ChildComponent";


class App extends React.Component {
  render() {
        const num = 1;
        const arrayValue = [1,2,3];
    return (
        <div>
         <ChildComponent
         numValue={num}
         arrayValue={arrayValue}/>
        </div>
    );
      }
}
export default App;

この部分render(){コンテンツ}で変数を宣言することで、変数を置き換えることができます.
2) ChildComponent.jsx

import React from 'react';
import PropTypes from 'prop-types';

class ChildComponent extends React.Component {
    render(){
        const {
            numValue,arrayValue
        }=this.props;
    return (
      <div>
        <span>숫자값: {numValue}</span><br/>
        <span>Array: {arrayValue}</span>
      </div>
    );
  }
}

ChildComponent.propTypes = {
  numValue: PropTypes.number,
  arrayValue: PropTypes.arrayOf(PropTypes.number),
 }

export default ChildComponent;

this.propsは、オブジェクトによって得られるproperty値であるため、구조분해할당を使用して対応する値を検索することができる.(上図のように、出力のたびにthis.propsを使用する必要はありません.)

const {
            numValue,arrayValue
        }=this.props;(= {numValue: 1, arrayValue: Array(3)})

そのため、Child Component.jsxで宣言されたnumValueという変数のうち、値が1の配列変数arrayValueが宣言され、割り当てられる[1,2,3].
注意事項
応答の文字列以外の値には、引用符ではなく括弧を使用します.
1) App.jsx

	<div>
         <ChildComponent
         numValue={num}
         arrayValue={arrayValue}/>
        </div>

2) ChildComponent.jsx

	<div>
        <span>숫자값: {numValue}</span><br/>
        <span>Array: {arrayValue}</span>
     	</div>

文字列の例

return (
<PropComponent
name = "두잇 리액트"
/>
);

jsxにおけるrender(){}バインドの部分はjs部分であり、return()バインドの部分はjsx部分である.
ここで、各ファイルのexportセクションはindexです.jsでアプリケーションを適用します.jsxコンテンツとアプリケーションを取得します.jsxはChildComponentセクションをインポートする必要があります.