useRef와 callback Ref 비교하기

useRef와 callback ref는 모두 React에서 DOM 요소를 참조하거나 제어하는 데 사용된다.

둘다 비슷한 역할을 하지만 구현 방식과 사용 목적에 차이가 있다.

 

1. useRef

useRef는 React훅으로, DOM 요소나 변경 가능한 값을 저장하기 위해 사용된다.

 

특징

• DOM 요소에 ref 속성으로 전달하여 해당 DOM을 참조한다.
• React에서 제공하는 ref객체를 반환하며, 해당 객체의 .current 프로퍼티를 통해 요소를 참조한다.
• 정적인 참조를 제공한다. 즉, 컴포넌트가 다시 렌더링되어도 참조는 유지된다.

사용 예시

import React, { useRef } from "react";

const App = () => {
  const inputRef = useRef(null); // ref 객체 생성

  const focusInput = () => {
    inputRef.current.focus(); // input 요소에 포커스를 설정
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
};

 

 

2. Callback Ref

Callback ref는 함수 형태로 ref를 설정하는 방식이다. DOM요소가 생성되거나 변경될 때, callback 함수가 호출된다.

 

특징

• ref 속성에 함수를 전달하여 DOM 요소를 동적으로 참조
• React는 요소가 마운트될 때와 언마운트될 때 각각 함수를 호출한다.(마운트 시 요소를 참조 객체에 저장, 언마운트 시 null을 전달하여 참조를 정리)
• 더 복잡한 로직이 필요한 경우 유용하다.

사용 예시

import React, { useState } from "react";

const App = () => {
  const [inputElement, setInputElement] = useState(null);

  const focusInput = () => {
    if (inputElement) inputElement.focus(); // 마운트된 input 요소에 포커스를 설정
  };

  return (
    <div>
      <input ref={(el) => setInputElement(el)} type="text" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
};

 

 

3. useRef와 callback Ref의 관계

둘 다 DOM 요소를 참조하는 역할을 하지만, 다음고 같은 차이점이 있다.

	useRef	Callback Ref
참조 방식	ref.current를 통해 참조	함수에서 참조를 동적으로 처리
값 업데이트	DOM 참조를 자동으로 관리	참조 로직을 직접 작성해야 함
렌더링 영향	참조가 업데이트 되어도 렌더링 트리거가 없음	상태값을 업데이트하면 렌더링 발생 가능
주요 사용 사례	단순한 DOM 참조 및 제어	복잡한 로직이 필요한 경우

 

 

4. useRef와 Callback Ref의 통합

사실 useRef를 활용하면 callback ref와 유사한 동작을 구현할 수 있다.

callback ref를 useRef와 함께 사용하는 방식도 있다.

 

예시 : useRef로 callback ref 구현

import React, { useRef } from "react";

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

  const setRef = (el) => {
    inputRef.current = el; // DOM 요소를 ref.current에 저장
  };

  const focusInput = () => {
    inputRef.current.focus(); // 저장된 참조 사용
  };

  return (
    <div>
      <input ref={setRef} type="text" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
};