React入門（useState, useEffect）

useStateの使い方

• 公式サイトを参考

変更前、変更後の状態の管理する機能です。
今回の場合はcheckboxの状態を管理しています。

親クラスApp.js
子クラスTodos.js

Todos.jsx

import React, { useState } from 'react';


const Todos = () => {
  const [Task, setTask] = useState(false);　//初期値（false）
       //変更前　　変更後
  return (
    <div>
      <input 
         type="checkbox" 
         checked={Task} 
         id="check" 
         onClick={() => setTask(!Task)}/>
    </div>
  )
};

export default Todos;

App.js

import React from 'react';
import Todos from './Todos';


return (
    <>
     <Todos />
    </>
  )
};

export default App;

useEffectのライフサイクル

• 公式サイトの参考

Mountingは初期値
Unmountingは初期値から変更された値

useEffect

import { useEffect } from 'react';

useEffect(() => {
  // MountingとUnmountingに呼ばれる
})

useEffect(() => {
  // Mountingの時に呼ばれる
}, [])

useEffect(() => {
  // Mountingと引数の時に呼ばれる
}, [引数])

useEffect(() => {
    // Mountingの時に呼ばれる
  return () => {
    //Unmountingが呼び出される
   }
})