【TypeScript】Reactで非同期に処理を実行する方法ご紹介。

今回の記事はTypeScriptのReactで非同期処理を行う方法をご紹介します。初心者にも分かりやすいように記載していくので是非参考にしてみて下さい。

TypeScriptでReactプロジェクト起動
非同期に処理を実行

TypeScriptでReactプロジェクト起動

node等がインストールされてない方はインストールして下さい。その前提で話を進めます。

npx create-react-app sample --template typescript

まずは上記で「sample」プロジェクトを作成します。

cd sample
npm start

これでローカルサーバが立ち上がって初期画面が表示できます。

では次に非同期で処理を行う方法をご紹介します。

非同期に処理を実行


import React, { useEffect } from 'react';
import axios from 'axios';

const App: React.VFC = () => {
  const [count, setCount] = React.useState(0);
  //非同期実行
  useEffect(() => {
    const CountSet = async () => {
      //3秒後に中の処理を実行
      setTimeout(() => {
        setCount(999);
      }, 3000);
    };
    //関数実行
    CountSet();
  }, []);

  //レンダリング
  return (
    <div style={{ height: 400, width: '100%' }}>
      <p>{count}</p>
    </div>
 );
}

export default App;

これでページを立ち上げると3秒後に表示が変わります。

非同期で処理を出来ます。console等でも確認できるのでコード書き換えてみて下さい。

では今回の記事は以上です。他にも多数のTypeScript記事を記載しているので是非サイト内見ていって下さい。