useRef 쓰고 배우기 쓰고 배우기 (React Hooks 시작하기 시리즈 3/6)

로드맵

React 16.8에서 추가된 기능인 React Hooks에 대해 썼습니다.

쓰면서 배우는 React Hooks 입문 시리즈로 새로 작성했습니다.

React.memo/useCallback/useMemo

Context/useContext

useRef 이번

useState

useEffect

useReducer

소개

React의 내장 훅이면 useRef 의 설명을 합니다.

useRef란?

ref 객체 (React.createRef의 반환 값)를 반환하는 후크입니다. 이를 사용하면 DOM 참조 및 구성 요소 내에서 값을 유지할 수 있습니다.

값을 유지한다고 하는 점은 useState 와 같습니다만, 다른 점은, useRef 로 생성한 값을 갱신해도 컴퍼넌트는 재렌더링되지 않는다는 것입니다.

그래서 렌더링에는 관계없는 state 를 취급하고 싶을 때(예: 컴퍼넌트내에서 값을 보관 유지하고 싶지만, 값을 갱신해도 컴퍼넌트를 재렌더링하고 싶지 않을 때) 등에 이용합니다.

구문

const refオブジェクト = useRef(初期値)

인수에 전달한 값은 ref 객체의 현재 속성 값이 됩니다.

다시 시도하지만 ref 객체는 업데이트해도 다시 렌더링되지 않습니다.

이번에는 useRef의 주요 활용 방법을 두 가지 소개합니다.

활용 방법 1 ... JSX 내의 노드에 대해 뮤터블 상태로 해 액션을 일으킬 수 있는 상태로 한다

처음 렌더링할 때 입력 필드에 Focus되는 모노를 만듭니다.

샘플 코드

App.js

import React from "react";
import Input from "./components/Input";

const App = () => {
  return (
    <div className="App">
      <p>useRef</p>
      <Input />
    </div>
  );
};

export default App;

/components/Input.js

import React, { useEffect, useRef } from "react";

const Input = () => {
  // useRefを使ってRefオブジェクトを作成。初期値はnull
  const inputRef = useRef(null);
  useEffect(() => inputRef.current.focus(), []);
  // useRefによって作成されたRefオブジェクトをInputフィールドのrefプロパティに持たせることによって
  // refオブジェクトのカレントプロパティ内にInputノードが格納されてアクセス可能になります
  return <input ref={inputRef} type="text" />;
};

export default Input;

보충적으로, useRef로서 작성된 오브젝트는 벌써 현재 프로퍼티를 가지고 있어, useRef(초기치)로 건네준 null가 그것입니다.



다시 로드해도 처음부터 Input 필드에 포커스가 닿는 것을 알 수 있습니다.

이와 같이, JSX내의 노드에 대해서 뮤터블 상태로 해 액션을 일으킬 수 있는 상태로 하는 것이 useRef의 하나의 활용 방법입니다.

활용 방법 2... 클로저내에서 선언된 값에 액세스하고 싶은 경우의 활용 방법

초당 보관할 값을 업데이트하고,
버튼 클릭 동작으로 업데이트를 중지하고 싶을 때 어떻게합니까?
useRef를 활용하여 만듭니다.

샘플 코드

App.js

import React from "react";
import Count from "./components/Count";

const App = () => {
  return (
    <div className="App">
      <p>useRef</p>
      <Count />
    </div>
  );
};

export default App;

/components/Count.js

import React, { useState, useEffect, useRef } from "react";

const Count = () => {
  // カウントのためのState
  const [count, setCount] = useState(0);
  const intervalRef = useRef();
  // ライフサイクルメソッドの中に組み込みたいのでuseEffect
  useEffect(() => {
    intervalRef.current = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);
    // アンマウント時の処理
    return () => {
      clearInterval(intervalRef.current);
    };
  }, []);
  return (
    <div className="Count">
      <p>{count}</p>
      <button
        onClick={() => {
          // setIntervalを実行するuseRefのカレントプロパティに入れることで
          // onClick次の処理として使えるようになる
          // useEffect 内のローカル変数として使われるとここからはアクセスできないけど
          // intervalRef.current だとアクセスが可能になる
          clearInterval(intervalRef.current);
        }}
      >
        Stop
      </button>
    </div>
  );
};

export default Count;

이번은 이상입니다.

참고