[React] Hook (useState, useEffect)

Hookは素子の状態をより扱いやすくする機能です.

useState

パラメータ

生成state変数の初期値

戻り値
state変数と変数のsetterを配列に戻します.

生成されたstate変数は、構成部品のレンダリング時に一度だけ生成されます.
返されるsetterペアのstate変数を変更し、setStateを使用するたびに再enderして構成部品に渡します.

import React, { useState } from 'react';

function Example() {
  // "count"라는 새 상태 변수를 선언합니다
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect

パラメータ

最初のパラメータとして関数を受け入れます.(適用する効果を提供します.)
2番目のパラメータとして配列することができる.(配列で指定した値を変更すると効果が適用されます.)

最初のパラメータのみが与えられた場合(ComponentDidMount、ComponentDidUpdate)

userEffectに渡される関数をeffectと呼びます.useEffectは、エレメントをレンダリングするたびに呼び出され、2番目のパラメータがない場合はeffectが実行されます.
レンダーが完了すると、DOMの更新後にマウントマウントポイントが読み込まれます.
componentDidMountとcomponentDidUpdateとcomponentWillUnmountを組み合わせた機能.

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // componentDidMount, componentDidUpdate와 같은 방식으로
  useEffect(() => {
    // 브라우저 API를 이용하여 문서 타이틀을 업데이트합니다.
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

最初のパラメータが返す関数

effectを関数に戻すと、コンポーネントWillUnmountが呼び出されるとeffectの戻り関数が呼び出されます.
登録されたevent listenerを消去するには、次のようにします.

useEffect(() => {
	 document.addEventListener("mouseleave", handle);
	 return () => document.removeEventListener("mouseleave", handle);
	}, []);

2番目のパラメータを使用して効果を制限する場合

2番目のパラメータで配列を渡すことができます.これにより、配列を2番目のパラメータとして使用すると、配列で指定した値を変更した場合にのみ効果が実行されます.アレイが空の場合は、最初のレンダリング時(ComponentDidMount)にのみ効果が得られます.

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // count가 바뀔 때만 effect를 재실행합니다.

関連項目:
https://ko.reactjs.org/docs/hooks-state.html
https://ko.reactjs.org/docs/hooks-effect.html