Callback Ref : DOM 참조를 더 유연하게 관리

 

앞서 useRef를 활용해 DOM요소를 참조하는 방법을 살펴봤는데 상황에 따라 정적인 참조 방식으로는 해결하기 어려운 문제가 있을 수 있다. 이럴 때 더 동적이고 유연한 방식으로 DOM참조를 관리할 수 있는 Callback Ref가 유용하다.

DOM 요소에 대한 참조를 설정하거나 업데이트 할 때 더 많은 제어권을 가질 수 있다.

 

Callback ref는 React에서 DOM 요소나 컴포넌트의 참조를 관리하는 또 다른 방법으로 useRef와  React.createRef()를 대신해서 사용할 수 있다.

일반적으로 React에서 ref를 사용하면 컴포넌트가 DOM요소를 참조하도록 설정할 수 있지만,

Callback ref는 동적으로 참조를 설정하거나 특정 동작을 할 때 유용하게 사용된다.

 

기본 사용법:

Callback ref는 함수 형태로 ref를 설정하는 방식이다. 이 함수는 React가 해당 요소에 참조를 설정하거나 해제할 때마다 호출된다.

 

문법

function MyComponent() {
  const setRef = (node) => {
    // node는 실제 DOM 요소입니다
    if (node) {
      // ref가 설정되었을 때
      console.log("DOM element is mounted", node);
    } else {
      // ref가 해제되었을 때
      console.log("DOM element is unmounted");
    }
  };

  return <div ref={setRef}>Hello, world!</div>;
}

 

 

1. setRef는 DOM 요소를 받는 콜백 함수 이다.

• React가 <div>를 DOM에 추가할 때 setRef(node)를 호출하고, node에 해당 DOM요소를 전달한다.
• React가 <div>를 DOM에서 제거하면 setRef(null)을 호출한다.

2. 선언 없이 ref={setRef}만 설정하면 된다.

• useRef(null)처럼 값을 미리 저장할 필요가 없다.

 

동작의 흐름 이해

1. 컴포넌트가 처음 렌더링 되면 <div>가 DOM에 추가 되고, setRef가 호출된다.

• 이때 node는 <div> DOM 요소를 가리킨다.
• console.log("DOM element is mounted", node)가 실행되어 <div> DOM 요소 정보를 출력한다.

2. 컴포넌트가 언마운트되면 React는 setRef(null)을 호출한다.

• 이때 node는 null이 되고, console.log("DOM element is unmounted")가 실행된다.

 

주의할 점

callback ref는 React가 ref 설정 시마다 호출된다. 따라서 DOM변경 로직이 자주 실행되면 성능에 영향을 줄 수 있다.

 

 

특징

1. 동적으로 ref를 처리 : setRef함수는 동적으로 DOM 요소에 대한 참조를 설정하고 해제할 수 있다.

node인자는 해당 DOM 요소를 가리키며, 요소가 마운트되면 node에 그 요소가 할당되고, 언마운트되면 node는 null로 설정된다.

2. 리액트의 ref와 유사하지만 더 유연함 : useRef나 React.createRef()는 ref가 한 번 설정되면 계속해서 참조 되지만, callback ref는 참조할 때마다 동적으로 실행되므로 , 참조가 필요할 때마다 특정 작업을 수행하 ㄹ수 있다.

 

 

예시 : DOM 요소 참조와 함께 작업하기

import React, { useState } from 'react';

function FocusableInput() {
  const [focused, setFocused] = useState(false);

  // ref를 설정할 함수 정의
  const inputRef = (node) => {
    if (node) {
      if (focused) {
        node.focus();  // Focused 상태일 때 input에 focus
      } else {
        node.blur();  // 블러 상태일 때 blur
      }
    }
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={() => setFocused(!focused)}>
        Toggle Focus
      </button>
    </div>
  );
}

export default FocusableInput;

 

• inputRef함수는 ref={inputRef}로 설정되어 있으며, <input /> 요소가 마운트되거나 언마운트될 때마다 호출된다.
• focused 상태에 따라 inputRef에서 해당 input 요소에 focus() 또는 blur()를 적용한다.
• 버튼을 클릭하면 focused 값이 변경되고, inputRef함수가 호출되어 해당 input 요소의 포커스를 제어한다.

 

사용하는 이유

• 동적인 참조 관리 : useRef나 createRef로는 주로 참조가 초기화되며 값이 변하지 않지만, callback ref를 사용하면 동적으로 추가적인 작업을 할 수 있다.
• 더 정밀한 제어 : 컴포넌트에서 참조를 보다 정밀하게 제어 할 수 있으며, 다른 사이드 이펙트를 처리할 수 있다.

 

정리 

callback ref는 React에서 ref를 함수 형태로 설정하여, DOM 요소에 대해 마운트 및 언마운트 시 동작을 제어 하는 방식이다. 이를 통해 ref가 설정되거나 해제될 때마다 특정 동작을 트리거할 수 있다. useRef나 createRef에 비해 더 유연하고 동적인 사용이 가능하다.