[React] Hook - useRef( )

useref()とは?

refを関数型素子で使いやすいhook.

使用

・useRef設定ref、通過useRef作成されたオブジェクト内current値が実際Element

useref()の使用

import React, { useRef } from 'react';

const App = () => {
  const inputEl = useRef(null);
  const btnClick = () => {
    let val = inputEl.current.value;
    console.log('input value: ' + val);
  }
  return (
    <input ref={inputEl} />
    <button>확인</button>
  );
}

export default App;

ローカル変数の使用

部品に局所変数を使用する必要がある場合は、useRefここで、ローカル変数はレンダリングに関係なく変更可能な値です.

関数構成部品から作成

import React, { useRef } from 'react';

const App = () => {
  const inputEl = useRef('Hello');
  return (
    <p>{inputEl.current}</p>
  );
}

export default App;

注意点

ref内部の値が変化した場合、構成部品はレンダリングされません.
したがって、レンダリングに関係のない値を管理するためにのみ使用されます.