【React】基礎編 ⑶

新しく学んだことをアウトプットしています。

React.Fragment

JSXは複数の要素を持つことができないため、
＜div＞タグで複数の要素を格納するのが一般的でした。

ですが、HTMLで描画した時に、
本来は＜div＞タグが必要ない所にまで要素が付与されてしまうので、意外と困る時がありますよね。

そんな時に、使用するのが、React.Fragmentなのです。

React.Fragmentは＜div＞タグと同じ役割を担っており、
HTMLでは要素としてカウントされないので、使い勝手が良いです。

App.jsx

import React, { Component } from 'react';

class App extends Component {
  render() {
    return(
      // divの替り
      <React.Fragment>
        <User name={"Taro"} age={8}/>
      </React.Fragment>
    );
  }
}

export default App;

関数コンポーネント

コンポーネントには、
クラスコンポーネントと関数コンポーネントの２つがあります。

Reactでは、VirtualDomというDomが存在していて、その中でどのDomが変更になったのか管理していて、その変更点のみを実際のDomに反映していく機構があります。
それぞれのDomにkeyを与えてあげて、必要最低限なDomの範囲をReactで管理しています。

App.jsx

// クラスコンポーネント

import React, { Component } from 'react';

class App extends Component {

  const profiles = [
    { name: "Taro", age: 8 },
    { name: "Hanako", age: 5 },
  ]

  render() {
    return(
      <React.Fragment>
        {
          profiles.map((profile, index) => {
            return(
              // keyをindexで与えてあげる
              <User name={profile.name} age={profile.age} key={index} />
            );
          })
        }
      </React.Fragment>
    );
  }
}

//  関数コンポーネント

const User = (props) => { // 引数にpropsを持たせる
  return(
    <div>
      <p> I am {props.name} and {props.age} years old!</p>
    </div>
  )
}

export default App;

defaultProps

ReactのpropsにはdefaultPropsという機構があります。
propsを受け取るComponentにdefaultPropsを設定してあげる。

以下のように設定してあげると、
Noname さんの age がデフォルトで 1 と出力されます。

App.jsx

import React, { Component } from 'react';

class App extends Component {

  const profiles = [
    { name: "Taro", age: 8 },
    { name: "Hanako", age: 5 },
    { name: "Noname" }
  ]

  render() {
    return(
      <React.Fragment>
        {
          profiles.map((profile, index) => {
            return(
              <User name={profile.name} age={profile.age} key={index} />
            );
          })
        }
      </React.Fragment>
    );
  }
}

const User = (props) => { 
  return(
    <div>
      <p> I am {props.name} and {props.age} years old!</p>
    </div>
  )
}
// propsを受け取るComponentでdefaultPropsを設定
User.defaultProps = {
  age: 1
}

export default App;

propTypes

先ほどのdefaultPorpsと同様に、
ReactのpropsにはpropTypesという機構があります。
propsを受け取るComponentにpropsTypesを設定してあげる。

以下のように設定してあげると、
name や age に型を設定することができ、 validation をかけることができます。
型を設定しておくことで、 name に数値が入れられたり、age に文字列が入るのを防止してくれます。
また、 isRquired とすることで、 age が空の場合はエラーが発生するようになります。

App.jsx

imoprt React from 'react';
// prop-Typesをimport
imoprt PropTypes from 'prop-types';
// 省略


// 
User.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number.isRequired,
}

以上