Hooks

Hooks Intro

Hookは、react stateおよび생명주기 기능を関数要素上で連動させることを可能にする関数である.

号はクラスで動かない.

classを必要とせずreact

を使用

クラス素子VS機能素子

class component :
1.propsもstateも使用できますが、propsにアクセスするためにこのキーワードを使用します.
2.ComponentWillMountまたはComponentDidMountなどのライフサイクルメソッドを使用できます.
functional component:
1.propsにアクセスして使用できますが、stateは使用できません.
2.ライフサイクルメソッドは使用できません.
3.このキーワードは使用できません.
->関数はステータスを保存しないため、클로저でstateとライフサイクルを実現

Hooks使用規則

Hookは最上階からしか呼び出せません.
また、重複文、条件文、ネスト関数でHookを実行しないでください.

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

State Hook

useState

const [state, setState ] = useState(initialState);stateは、最初の伝達パラメータinitialStateの値に等しい.setState関数はstateを更新するために使用されます.
たとえば
ボタンをクリックするたびに、数値を大きくする関数が作成されます.

初期値を0に設定し、ボタンにonClickを適用し、setCountを1押すごとにインクリメントします.
(より詳細な説明は2番目の項目の後に記録されます)

Effect Hook

ComponentDidUpdateとComponentWillUnmountの目的と同じですが、APIに統合されています.

useEffect

useEffect Hookを使用して、レンダー後にリアクター要素がどのような操作を行うべきかを示します.respontは、伝達された関数を覚えてDOM更新を実行した後にロードされます.

useEffect(function);

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

userEffectは、複数のライフサイクルの組合せの形で記述することができる.

コンポーネントDidMount(依存配列:[])

shouldComponentUpdate(依存シナリオにない場合)

コンポーネントDidUpdate(ある場合)

componentWillUnmount

アセンブリマウント時
構成部品が最初にスクリーンにレンダリングされたときに、一度だけ実行したい場合は、依存配列の位置に空の配列を配置します.

useEffect(() => {
	console.log('렌더링 될 때 마다 실행된다');
});

タイルを省略すると、レンダリングのたびに実行されます.

useEffect(() => {
	console.log('렌더링 될 때 마다 실행된다.');
});

コンポーネントをアンインストールするとき
cleanup関数は(userEffectのポストアレンジ関数と呼ばれる)を返します.

アンインストール時にcleanup関数のみを実行する場合は、空の配列を2番目のパラメータとします.

更新前にcleanup関数を実行したい特定の値がある場合、依存配列にチェックしたい値を入れます.

useEffect(() => {
	console.log('컴포넌트가 화면에 나타남');
    return () => {
    	console.log('cleanup');
    };
 },[]);

componentDidMount
受信

props値を素子のローカル状態

に設定.

外部API要求(REST API等)

setIntervalによる繰返しタスクのスケジュールまたはsettimeoutによるタスクのスケジュール

componentWillUnmount

setInterval、setTimeoutで登録するジョブクリア時(clearInterval,clearTimeout)

例:
モードウィンドウを開くと、画面の後ろにスクロールはありません.モードウィンドウを閉じると、useEffectを使用して画面を再度スクロールさせます.

このときオープンモード時にスクロールを停止する部分はcomponentDidMountであり、モードオフ時にモードを再起動させる部分はcomponentWillUnmountである.
コンポーネント更新時
特定の値を更新するときに実行したい場合は、依存配列にチェックしたい値を入れることができます.

useEffect(()=> {
	console.log(name);
    console.log('업데이트 될 때 실행된다');
},[name]);

(参考資料:https://react.vlpt.us/basic/16-useEffect.html/24579152)