この文章はMZ's Develogに移った。

💡 中に入る。

ベロフトとのモダン反応のpropsで値を構成部品に渡すを読んでまとめた文章
propsの定義とdefaultPropsとprops.児童応用コードについてまとめた.

📝 propsの概念

propertiesの略.
任意の値を構成部品に渡す必要がある場合はpropsを使用します.

🎯 デフォルトはdefaultProps

構成部品にpropsが指定されていない場合にデフォルトで使用する値を設定できます.

🔎 Hello.js Code

colorとname propsのコード例を使用します.
Hello.defaultProps名前のpropsのデフォルト値を「名前なし」に設定します.

import React from 'react';

function Hello({ color, name }) {
  return <div style={{ color }}>{name}님 안녕하세요</div>
}

Hello.defaultProps = {
  name: '이름 없음'
}

export default Hello;

🔎 App.js Code

最初のHelloエレメントにはnameとcolorの値が設定されています.
2番目のHelloエレメントにはcolor値のみが設定されています.

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <>
      <Hello name="React" color="blue" />
      <Hello color="green" />
    </>
  );
}

export default App;

💻 実行結果

最初のHello構成部品は、自分で設定した「React」name props値です.
2番目のHello構成部品は、DefaultPropsによって設定された「名前なし」を決定します.

......

新しい号では、記事のすべてを表示できます。