ホークとは

でもHookって何?

https://ko.reactjs.org/docs/hooks-overview.html#but-what-is-a-hook
Hookは、関数要素にReact Stateとライフサイクル機能(ライフサイクル特性)を「バインド」できる関数です.
Hookはクラスで操作されません.逆にclassなしでreactを使用できます.(ただし、すべての組織された構成部品を再作成するのではなく、新しく作成された構成部品からHookを使用することをお勧めしません.)

useEffectとは?

ReactクラスのコンポーネントDidMount、コンポーネントDidUpdate、コンポーネントWillUnmountなどの機能を1つのAPIに統合します.
https://ko.reactjs.org/docs/hooks-overview.html#effect-hook
Reactコンポーネントからデータをインポートまたは購読したり、DOMを手動で操作したりしたこともあります.これらのすべての動作を「副作用」(または短い「効果」)と呼びます.これは、他の構成部品に影響を与える可能性があり、レンダリング中に実装できないためです.

import React, { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [count, setCount] = useState(0);
  const [value, setValue] = useState("");
  // componentDidMount, componentDidUpdate와 비슷합니다
  useEffect(() => {
    // 브라우저 API를 이용해 문서의 타이틀을 업데이트합니다
    // document.p도 가능합니다.
    document.title = `You clicked ${count} times`;
    //document.querySelector('.testDiv')형식은 안된다. document.class이름은 된다.
    document.div = `value의 값은 ${value}입니다.`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
      <div></div>
      <input
        onChange={(e) => {
          setValue(e.target.value);
        }}
      />
      <div>value의 값은 {value}입니다.</div>
    </div>
  );
}

ステータスは、クリックまたは入力した値によって異なります.count, state.価値が変わる.変更するたびにLife Cycleメソッドが起動し、再レンダリングのようにuserEffect関数も起動して再レンダリングされます.

ぶんかいアレイこうぞう

//배열구조분해로 두 개의 값을 만들고 있다.
const [fruit, setFruit] = useState('banana');

//다음과 같이 입력하면 배열구조분해와 같은 효과를 낼 수 있다.
 var fruitStateVariable = useState('banana'); // 두 개의 아이템이 있는 쌍을 반환
  var fruit = fruitStateVariable[0]; // 첫 번째 아이템
  var setFruit = fruitStateVariable[1]; // 두 번째 아이템

配列構造で変数を宣言する場合は、[0]、[1]を使用して配列にアクセスする必要はありません.

useEffectを無効にする方法

無効化Effectが必要な場合は、無効化された関数を返すだけです.これはオプションです.