React Hook???

Hookって何?フックです!!その名の通り、hookを利用してコンポーネントの人生に介入することができます.
素子が登場する前に何かしようかな~
素子が消える前にこれをやりましょう~
更新してこれにしましょう~~
class型ではLifeCycle、ReactではLifeCycle Hookです.
どうしてこれを使うの???

コンポーネント間では、ステータスに関連する論理を再利用することは困難である.
コンポーネント間で状態相関論理を再利用したい場合があり,この問題を解決する従来の方法は高次コンポーネントとpropsを提示することである.
各素子の状態は独立している.hookは状態そのものではなく,状態関連論理を再利用する方法である.

級は人と機械を混同しますか?

Hookのルールを使う

1.一番上からのみHookを呼び出すことができます.また、重複文、条件文、ネスト関数でhookを使用することは禁止されています.

import React, { useState } from "react"

function Hooks(props) {
	if (!props.isExist) {
		const [state, setState] = useState(); // Error!
	}
	const [state2, setState2] = useState(); // Error!
}

// react가 여러 훅들을 구분할 수 있는 유일한 정보는 훅이 사용된 순서 뿐이기 때문.

Hookは、

関数要素内でのみ呼び出されます.

hookを使用しても、作成したコードに必要な変更はありません.使用可能で、100%以前のバージョンと互換性があるためです.

State Hook

1. useState

const [state, setState] = useState(initialState);

ステータス保持値とその更新値の関数を返します.最初のレンダリング時に変化した状態は、最初のフェースで渡されたパラメータの値と同じです.
setState関数はstateを更新するために使用されます.

setState(newState + 1); // setState와 동일하게 비동기 업데이트
setState(prev => prev + 1);

Effect Hook

2. useEffect

useEffect(function);

useEffect(() => {}, [count]) // 의존성 배열 (배열 안에 담긴 값들을 추적, 그때 마다 업데이트)

userEffectに渡される関数は、スクリーンレンダリングが完了すると実行されます.

How to use useEffect!

useEffect(() => {
	console.log("componentDidUpdate")
})

useEffect(() => {
	console.log("componentDidMount")
	return () => console.log("componentWillUnmount")
}, [])

useEffect(() => {
	console.log("componentDidMount")
	console.log("componentDidUpdate") // + shouldComponentUpdate
	return () => console.log("???")
}, [state])

// WRONG!!
useEffect(() => {
	console.log("CDM 쓰고 싶어요")
}, [])

useEffect(() => {
	console.log("CDU 쓰고 싶어요")
}, [state])