useRef란?

useRef는 React에서 제공하는 훅 중 하나로, 참조(ref)를 생성하고 이를 React 컴포넌트 내에서 DOM 요소나 값에 접근할 수 있게 해준다. 이는 주로 DOM 요소에 대한 참조와 변경되지 않는 값을 저장하기 위해 사용된다.

 

기본 개념

useRef는 변경 가능한 객체를 반환하며, 이 객체는 current라는 프로퍼티를 가진다. 이 프로퍼티를 통해 직접 값이나 DOM 요소를 할당하고 이를 참조할 수 있다.

const myRef = useRef(initialValue);

• myRef : useRef로 생성된 참조 객체
• myRef.currnet : 참조된 값, DOM 요소

useRef는 리렌더링과 관계없이 참조된 값을 계속 유지한다. 즉, 값이 변경되도 리렌더링을 일으키지 않으며, 이는 성능 최적화에 유리하다.

 

사용 예시

1. DOM 요소에 접근 : useRef는 주로 DOM 요소를 참조할 때 사용한다. 

import { useRef, useEffect } from "react";

const FocusInput = () => {
  const inputRef = useRef();  // inputRef는 DOM 요소를 참조할 객체

  useEffect(() => {
    // 컴포넌트가 렌더링된 후, input 요소에 포커스를 줍니다.
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} />;
};

• useRef()를 사용해 inputRef 참조 객체를 만들고 input 요소에 ref={inputRef} 로 연결한다
• inputRef.current는 실제 DOM 요소인 <input>을 참조하며, 이를 통해 해당 요소에 focus를 줄 수 있다.

2. 변경되지 않는 값 저장 : 값이 변경되어도 컴포넌트가 다시 렌더링되지 않기 때문에 컴포넌트 렌더링 간에 값을 저장하고 유지하는 데도 사용할 수 있다.

import { useRef } from "react";

const Timer = () => {
  const countRef = useRef(0);  // countRef는 초기 값 0으로 설정된 참조 객체

  const increment = () => {
    countRef.current += 1;  // countRef.current의 값만 변경
    console.log(countRef.current);
  };

  return (
    <div>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

• countRef는 값이 변경되어도 리렌더링을 일으키지 않는다.
• countRef.currnet는 리렌더링 없이 값만 변경된다.

3. 기존 값 참조 및 업데이트

import { useRef, useState } from "react";

const Timer = () => {
  const [count, setCount] = useState(0);
  const intervalRef = useRef();  // setInterval ID를 저장할 ref

  const startTimer = () => {
    intervalRef.current = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);
  };

  const stopTimer = () => {
    clearInterval(intervalRef.current);  // 저장된 setInterval ID로 타이머 정지
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={startTimer}>Start</button>
      <button onClick={stopTimer}>Stop</button>
    </div>
  );
};

• intervalRef는 setInterval의 ID를 저장하고, 이를 clearInterval에서 참조하여 타이머를 정지할 수 있게 해준다.