useRef

• DOM 요소에 대한 참조 : 'useRef'를 사용하면 DOM 요소에 직접적으로 접근할 수 있다. 이를 통해 DOM 요소의 속성을 읽거나 수정하거나, 명시적으로 포커스를 설정하거나, 원시 DOM API를 추가 작업을 수행할 수 있다.
• 임의의 변경 가능한 값 저장 : 'useRef'는 리렌더링 시에도 유지되는 변경 가능한 참조 객체를 반환한다. 따라서 'useRef'는 컴포넌트의 여러 렌더링 사이에서 유지하는데 사용될 수 있다. 이 값은 리액트의 렌더링 사이클에 영향을 주지 않으므로, 렌더링과 관련되지 않은 정보(예: 타이머 ID, 외부 라이브러리 인스턴스 등)을 저장하는데 적합
• 이전 상태 또는 속성값 유지 : 'useRef'는 이전 렌더링에서의 값을 저장하고 추후에 그 값을 참조하는데 사용될 수 있다. 이는 'useState'나 'useReducer'와는 달리, 값의 변경이 컴포넌트의 리렌더링을 트리거하지 않는다.

DOM 요소 참조

DomRef.tsx
import { useRef, useEffect } from "react";

export const DomRef = () => {
  // inputRef는 DOM 요소에 대한 참조를 저장하기 위한 useRef입니다.
  // 여기서는 HTMLInputElement 타입의 DOM 요소를 참조하므로, <HTMLInputElement>로 타입을 지정해줍니다.
  const inputRef = useRef<HTMLInputElement>(null!);

  // 컴포넌트가 마운트되면 (즉, 첫 렌더링 후), input 요소에 포커스를 주는 코드입니다.
  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return (
    <div>
      {/* input 요소에 ref 속성을 통해 inputRef를 연결하여 DOM 요소에 접근할 수 있게 합니다. */}
      <input type="text" ref={inputRef} />
    </div>
  );
};

App.tsx
import "./App.css";
import { DomRef } from "./components/ref/DomRef";

function App() {
  return (
    <div className="App">
      <DomRef></DomRef>
    </div>
  );
}

export default App;

페이지가 열리자마자 바로 입력할 수 있게 input 박스가 나온다.

타이머 ID 참조 저장

MutableRef.tsx
import { useState, useRef, useEffect } from "react";

export const MutableRef = () => {
  // timer 상태를 선언하고 초기값으로 0을 설정합니다.
  const [timer, setTimer] = useState(0);

  // interValRef는 타이머 ID를 저장하기 위한 useRef입니다. 
  // 타이머 ID는 number 타입이므로, <number | undefined>로 타입을 지정해줍니다.
  const interValRef = useRef<number | undefined>(undefined);

  // 타이머를 중지하는 함수입니다.
  const stopTimer = () => {
    window.clearInterval(interValRef.current);
  };

  // 컴포넌트가 마운트되면, 1초마다 timer 상태를 업데이트하는 타이머를 시작합니다.
  // 컴포넌트가 언마운트될 때 타이머를 중지합니다.
  useEffect(() => {
    interValRef.current = window.setInterval(() => {
      setTimer(timer => timer + 1);
    }, 1000);
    return () => {
      stopTimer();
    };
  }, []);

  return (
    <div>
      HookTimer - {timer} -
      {/* 타이머를 중지하는 버튼 */}
      <button onClick={() => stopTimer()}>Stop timer</button>
    </div>
  );
};

App.tsx
import "./App.css";
import { MutableRef } from "./components/ref/MutableRef";

function App() {
  return (
    <div className="App">
      <MutableRef></MutableRef>
    </div>
  );
}

export default App;

시간이 가다가 stop timer를 누르면 시간이 그대로 멈춘다.

따라서

'useRef'는 마치 '금고'와 같다. 이 금고 안에 어떤 값이든 넣을 수 있으며, 그 값은 안전하게 보관된다. 금고의 내용은 바뀔 수 있지만, 금고 자체는 항상 동일한 위치에 있다.

1. DOM 요소 참조

금고에 특정 DOM 요소(여기서는 입력 상자)의 "키"를 저장한다. 이 키를 사용하여 언제든지 해당 DOM 요소를 열고 작업을 수행할 수 있다. 예를 들어, 입력 상자에 포커스를 주거나 값을 가져오는 등의 작업

2. 임의의 값 저장

금고에 타이머를 저장. 타이머를 시작하면, 금고에 타이머의 id를 넣는다. 그리고 필요할 때 이 ID를 꺼내와서 타이머를 중지

정리

• 'useRef'는 특정 값(예: DOM 요소나 타이머 ID)를 안전하게 보관하게 해준다.
• 이 값은 컴포넌트가 다시 그려질 때 변하지 않는다.
• 필요할 때 그 값을 꺼내와서 사용할 수 있다.