hooks lifecycle

sideEffect 처럼 기존의 컴포넌트에 영향을 주진 않지만 누르면 document.title 이 바뀐다든지 이런 사이드이펙트 ( componentDidmount, componentDidupdate) 같은 것들을 합쳐놓은 것 같은순가능ㄹ 사용하고 복수개 사용 가능useEffect를 사용해 해결 할 수 있고 사용법은
useEffect(function () {
document.title = number + ':' + _date;
}); 이런식으로 안에 함수를 넣어 사용가능

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 를 실행하고 그것이 무언가를 정리하길 원한다면 return 을 써주면 된다. 그리하면 useEffect 사용하고, 렌더 후에 useEffect return을 하고, 그다음 useEffect를 실행한다. (정리정돈)

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>
  );
}

온클릭시 없애는 걸 알 수 있다. 삼항연산자를 사용해야한다. 내용없음 : null