useRef 🟢

useRef는 rendering에 필요하지 않은 값을 참조할 때 사용되는 React Hook이다.

React 공식문서에 따르면, useRef Hook은 크게 세 가지 상황에서 사용된다.

1. Referencing a value with a ref
2. Manipulating the DOM with a ref
3. Avoiding recreating the ref contents

많은 내용이 있겠지만, 오늘은 공식문서에 있는 Stopwatch 예제 코드를 통해 useRef를 사용하고 useState와 비교해 보았다.

Stopwatch code 🟡

import { useState, useRef } from "react";

export default function Stopwatch() {
  const [startTime, setStartTime] = useState(null);
  const [now, setNow] = useState(null);
  const intervalRef = useRef(null);
  console.log("나 실행됐어 1");
  // 2. handleStart 함수가 실행됨
  function handleStart() {
    // 3. startTime라는 상태를 현재 시각으로 업데이트
    setStartTime(Date.now());
    // 4. now라는 상태를 현재 시각으로 업데이트
    setNow(Date.now());
    // 5. cleaerInterval을 사용하여 실행되는 인터벌을 중지, 단 초기값이 null이기에 첫 클릭에서는 무시됨
    clearInterval(intervalRef.current);
    // 6. 0.01초마다 now를 현재 시간으로 업데이트하는 새로운 인터벌을 설정함
    intervalRef.current = setInterval(() => {
      setNow(Date.now());
    }, 10);
  }

  // 12. handleStop 함수가 실행됨
  function handleStop() {
    // 13. 실행 중인 인터벌을 clearInterval을 사용하여 중지함
    clearInterval(intervalRef.current);
  }

  // 7. secondsPassed 변수는 경과한 시간을 나타내는 변수
  let secondsPassed = 0;
  console.log(secondsPassed);
  console.log("나 실행됐어 2");
  // 8. startTime과 now가 존재할 경우에만 값을 계산함
  if (startTime != null && now != null) {
    // 9. 계산은 '(now-startTIme)/1000'로 구성되며, 밀리초 단위인 시간을 초 단위로 변환함
    secondsPassed = (now - startTime) / 1000;
  }
  console.log(secondsPassed);
  console.log("나 실행됐어 3");
  return (
    <>
      {/* 10. 계산 결과를 소수점 세 자리까지 보여줌 */}
      <h1>Time passed: {secondsPassed.toFixed(3)}</h1>
      {/* 1.Start 버튼을 클릭함 */}
      <button onClick={handleStart}>Start</button>
      {/* 11. Stop 버튼을 클릭함 */}
      <button onClick={handleStop}>Stop</button>
    </>
  );
}

코드마다 주석으로 설명을 첨부했지만, 핵심적인 내용은 useState는 상태를 업데이트하고 해당 상태에 대한 렌더링을 관리하는 반면, useRef는 값을 유지하고 컴포넌트의 렌더링과 관련이 없는 데이터를 저장하기 위해 사용된다는 점이다.