useEffect/useRef

useEffect

useEffectは、素子をレンダリングするたびに任意の操作を実行できるHOOKです.
構成部品を描画した後に実行されるため、クラス構成部品で使用されるライフサイクルメソッドの構成部品DidMoutと構成部品DidUpdateの機能を組み合わせた形式と考えられます.
useEffectの構文構造を以下に示す.

useEffect( () => {console.log('마운트 될 때만 실행')}, [])

上の構造では,[]部分を依存配列と呼ぶ.この依存配列の要素が変更されると、関数が実行され、依存配列が省略されて作成されると、すべての変更が実行されます.

useRef

まず,Refは反応器中のDOMに直接アクセスするために用いられる.userefは、関数型素子で設定するために使用されます.
userefはDOMの選択に用いられるほか,もう一つの用途がある.構成部品内で変数を管理する機能.userefを使用して管理される変数の最大の特徴は、値を変更することで構成部品を再レンダリングしないことです.
また、useref hookを使用して作成された変数は、前回更新された現在値を維持する利点があるため、スクロール位置などに役立ちます.

useEffectとuseRef

useEffectとuseRefを一緒に使用する例には、オートフォーカス、スクロールバーコントロールなどがあります.

const inputRef = useRef<HTMLInputElement>(null);

useEffect(() => {
  inputRef.current?.focus();
}, []);

return <input type="password" ref={inputRef} />;