1. useRef란?

useRef는 렌더링에 상관없이 값을 저장하거나, DOM 요소에 직접 접근할 때 사용하는 Hook입니다.

1.1 useState vs useRef

1.2 기본 구조

const ref = useRef(초기값);

// 값 접근
console.log(ref.current);

// 값 변경
ref.current = 새로운값;

2. DOM 요소에 접근하기

useRef의 가장 일반적인 사용법은 DOM 요소에 직접 접근하는 것입니다.

import { useRef } from 'react';

function App() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>포커스 넣기!</button>
    </div>
  );
}

export default App;

버튼을 클릭하면 inputRef.current가 가리키는 input 요소에 포커스가 들어갑니다. 바닐라 JS의 document.querySelector('input').focus()와 같은 역할입니다.

3. 값 저장하기 (리렌더링 없이)

useRef로 저장한 값은 변경해도 리렌더링이 발생하지 않습니다.

function Counter() {
  const count = useRef(0);

  const handleCountUp = () => {
    count.current = count.current + 1;
    console.log(`count: ${count.current}`); // 콘솔에는 증가한 값 출력
  };

  return (
    <div>
      <div>{count.current}</div> {/* 화면은 0으로 유지 */}
      <button onClick={handleCountUp}>증가</button>
    </div>
  );
}

버튼을 클릭하면 콘솔에는 증가한 값이 출력되지만, 화면의 숫자는 변하지 않습니다. 리렌더링이 발생하지 않기 때문입니다.

4. 실습

자동 저장 기능이 있는 메모장을 만들어보세요. useRef로 타이머를 관리합니다.

[기본 코드]

import { useRef, useState, useEffect } from 'react';

function AutoSaveMemo() {
  const [content, setContent] = useState('');
  const [lastSaved, setLastSaved] = useState(null);
  const timerRef = useRef(null);

  const handleChange = (e) => {
    setContent(e.target.value);
  };

  return (
    <div>
      <h1>자동 저장 메모장</h1>
      <textarea
        value={content}
        onChange={handleChange}
        placeholder="메모를 입력하세요..."
      />
      {lastSaved && <p>마지막 저장: {lastSaved}</p>}
    </div>
  );
}

export default AutoSaveMemo;

[요구사항]