React入門～その2～

f:id:f-a24:20200625163356p:plain

こんにちは。フロントエンドエンジニアの藤澤(@f_a24_)です。

前回の記事ではReactに関してざっくりとHTMLを部品（コンポーネント）化するイメージと紹介しましたが、今回はコンポーネントの機能についてもう少し紹介出来たらと思います。

dsinside.digitalstage.jp

PropsとState
- Props
- State
ライフサイクル
まとめ

PropsとState

ReactのコンポーネントにはPropsとStateと言う機能があるのですが、とても重要な機能なので1つずつ紹介していきます。

Props

ReactのコンポーネントはHTMLの属性のように外から値を渡すことが可能です。
この外から渡された値がPropsと呼ばれるものです。

function Header(props) {
  return <h1>{props.title}</h1>;
}
// Headerをbody直下に描画する
ReactDOM.render(<Header title="タイトル" />, document.querySelector('body'));

また、コンポーネントの子要素もPropsとして扱います。

function List(props) {
  // childrenでli要素を表示
  return <ul>{props.children}</ul>;
}
// Listをbody直下に描画する
ReactDOM.render(<List>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</List>, document.querySelector('body'));

State

ReactのコンポーネントはState（状態）と呼ばれる機能を用いることで直接HTMLを変更しなくても、値だけを変更すればすぐに変更箇所が描画されるような作りになっています。

例として、以下の簡単なカウンターアプリを見てみましょう。
ADD COUNTボタンを押下してcountを増やすと増えた状態のcountが表示されるかと思います。

function Counter() {
  const [count, setCount] = React.useState(0); // State（状態）と呼ばれる機能

  function addCount() {
    setCount(count + 1);
  };

  return (<div>
    <div>{count}</div>
    <button onClick={addCount}>ADD COUNT</button>
  </div>);
}
// Counterをbody直下に描画する
ReactDOM.render(<Counter />, document.querySelector('body'));

ReactのStateを使用しているのでこういった動作になりますが、試しにReact.useStateの行の部分を let count = 0;にしてaddCount関数でcount++;にしてみてください。

countの値は変わっていますが、変更後の結果が表示されないかと思います。
これはReactコンポーネントの特性上、Stateが更新されないとコンポーネントが更新されないのでcountがいくら増えても描画されません。

ライフサイクル

Reactコンポーネントは基本的にStateを更新することで表示内容を変更していくので、jQueryなどを使用した際によく見るHTMLを直接変更するようなことは原則としてしないのが良いとされています。
しかし、実際にはHTMLを直接変更しなければならない状況になることもあるかと思います。その際に覚えていてほしいのがライフサイクルになります。

基本的にReactコンポーネントのライフサイクルは、

コンポーネントが描画される
Stateが更新されてコンポーネントも更新される
（使わなくなったら）コンポーネントが消える

といった形になりますが、その各タイミングで処理を記述することが可能です。
その際に使用するのはuseEffectという機能になりますので、どのような機能か見てみましょう。

React.useEffect(function() {
  // コンポーネントが描画された時の処理
  // Stateが更新されてコンポーネントも更新された時の処理
  return function() {
    // コンポーネントが消える直前の処理
  }
});

// コンポーネントが描画された時だけ何か処理したい場合は第二引数に空の配列を渡します
React.useEffect(function() {
  // 処理
}, []);

では、先ほどのカウンターアプリで使ってみます。
countが更新されたタイミングでtitleも更新されるようになりました。

function Counter() {
  const [count, setCount] = React.useState(0); // State（状態）と呼ばれる機能

  function addCount() {
    setCount(count + 1);
  };

  React.useEffect(function() {
    // titleを更新
    document.title = `Count : ${count}`;
  });

  return (<div>
    <div>{count}</div>
    <button onClick={addCount}>ADD COUNT</button>
  </div>);
}
// Counterをbody直下に描画する
ReactDOM.render(<Counter />, document.querySelector('body'));