React를 처음 사용할 때는 대부분 상태를 useState로 관리한다.

const [value, setValue] = useState('');

값이 바뀌면 React가 다시 렌더링하고, UI는 그 상태를 기준으로 업데이트된다.

이게 React의 기본 흐름이다.

하지만 모든 값을 state로 관리하는 게 항상 좋은 선택은 아니다.

input에 focus 주기
DOM 크기 측정하기
이전 값 기억하기
부모 컴포넌트에서 자식 input을 제어하기

같은 작업은 state보다 ref가 더 적합한 경우가 많았다.

이때 사용하는 Hook이 useRef다.

useRef란

useRef는 렌더링 사이에서 값을 유지할 수 있는 객체를 만든다.

const ref = useRef(initialValue);

반환값은 이런 형태다.

{
  current: initialValue
}

핵심은 두 가지다.

1. ref.current 값은 렌더링 사이에서도 유지된다.
2. ref.current 값이 바뀌어도 리렌더링되지 않는다.

이게 useState와 가장 큰 차이다.

useRef의 첫 번째 용도: DOM 참조

가장 많이 쓰는 용도는 DOM 요소에 직접 접근하는 것이다.

예를 들어 버튼을 누르면 input에 focus를 주고 싶다고 하자.

import { useRef } from 'react';

function InputFocus() {
  const inputRef = useRef<HTMLInputElement | null>(null);

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

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>Focus</button>
    </>
  );
}

여기서

<input ref={inputRef} />

를 통해 실제 DOM 노드가 inputRef.current에 들어간다.

inputRef.current?.focus();

이렇게 브라우저 DOM API를 직접 호출할 수 있다.

왜 DOM 접근이 필요할까

React는 기본적으로 선언형 UI를 지향한다.

즉 보통은

상태 변경
→ React 렌더링
→ DOM 업데이트

흐름을 따른다.

하지만 DOM 자체의 명령형 API를 써야 하는 경우가 있다.

예를 들어

focus()
scrollIntoView()
getBoundingClientRect()
play()
pause()
selectionStart
canvas context 접근

이런 작업은 React state만으로 처리하기 어렵다.

이때 useRef로 DOM 노드를 잡고 직접 DOM API를 사용한다.

input으로 focus 이동

회원가입 폼에서 검증 실패가 발생했을 때, 첫 번째 에러 필드로 자동 focus를 이동시키는 경우가 있다.

function SignupForm() {
  const emailRef = useRef<HTMLInputElement | null>(null);
  const passwordRef = useRef<HTMLInputElement | null>(null);

  function handleSubmit() {
    const email = emailRef.current?.value;
    const password = passwordRef.current?.value;

    if (!email) {
      emailRef.current?.focus();
      return;
    }

    if (!password) {
      passwordRef.current?.focus();
      return;
    }

    // submit
  }

  return (
    <>
      <input ref={emailRef} placeholder="이메일" />
      <input ref={passwordRef} placeholder="비밀번호" />
      <button onClick={handleSubmit}>가입</button>
    </>
  );
}

이런 작업은 UI 상태라기보다 브라우저 동작 제어에 가깝다.

그래서 useState보다 useRef가 자연스럽다

이전 값 기억하기

이전 props나 state 값을 비교해야 할 때도 useRef를 사용할 수 있다.

function SearchResult({ query }: { query: string }) {
  const prevQueryRef = useRef<string | null>(null);

  useEffect(() => {
    if (prevQueryRef.current !== query) {
      console.log('검색어 변경:', prevQueryRef.current, '→', query);
    }

    prevQueryRef.current = query;
  }, [query]);

  return <div>{query}</div>;
}

prevQueryRef.current는 렌더링 사이에서 유지된다.

하지만 값이 바뀌어도 리렌더링을 일으키지 않는다.

이런 “기억은 해야 하지만 화면에는 직접 영향이 없는 값”에 적합하다.

중복 요청 방지 플래그

버튼을 빠르게 여러 번 클릭해서 API 요청이 중복되는 문제를 막을 때도 useRef를 사용할 수 있다.

