No.12 Hook

Hook?

フックとは、フックやフックなどの英語の単語です.reactのフックはフックを意味するわけではありませんが、フックと同じ機能を持っているので、つなげたほうがいいと思います.reactのhookはfunction componentから学ぶ概念で、class componentの使い方とは違います.なぜフェイスブック開発者がfunctionを使い始めたのですか?理由は以下の通り.

クラスコンポーネントの欠点

コンポーネント間では、ステータスに関連する論理を再利用することは困難である.

の複雑な要素は理解しにくい.(=ライフサイクルメソッドには、関連のない論理が含まれているため、エラーが発生しやすく、整合性が損なわれます.)

類は人と機械を混同している.(=このキーワードを知っておく必要があり、bindメソッドを使用して関数を使用する必要があります.)

したがってfunctioncomponentの使用は容易であり、コードの理解に役立つ.
Hookの概要

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を呼ぶしかありません.

一般的なjavascript関数ではhookを呼び出すことはできません.(Custom Hookで呼び出す👌)

State Hook

useStateでは、ステータス値とその更新値を保持する関数を返します.最初にレンダリングしたときに返される状態は、最初に渡されたパラメータの値と同じです.

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

Effect Hook

userEffectは、関数要素内で副作用を実行することを可能にする.(ComponentDidMount、ComponentDidUpdate、およびComponentWillUnmountを1つのAPIに統合🤩)

useEffect(function);

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

classのsetStateではなくUSEffectを使用する場合、渡された関数は画面でレンダリングされた後に実行されます.(値が変更された場合にのみ実行することもできます.)
値を表示するには...

関数としてClass Monsterを使用

//인자로 받아와야하는것은 props가 객체로 넘어옴
//const {name, age, id} = this.props;
function Mosters({name, age, id}){
	//state 
	const [monsters, setMonsters] = useState([]);
	const [userInput, setUserInput] = useState("");
	
	//componentDidMount -> 첫 번째 렌더 이후에만하라는것
	useEffect(()=> {
	  fetch("주소~")
	  .then((res) => res.json());
	  .then((res) => setMonsters(res);
	}, []);

	const handleChange = (e) => {
	    setUserInput(e.target.value);
	};
	
	return(
		<div className="Mosters">
		  <SearchBox handleChange={handleChange} />
		  <CardList monsters={filterdMonsters} />
		</div>
	)
}

👉 スターを覚えていなければ?もう一つの部品(class component)