React18.2.0対応 propsを丁寧に学ぶ

目的

Reactを自己学習しています。propsについての備忘録で自分なりに忘れないようにまとめました。

propsとは（ざっくり言うと）

親コンポーネントから子コンポーネントへ値を渡すための仕組み
文字だけで読んでもあまり理解しづらいので実際にどのようなものなのか手を動かしてみます。

propsを使わない場合

App.jsx

import { ColorfullMessage } from "./components/ColorfullMessage";

export const App = () => { //exportを記述することで他のファイルで関数を参照することができる
  const onClickButton = () => alert();  
  
  const contentStyleB = {
    color:"green",
    fontSize: "30px" //javascriptオブジェクトなのでキャメルケースで書くfont-sizeだとエラーになる
  };
  return( //複数行をリターンする時は、改行して（）内に記述する。
    <> {/*//関数のコンポーネントとして返すタグは大きな一つのタグにしなけらばならない,<React.Fragment>を<></>として省略できる*/}
      <h1 style={{ color: "red"}}>Hello World!</h1> {/*javascriptのオブジェクトなのでcolorプロパティに文字列でCSSを適用*/ }
      <ColorfullMessage/>     
      <p style={contentStyleB}>いとっちです！（緑）</p>
      <button onClick={onClickButton}>ボタン</button> {/*//onClickプロパティに関数を割り当てる*/}
    </> 
    )//App関数の結果として表示したい要素を返却する
  }

ColorfullMessage.jsx

    export const ColorfullMessage = () => {//他のファイルでも参照できるようにexportを付ける
    const contentStyleA = {
        color:"blue",
        fontSize: "30px" //javascriptオブジェクトなのでキャメルケースで書くfont-sizeだとエラーになる
      };

    return (
      <p style={contentStyleA}>いとっちです（青）</p>
        
    )
}

ColorfullMessage.jsxでcolorプロパティに"blue"を、returnで「いとっちです（青）」直接返しています。

ColorfullMessage.jsx

const contentStyleA = {
        color:"blue",
      };
return (
      <p style={contentStyleA}>いとっちです（青）</p>
        
    )      
      

propsを使った場合

App.jsx

import { ColorfullMessage } from "./components/ColorfullMessage";

export const App = () => { //exportを記述することで他のファイルで関数を参照することができる
  const onClickButton = () => alert();  
  
  const contentStyleB = {
    color:"green",
    fontSize: "30px" //javascriptオブジェクトなのでキャメルケースで書くfont-sizeだとエラーになる
  };
  return( //複数行をリターンする時は、改行して（）内に記述する。
    <> {/*//関数のコンポーネントとして返すタグは大きな一つのタグにしなけらばならない,<React.Fragment>を<></>として省略できる*/}
      <h1 style={{ color: "red"}}>Hello World!</h1> {/*javascriptのオブジェクトなのでcolorプロパティに文字列でCSSを適用*/ }
      <ColorfullMessage color="blue" message="いとっちです（青）"/>     
      <p style={contentStyleB}>いとっちです！（緑）</p>
      <button onClick={onClickButton}>ボタン</button> {/*//onClickプロパティに関数を割り当てる*/}
    </> 
    )//App関数の結果として表示したい要素を返却する
  }

ColorfullMessage.jsx

export const ColorfullMessage = (props) => {//他のファイルでも参照できるようにexportを付ける、引数は何でもよい
    const contentStyleA = {
        color:props.color,
        fontSize: "30px" //javascriptオブジェクトなのでキャメルケースで書くfont-sizeだとエラーになる
      };

    return (
      <p style={contentStyleA}>{props.message}</p>
        
    )
}

App.jsxでpropsとして、値を代入して、ColorfullMessage.jsxに渡している。

App.jsx

<ColorfullMessage color="blue" message="いとっちです（青）"/> 

ColorfullMessage.jsx

export const ColorfullMessage = (props) => {
    const contentStyleA = {
        color:props.color,
      };
    return (
      <p style={contentStyleA}>{props.message}</p>
    )
}

この時点では、コードの量は大差はないように思います。しかし、contentStyleBもpropsとしてColorfullMessageに渡すことができます。

contentStyleBも渡すと（ここが重要）

App.jsx

import { ColorfullMessage } from "./components/ColorfullMessage";

export const App = () => { //exportを記述することで他のファイルで関数を参照することができる
  const onClickButton = () => alert();  
  return( //複数行をリターンする時は、改行して（）内に記述する。
    <> {/*//関数のコンポーネントとして返すタグは大きな一つのタグにしなけらばならない,<React.Fragment>を<></>として省略できる*/}
      <h1 style={{ color: "red"}}>Hello World!</h1> {/*javascriptのオブジェクトなのでcolorプロパティに文字列でCSSを適用*/ }
      <ColorfullMessage color="blue" message="いとっちです！（青）"/>     
      <ColorfullMessage color="green" message="いとっちです（緑）"/>     
      <button onClick={onClickButton}>ボタン</button> {/*//onClickプロパティに関数を割り当てる*/}
    </> 
    )//App関数の結果として表示したい要素を返却する
  }

ColorfullMessage.jsx

export const ColorfullMessage = (props) => {//他のファイルでも参照できるようにexportを付ける、引数は何でもよい
    console.log(props); //propsの中身を確認
    const contentStyleA = {
        color:props.color,
        fontSize: "30px" //javascriptオブジェクトなのでキャメルケースで書くfont-sizeだとエラーになる
      };

    return (
      <p style={contentStyleA}>{props.message}</p>
    )
}

App.jsxのコードの量が減り、スッキリしたように思います。
また、console.log(props);でpropsの中身を確認すると、下記のようになります。

参考資料

Udemy　モダンJavaScriptの基礎から始める挫折しないためのReact入門