function SubmitButton() {
  const isSubmittingRef = useRef(false);

  async function handleSubmit() {
    if (isSubmittingRef.current) return;

    isSubmittingRef.current = true;

    try {
      await submitForm();
    } finally {
      isSubmittingRef.current = false;
    }
  }

  return <button onClick={handleSubmit}>제출</button>;
}

물론 화면에 로딩 상태를 보여줘야 한다면 useState가 필요하다.

const [isSubmitting, setIsSubmitting] = useState(false);

하지만 단순히 중복 실행만 막고 UI 변경이 필요 없다면 useRef가 더 가볍다.

useRef를 남용하면 안 되는 이유

useRef는 리렌더링을 발생시키지 않는다는 점 때문에 편해 보인다.

하지만 이 특성 때문에 오히려 위험할 수도 있다.

예를 들어

const countRef = useRef(0);

function increase() {
  countRef.current += 1;
}

이렇게 값을 바꿔도 화면은 변하지 않는다.

즉 UI와 ref 값이 쉽게 어긋날 수 있다.

그래서 기준은 분명해야 한다.

화면에 보여야 하는 값
→ useState

화면과 무관하게 기억만 하면 되는 값
→ useRef

useRef를 상태관리 대체재처럼 쓰기 시작하면 React의 렌더링 흐름을 우회하게 된다.

forwardRef

useRef는 DOM에 직접 붙일 수 있다.

<input ref={inputRef} />

하지만 직접 만든 컴포넌트에는 기본적으로 ref를 바로 전달할 수 없다.

<FancyInput ref={inputRef} />

이렇게 쓰고 싶어도, FancyInput 내부의 실제 input까지 ref가 자동으로 전달되지 않는다.

왜냐하면 React 입장에서 FancyInput은 DOM 노드가 아니라 컴포넌트 함수이기 때문이다.

이때 사용하는 것이 forwardRef다.

forwardRef란

forwardRef는 부모가 전달한 ref를 자식 컴포넌트 내부의 DOM 요소로 전달할 수 있게 해준다.

import { forwardRef } from 'react';

const FancyInput = forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
  function FancyInput(props, ref) {
    return <input ref={ref} {...props} />;
  }
);

부모는 이렇게 사용할 수 있다.

function Parent() {
  const inputRef = useRef<HTMLInputElement | null>(null);

  return (
    <>
      <FancyInput ref={inputRef} />
      <button onClick={() => inputRef.current?.focus()}>
        포커스
      </button>
    </>
  );
}

이제 부모가 FancyInput 내부의 실제 <input>에 접근할 수 있다.

forwardRef는 언제 필요할까

실무에서는 주로 공용 UI 컴포넌트를 만들 때 필요하다.

예를 들어 디자인 시스템의 Input 컴포넌트가 있다고 하자.

<Input label="이메일" />

겉으로는 커스텀 컴포넌트지만, 실제로는 내부에 <input>이 있다.

이때 form library나 부모 컴포넌트에서 focus, validation, register를 위해 실제 input DOM에 접근해야 할 수 있다.

그래서 공용 input 컴포넌트는 ref forwarding을 지원하는 경우가 많다.

React Hook Form과 커스텀 Input

React Hook Form의 register는 내부적으로 input ref를 사용한다.

그래서 커스텀 Input 컴포넌트를 만들 때 ref 전달이 제대로 되지 않으면 form 등록이 깨질 수 있다.

const TextInput = forwardRef<
  HTMLInputElement,
  React.ComponentProps<'input'>
>(function TextInput(props, ref) {
  return (
    <input
      ref={ref}
      {...props}
      className="rounded border px-3 py-2"
    />
  );
});

사용

<input {...register('email')} />

대신 커스텀 컴포넌트에서도 이런 식으로 연결할 수 있다.

<TextInput {...register('email')} />

이런 구조가 가능하려면 TextInput이 내부 input으로 ref를 전달해야 한다.

즉 forwardRef는 단순히 포커스용이 아니라, form library와 디자인 시스템을 연결할 때도 중요하다.

useImperativeHandle

forwardRef를 사용하면 부모가 자식 내부 DOM에 직접 접근할 수 있다.

inputRef.current?.focus();

하지만 이 방식은 내부 구현을 너무 많이 노출한다.

