[ React ] useRef에 대해 알아보자.

참고사이트

• React 공식 문서 - useRef

 

 

🪣 useRef

렌더링이 필요하지 않은 값을 참조할 수 있는 React Hook이다.

 

useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환한다.

반환된 객체는 컴포넌트의 전 생애주기를 통해 유지된다.

 

📦 Parameter

• initialValue:  초기에 저장되는 값을 넣으며, 모든 유형의 값이(lite, DOM...)이 될 수 있다.

이 인수는 초기 렌더링 후에 무시된다.

 

🎁 Return

useRef는 단일 속성을 가진 객체를 반환한다.

{current: value}

• current: initialValue값이 들어가 있으며 null을 사용해도 된다. 향후 다른 것으로 설정할 수 있다.

 

렌더링이 진행되면 기존 useRef에 저장된 동일한 객체가 반환된다.

 

⚠️ 주의사항

• ref.current 속성을 재렌더링 없이 변경할 수 있다. 그러나 렌더링에 사용되는 개체(State의 일부)를 보유하는 경우 해당 개체를 변경하면 안된다.

• ref.current는 속성을 변경하면 재렌더링 되지 않는다. ref는 일반 JavaScript 객체이기 때문에 React는 언제 변경된지 인식하지 못한다.

• 초기화를 제외하고 렌더링 중에는 쓰거나 읽음을 금지한다. 이로 인해 구성요소의 동작을 예측할 수 없게 된다.

• StrictMode(엄격 모드)에서는 두 번 호출되므로 참조 개체를 두 개 생성하지만 하나는 삭제되므로 프로덕션에 영향을 주지 않는다.

 

 

📢 선언

useRef 참조를 선언하려면 구성 요소의 최상위 수준에서 호출한다.

import { useRef } from 'react'

function RefComponent() {
	const intervalRef = useRef(0);
    const inputRef = useRef(null);
    
    return (
    	<div>
        	<input ref={inputRef}/>
        </div>
    );
}

 

✒️ Code

작업을 위해 Three.js의 Material을 일정 간격마다 변경해줘야해서 interval을 실행했는데 clear가 안되던 문제가 발생했었다.

이때 useRef를 사용하여 해결했었다.

 

아래는 Material과 관련된 코드는 아니고 interval의 기초인 Timer 기능이다.

 

import { useRef, useState } from "react";
import "./App.css";

function App() {
  const [startTime, setStartTime] = useState<number | null>(null);
  const [now, setNow] = useState<number | null>(null);
  const intervalRef = useRef<number | null>(null);

  const handleStart = () => {
    // 시작 시간 Set.
    setStartTime(Date.now());
    // 현재 시간 Set.
    setNow(Date.now());

    // 기존에 인터벌이 있다면 삭제
    clearInterval(intervalRef.current);

    intervalRef.current = setInterval(() => {
      setNow(Date.now());
    }, 10);
  };

  let sec: number = 0;
  if (startTime != null && now != null) {
    sec = (now - startTime) / 1000;
  }

  console.log(intervalRef.current);
  const handleStop = () => {
    clearInterval(intervalRef.current);
  };
  return (
    <>
      <div>
        <p style={{ fontWeight: "800" }}>Passed Time</p>

        <p style={{ fontSize: "2rem", letterSpacing: "0.25rem" }}>
          {sec.toFixed(3)}
        </p>

        <div>
          <button onClick={handleStart} style={{ margin: "0 10px" }}>
            Start
          </button>

          <button onClick={handleStop} style={{ margin: "0 10px" }}>
            Stop
          </button>
        </div>
      </div>
    </>
  );
}

export default App;

다음 코드를 적용하면 아래와 같이 나타나며, 동작해보면 된다.