hooks lifecycle

import './App.css'
import React, { useState, useEffect } from 'react'

let funcStyle = "color:blue";
let funcId = 0;
function FuncComp(props) {
  let numberState = useState(props.initNumber); // useState 의 첫번째 자리가 스테이트값이됨.
  let number = numberState[0];
  let setNumber = numberState[1];

  // let dateState = useState(new Date().toString());
  // let _date = dateState[0];
  // let setDate = dateState[1];

  let [_date, setDate] = useState(new Date().toString());

  useEffect(function () {
    console.log(
      "%cfunc => useEffect ( componentDidMount & componentDidUpdate) " +
        ++funcId,
      funcStyle
    );
    document.title = number + " : " + _date; // sideEffect 적당한 타이밍에 동작하도록 하는 것 
  });

  console.log("%cfunc => render" + ++funcId, funcStyle);
  //축약형
  // console.log(numberState); // 배열이 리턴되고 2개의값을 갖는다. 첫번쨰 값이 바로 state
  return (
    <div className="container">
      <h2>function style component</h2>
      <p>Number : {number}</p>
      <p>Date : {_date}</p>
      <input
        type="button"
        value="random"
        onClick={function () {
          setNumber(Math.random());
        }}
      ></input>
      <input
        type="button"
        value="date"
        onClick={function () {
          setDate(new Date().toString());
        }}
      ></input>
    </div>
  );
}

cleanup

useEffect(function () {
    console.log(
      "%cfunc => useEffect ( componentDidMount & componentDidUpdate) " +
        ++funcId,
      funcStyle
    );
    document.title = number + " : " + _date; // sideEffect 적당한 타이밍에 동작하도록 하는 것
    return function () {
      console.log(
        "%cfunc => useEffect return (componentDidMount & componentDidUpdate " +
          ++funcId,
        funcStyle
      );
    };
  });

条件を実行したい場合

useEffect(function () {
    console.log(
      "%cfunc => useEffect ( componentDidMount & componentDidUpdate) " +
        ++funcId,
      funcStyle
    );
    document.title = number  // sideEffect 적당한 타이밍에 동작하도록 하는 것
    return function () {
      console.log(
        "%cfunc => useEffect return (componentDidMount & componentDidUpdate " +
          ++funcId,
        funcStyle
      );
    };
  } , [number] );  // < -- 여기 바뀌는 값을 넣어주면된다. 이 값이 바뀌었을때만 첫번쨰 인자인 콜백함수가 실행됨.

レンダリング実行時に一度だけ実行したい場合は

useEffect(function () {
    console.log(
      "%cfunc => useEffect ( componentDidMount & componentDidUpdate) " +
        ++funcId,
      funcStyle
    );
    document.title = number  // sideEffect 적당한 타이밍에 동작하도록 하는 것
    return function () {
      console.log(
        "%cfunc => useEffect return (componentDidMount & componentDidUpdate " +
          ++funcId,
        funcStyle
      );
    };
  } , [] ); <--- 빈 배열을 넣어주면 된다.

useStateの例

function App() {
  let [funcShow, setFuncShow] = useState(true);
  let [classShow, setClassShow] = useState(true);
  return (
    <div className="container">
      <h1> Hello World </h1>
      <input
        type="button"
        value="remove func"
        onClick={function () {
          setFuncShow(false);
        }}
      ></input>
      <input
        type="button"
        value="remove class"
        onClick={function () {
          setClassShow(false);
        }}
      ></input>
      {funcShow ? <FuncComp initNumber={2}></FuncComp> : null}
      {classShow ? <ClassComp initNumber={2} initDate={11}></ClassComp> : null}
    </div>
  );
}