0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

TypeScript+ReactでのuseEffect(転何知人T+Rその6)

Last updated at Posted at 2021-08-03

前回までの状態

React HooksとuseStateについてについて学習した。

今回の目的

useEffectについて

useEffect

ページをレンダリングした後に副作用(DOMの変更、APIとの通信など)を実行する際に使う。書式は以下の通り。

useEffect(関数);

手順

前回作成したindex.tsxに以下の内容を変更、追加する。

インポート部分は以下のように変更する。

import { useState,useEffect } from 'react';

関数コンポーネント内部に以下の記述を追加する。

  useEffect(() => {
    document.title = `input is ${str} !`;
  });

以下がソースコード全体。

import ReactDOM from 'react-dom';
import { useState,useEffect } from 'react';


const TextOutput = ({ name }: { name: string }) => {
  return (
    <p>Hello, {name}!</p>
  );
}

const TextInput = () => {
  const [str, setStr] = useState('初期値');

  useEffect(() => {
    document.title = `input is ${str} !`;
  });

  return (
    <div>
    <form >
      <label>
        入力欄<br />
        <textarea
          value={str}
          onChange={event => setStr(event.target.value)}
        />
      </label>
    </form>
    <TextOutput name={str} />
    </div>
  );
}

ReactDOM.render(
  <TextInput />,
  document.getElementById('root')
);

いつも通り、npm startでプロジェクトを実行する。
入力値に応じてページタイトルが変更されれば成功。

スクリーンショット 2021-08-03 171321.png

解説

import { useState,useEffect } from 'react';

useStateとuseEffectを使用するため、インポートしている。

  useEffect(() => {
    document.title = `input is ${str} !`;
  });

ページタイトルをstrを使用して設定している。
通常ではページ表示後にタイトル変更は起きないが、useEffectを使用することによってstrの変更が発生した場合に変更される。

要約

ページをレンダリングした後に副作用を実行させる場合、useEffectを使用する。

useContext

参考文献

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?