React開発Part2～Props編～

はじめに

　おはようございます、Tunです。
今回も前回の続きでReactの基礎編を復習がてらに記載していきます。

Props

　Props(プロパティの意)とは、コンポーネントに渡す引数のようなのもで、コンポーネントは受け取ったPropsに応じて表示するスタイルや内容を変化させます。
※component・・・UIにより独立した再利用できる部品に分解したもののこと。
概念的には、コンポーネントはJavaScriptの関数に似ています。propsと呼ばれる任意の入力を受け取り、画面上に表示すべきものを記述するReact要素を返します。公式参照

　今回は、React公式に倣って学んでいきたいと思います。

関数コンポーネントとクラスコンポーネント

関数コンポーネント

function Welcome(props){
  return <h1>Hello, {props.name}</h1>;
}

　この関数は、データの入った'props'というオブジェクトを引数として受け取りReact要素を返しています。

クラスコンポーネント

class Welcome extends React.Component{
 render(){
   return <h1>Hello, {this.props.name}</h1> ;
 }
}

これも、引数として'props'を受け取っていますので、上記の関数コンポーネント同様、クラスコンポーネントと言えます。

コンポーネントのレンダー

DOMのタグのReact要素

const element = <div />;

　これはDOMのタグを表すReact要素になります。このdivはHTMLに存在するタグですのでそのままdivタグとして機能します。

ユーザ定義にコンポーネント

const element = <Welcome name="Tun" />;

　これに関して、DOMのタグには存在せず、ユーザが定義したコンポーネントになります。Reactがこのユーザ定義コンポーネントを見つけた場合、JSXに書かれている属性と子要素を、単一のオブジェクトとしてこのコンポーネントに返します。このオブジェクトのことを"Props"と呼びます。

Example

function Welcome(props) {
 return <h1>Hello, {props.name}.</h1>;
//consple.log(props); ⇒{name: 'Tun'}
}
//const Welcome = (props) => {...}
const root = 
ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Tun" />;
root.render(element); //Hello, Tun.

1. <Welcome name="Tun" />という要素を引数としてroot.render()を呼び出す
2. ReactはWelcomeコンポーネントを呼び出し、その時にpropsとして{name: 'Tun'}(object)を渡します。
3. Welcomeコンポーネントは出力として<h1>Hello, Tun.</h1>を要素として返します。
4. ReactDOMは<h1>Hello, Tun.</h1>に一致するように、DOMを効率的に更新します。

　この例からわかるように、コンポーネントに渡す引数がある場合は、そのコンポーネントにpropsで渡して、そのprops自体はobject形式で受け取っています。

補足：コンポーネント名は常に大文字で！
Reactでは小文字で始まるコンポーネントをDOMタグとして扱います。上記にも記載していますが、<div />はHTMLのdivタグを表しますが、<Welcome />はユーザ定義のコンポーネントとして扱われますので、必ず最初の文字は大文字にしましょう。

※この規約策定の背景が気になる方はこちらへ

Propsは読みとり専用

　コンポーネントを関数で宣言するかクラス宣言するかに関わらず、自分自身のpropsは決して変更してはいけません。すなわち、受け取ったオブジェクトは加工せず、そのまま使うほかはないということです。

Example2

const sum (a, b) => {
 return a + b;
}

このような関数は入力されたものを変更しようとせず、同じ入力に対して同じ結果を返すので"pure"であると言われます。

対照的に以下の関数は自身への入力を変更しているため純関数とは言えません。

Example3

const withdraw (account, amount) => {
 account.total -= amount;
}

　すべてのReactコンポーネントは、自己のpropsに対して純関数の様に振舞わなければならないという厳格なルールがあるみたいですね...

今日はここまでです、次回はStateについて学んでいきたいと思います。

参照

• React公式