부모가 자식의 내부 DOM 구조를 알아야 하기 때문이다.

예를 들어 자식 컴포넌트 내부가 나중에 <input>에서 다른 구조로 바뀌면 부모 코드도 영향을 받을 수 있다.

이때 사용하는 것이 useImperativeHandle이다.

useImperativeHandle이란

useImperativeHandle은 부모가 ref로 접근할 수 있는 값을 직접 정의하는 Hook이다.

즉 내부 DOM 전체를 노출하는 대신, 부모에게 필요한 메서드만 공개할 수 있다.

useImperativeHandle(ref, () => ({
  focus() {
    inputRef.current?.focus();
  },
  clear() {
    if (inputRef.current) {
      inputRef.current.value = '';
    }
  },
}));

이렇게 하면 부모는 내부 DOM이 아니라 공개된 API만 사용한다.

내부 구현을 숨긴 Input 컴포넌트

부모:

type FancyInputHandle = {
  focus: () => void;
  clear: () => void;
};

function Parent() {
  const inputRef = useRef<FancyInputHandle | null>(null);

  return (
    <>
      <FancyInput ref={inputRef} />

      <button onClick={() => inputRef.current?.focus()}>
        포커스
      </button>

      <button onClick={() => inputRef.current?.clear()}>
        지우기
      </button>
    </>
  );
}

자식:

import {
  forwardRef,
  useImperativeHandle,
  useRef,
} from 'react';

type FancyInputHandle = {
  focus: () => void;
  clear: () => void;
};

const FancyInput = forwardRef<FancyInputHandle>(
  function FancyInput(_, ref) {
    const inputRef = useRef<HTMLInputElement | null>(null);

    useImperativeHandle(
      ref,
      () => ({
        focus() {
          inputRef.current?.focus();
        },
        clear() {
          if (inputRef.current) {
            inputRef.current.value = '';
          }
        },
      }),
      []
    );

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

이제 부모는 내부 input DOM을 직접 만지지 않는다.

대신 자식이 허용한 명령만 실행한다.

inputRef.current?.focus();
inputRef.current?.clear();

이 구조는 캡슐화에 좋다.

언제 useImperativeHandle을 써야 할까

사실 자주 쓸 Hook은 아니다.

React는 기본적으로 선언형 흐름을 권장한다.

즉 부모가 자식에게 명령하는 구조보다:

<Modal open={isOpen} />

처럼 props로 상태를 전달하는 구조가 더 자연스럽다.

하지만 다음 같은 경우에는 useImperativeHandle이 유용하다.

focus
clear
scrollTo
play / pause
reset
open / close
외부 라이브러리 인스턴스 제어

즉 DOM이나 외부 객체를 명령형으로 제어해야 하는 경우다.

useRef를 사용할 때 주의할 점

1. ref 변경은 리렌더링되지 않는다

ref.current = newValue;

이렇게 해도 화면은 바뀌지 않는다.

화면에 반영되어야 하는 값이라면 useState를 써야 한다.

2. 렌더링 중 ref 값을 읽는 것은 조심해야 한다

렌더링 중에 ref.current를 기준으로 UI를 결정하면 예측이 어려워질 수 있다.

return <div>{ref.current}</div>;

이런 코드는 React 렌더링 흐름과 잘 맞지 않는다.

렌더링에 필요한 값은 state로 관리하는 편이 좋다.

3. DOM 조작을 남용하면 React와 충돌할 수 있다

예를 들어 React가 관리하는 DOM을 ref로 직접 계속 수정하면, React의 상태와 실제 DOM이 어긋날 수 있다.

inputRef.current!.value = 'hello';

이런 코드는 특정 상황에서는 필요하지만, controlled input과 섞이면 문제가 될 수 있다.

4. useImperativeHandle은 공용 컴포넌트 API처럼 설계해야 한다

부모에게 아무 값이나 노출하면 내부 구현이 새어 나간다.

좋은 예:

{
  focus: () => void;
  clear: () => void;
}

나쁜 예:

{
  inputElement: HTMLInputElement;
  internalState: ...
}

가능하면 내부 DOM 전체보다 필요한 명령만 공개하는 편이 좋다.

useRef, forwardRef, useImperativeHandle