React Ref 콜백 마스터하기: 성능 최적화를 위한 궁극적인 가이드

현대 웹 개발 세계에서 성능은 단순한 기능이 아니라 필수 요소입니다. React를 사용하는 개발자에게 빠르고 반응성이 뛰어난 사용자 인터페이스를 구축하는 것은 주요 목표입니다. React의 가상 DOM과 재조정 알고리즘이 많은 어려운 작업을 처리하지만, 최상의 성능을 발휘하려면 깊은 이해가 중요한 특정 패턴과 API가 있습니다. 그러한 영역 중 하나는 refs 관리, 특히 종종 오해되는 콜백 refs의 동작입니다.

Refs는 렌더 메서드에서 생성된 DOM 노드 또는 React 요소에 액세스하는 방법을 제공합니다. 이는 포커스 관리, 애니메이션 트리거 또는 타사 DOM 라이브러리와 통합과 같은 작업에 필수적인 이스케이프 해치입니다. useRef가 함수형 컴포넌트에서 간단한 경우의 표준이 되었지만, 콜백 refs는 참조가 설정되고 해제되는 시점에 대한 더 강력하고 세밀한 제어를 제공합니다. 그러나 이 힘에는 미묘함이 따릅니다. 콜백 ref는 컴포넌트의 라이프사이클 동안 여러 번 실행될 수 있으며, 올바르게 처리되지 않으면 성능 병목 현상과 버그를 유발할 수 있습니다.

이 포괄적인 가이드는 React ref 콜백을 명확히 설명합니다. 다음을 살펴봅니다.

• 콜백 refs가 무엇이며 다른 ref 유형과 어떻게 다른가.
• 콜백 refs가 두 번 호출되는 핵심 이유 (null로 한 번, 요소로 한 번).
• ref 콜백에 인라인 함수를 사용하는 경우의 성능 문제.
• useCallback 훅을 사용하여 최적화하는 확실한 솔루션.
• 종속성을 처리하고 외부 라이브러리와 통합하기 위한 고급 패턴.

이 기사를 마치면 콜백 refs를 자신 있게 사용할 수 있는 지식을 갖게 되어 React 애플리케이션이 강력할 뿐만 아니라 매우 뛰어난 성능을 발휘하도록 보장할 수 있습니다.

간단한 복습: 콜백 Refs란 무엇인가?

최적화에 들어가기 전에 콜백 ref가 무엇인지 간단히 다시 살펴보겠습니다. useRef() 또는 React.createRef()로 생성된 ref 객체를 전달하는 대신 ref 속성에 함수를 전달합니다. 이 함수는 컴포넌트가 마운트 및 언마운트될 때 React에 의해 실행됩니다.

React는 컴포넌트가 마운트될 때 DOM 요소를 인수로 사용하여 ref 콜백을 호출하고, 컴포넌트가 언마운트될 때 null을 인수로 사용하여 호출합니다. 이렇게 하면 참조가 사용 가능하게 되거나 파괴되기 직전의 정확한 순간에 정밀하게 제어할 수 있습니다.

다음은 함수형 컴포넌트의 간단한 예입니다.

            import React, { useState } from 'react';

function TextInputWithFocusButton() {
  let textInput = null;

  const setTextInputRef = element => {
    console.log('Ref callback fired with:', element);
    textInput = element;
  };

  const focusTextInput = () => {
    // Focus the text input using the raw DOM API
    if (textInput) textInput.focus();
  };

  return (
    <div>
      <input type="text" ref={setTextInputRef} />
      <button onClick={focusTextInput}>
        Focus the text input
      </button>
    </div>
  );
}

            

              
                Copy
              
            
          

이 예에서 setTextInputRef는 콜백 ref입니다. <input> 요소가 렌더링될 때 해당 요소로 호출되어 focus()를 호출하기 위해 저장하고 나중에 사용할 수 있습니다.

핵심 문제: Ref 콜백이 두 번 실행되는 이유는 무엇입니까?

개발자를 종종 혼란스럽게 하는 주요 동작은 콜백의 이중 호출입니다. 콜백 ref가 있는 컴포넌트가 렌더링될 때 콜백 함수는 일반적으로 연속적으로 두 번 호출됩니다.

1. 첫 번째 호출: null을 인수로 사용합니다.
2. 두 번째 호출: DOM 요소 인스턴스를 인수로 사용합니다.

이것은 버그가 아니라 React 팀의 의도적인 설계 선택입니다. null을 사용한 호출은 이전 ref (있는 경우)가 분리되고 있음을 나타냅니다. 이렇게 하면 중요한 정리 작업을 수행할 수 있는 기회가 제공됩니다. 예를 들어 이전 렌더링에서 노드에 이벤트 리스너를 연결한 경우 null 호출은 새 노드가 연결되기 전에 해당 리스너를 제거하는 완벽한 순간입니다.

그러나 문제는 이 마운트/언마운트 주기가 아닙니다. 진정한 성능 문제는 컴포넌트의 상태 업데이트가 ref 자체와 완전히 관련이 없는 방식으로 발생하는 경우에도 모든 단일 재렌더링에서 이 이중 실행이 발생할 때 발생합니다.

인라인 함수의 문제점

다음은 재렌더링되는 함수형 컴포넌트 내부의 겉보기에 무해한 구현을 고려해 보겠습니다.

            import React, { useState } from 'react';

function FrequentUpdatesComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h3>Counter: {count}</h3>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
      <div
        ref={(node) => {
          // This is an inline function!
          console.log('Ref callback fired with:', node);
        }}
      >
        I am the referenced element.
      </div>
    </div>
  );
}

            

              
                Copy
              
            
          

이 코드를 실행하고 "Increment" 버튼을 클릭하면 모든 클릭에서 콘솔에 다음이 표시됩니다.

            Ref callback fired with: null
Ref callback fired with: <div>...</div>

            

              
                Copy
              
            
          

왜 이런 일이 발생할까요? 각 렌더링에서 ref prop에 대해 새로운 함수 인스턴스를 생성하고 있기 때문입니다. (node) => { ... }. 재조정 프로세스 중에 React는 이전 렌더링의 props와 현재 렌더링의 props를 비교합니다. ref prop이 변경되었음을 확인합니다 (이전 함수 인스턴스에서 새 함수 인스턴스로). React의 계약은 분명합니다. ref 콜백이 변경되면 먼저 null을 사용하여 이전 ref를 지우고, DOM 노드를 사용하여 새 ref를 설정해야 합니다. 이렇게 하면 모든 단일 렌더링에서 불필요하게 정리/설정 주기가 트리거됩니다.

간단한 console.log의 경우 이는 사소한 성능 저하입니다. 하지만 콜백이 다음과 같은 비용이 많이 드는 작업을 수행한다고 상상해 보세요.

• 복잡한 이벤트 리스너 연결 및 분리 (예: scroll, resize).
• D3.js 차트 또는 매핑 라이브러리와 같은 무거운 타사 라이브러리 초기화.
• 레이아웃 리플로우를 유발하는 DOM 측정 수행.

모든 상태 업데이트에서 이 로직을 실행하면 애플리케이션의 성능이 심각하게 저하되고 추적하기 어려운 미묘한 버그가 발생할 수 있습니다.

솔루션: `useCallback`으로 메모이제이션

이 문제에 대한 해결책은 변경하려는 경우가 아니면 React가 재렌더링에서 ref 콜백에 대해 정확히 동일한 함수 인스턴스를 수신하도록 하는 것입니다. 이것은 useCallback 훅에 대한 완벽한 사용 사례입니다.

useCallback은 콜백 함수의 메모이제이션된 버전을 반환합니다. 이 메모이제이션된 버전은 종속성 배열의 종속성 중 하나가 변경된 경우에만 변경됩니다. 빈 종속성 배열 ([])을 제공하여 컴포넌트의 전체 수명 동안 유지되는 안정적인 함수를 만들 수 있습니다.

useCallback을 사용하여 이전 예제를 리팩터링해 보겠습니다.

            import React, { useState, useCallback } from 'react';

function OptimizedComponent() {
  const [count, setCount] = useState(0);

  // Create a stable callback function with useCallback
  const myRefCallback = useCallback(node => {
    // This logic now runs only when the component mounts and unmounts
    console.log('Ref callback fired with:', node);
    if (node !== null) {
      // You can perform setup logic here
      console.log('Element is mounted!');
    }
  }, []); // <-- Empty dependency array means the function is created only once

  return (
    <div>
      <h3>Counter: {count}</h3>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
      <div ref={myRefCallback}>
        I am the referenced element.
      </div>
    </div>
  );
}

            

              
                Copy
              
            
          

이제 이 최적화된 버전을 실행하면 콘솔 로그가 총 두 번만 표시됩니다.

1. 컴포넌트가 처음 마운트될 때 (Ref callback fired with: <div>...</div>).
2. 컴포넌트가 언마운트될 때 (Ref callback fired with: null).

"Increment" 버튼을 클릭해도 더 이상 ref 콜백이 트리거되지 않습니다. 모든 재렌더링에서 불필요한 정리/설정 주기를 성공적으로 방지했습니다. React는 후속 렌더링에서 ref prop에 대해 동일한 함수 인스턴스를 확인하고 변경이 필요하지 않다고 올바르게 판단합니다.

고급 시나리오 및 모범 사례

빈 종속성 배열이 일반적이지만 ref 콜백이 props 또는 상태의 변경에 반응해야 하는 시나리오가 있습니다. 이것이 useCallback의 종속성 배열의 힘이 진정으로 빛나는 곳입니다.

콜백에서 종속성 처리

상태 또는 prop에 따라 ref 콜백 내에서 일부 로직을 실행해야 한다고 가정합니다. 예를 들어 현재 테마를 기반으로 `data-` 속성을 설정합니다.

            function ThemedComponent({ theme }) {
  const [internalState, setInternalState] = useState(0);

  const themedRefCallback = useCallback(node => {
    if (node !== null) {
      // This callback now depends on the 'theme' prop
      console.log(`Setting theme attribute to: ${theme}`);
      node.setAttribute('data-theme', theme);
    }
  }, [theme]); // <-- Add 'theme' to the dependency array

  return (
    <div>
      <p>Current Theme: {theme}</p>
      <div ref={themedRefCallback}>This element's theme will update.</div>
      {/* ... imagine a button here to change the parent's theme ... */}
    </div>
  );
}

            

              
                Copy
              
            
          

이 예에서는 useCallback의 종속성 배열에 theme을 추가했습니다. 이것은 다음을 의미합니다.

• 새로운 themedRefCallback 함수는 theme prop이 변경된 경우에만 생성됩니다.
• theme prop이 변경되면 React는 새 함수 인스턴스를 감지하고 ref 콜백을 다시 실행합니다 (먼저 null로, 다음으로 요소로).
• 이렇게 하면 업데이트된 theme 값으로 `data-theme` 속성을 설정하는 효과를 다시 실행할 수 있습니다.

이것은 올바르고 의도된 동작입니다. 관련 없는 상태 업데이트에서 실행되는 것을 방지하면서 종속성이 변경될 때 ref 로직을 다시 트리거하도록 React에 명시적으로 지시하고 있습니다.

타사 라이브러리와 통합

콜백 refs의 가장 강력한 사용 사례 중 하나는 DOM 노드에 연결해야 하는 타사 라이브러리의 인스턴스를 초기화하고 파괴하는 것입니다. 이 패턴은 콜백의 마운트/언마운트 특성을 완벽하게 활용합니다.

다음은 차트 또는 맵 라이브러리와 같은 라이브러리를 관리하기 위한 강력한 패턴입니다.

            import React, { useRef, useCallback, useEffect } from 'react';
import SomeChartingLibrary from 'some-charting-library';

function ChartComponent({ data }) {
  // Use a ref to hold the library instance, not the DOM node
  const chartInstance = useRef(null);

  const chartContainerRef = useCallback(node => {
    // The node is null when the component unmounts
    if (node === null) {
      if (chartInstance.current) {
        console.log('Cleaning up chart instance...');
        chartInstance.current.destroy(); // Cleanup method from the library
        chartInstance.current = null;
      }
      return;
    }

    // The node exists, so we can initialize our chart
    console.log('Initializing chart instance...');
    const chart = new SomeChartingLibrary(node, {
      // Configuration options
      data: data,
    });
    chartInstance.current = chart;

  }, [data]); // Re-create the chart if the data prop changes

  return <div className="chart-container" ref={chartContainerRef} style={{ height: '400px' }} />;
}

            

              
                Copy
              
            
          

이 패턴은 매우 깔끔하고 탄력적입니다.

1. 초기화: `div`가 마운트되면 콜백은 `node`를 수신합니다. 차트 라이브러리의 새 인스턴스를 만들고 `chartInstance.current`에 저장합니다.
2. 정리: 컴포넌트가 언마운트될 때 (또는 `data`가 변경되어 재실행이 트리거되는 경우) 콜백이 먼저 `null`로 호출됩니다. 코드는 차트 인스턴스가 존재하는지 확인하고, 존재하는 경우 해당 `destroy()` 메서드를 호출하여 메모리 누수를 방지합니다.
3. 업데이트: 종속성 배열에 `data`를 포함하면 차트의 데이터를 근본적으로 변경해야 하는 경우 전체 차트가 깔끔하게 파괴되고 새 데이터로 다시 초기화됩니다. 간단한 데이터 업데이트의 경우 라이브러리에서 `update()` 메서드를 제공할 수 있으며, 이 메서드는 별도의 `useEffect`에서 처리할 수 있습니다.

성능 비교: 언제 최적화가 *정말로* 중요할까요?

실용적인 사고 방식으로 성능에 접근하는 것이 중요합니다. 모든 ref 콜백을 `useCallback`으로 래핑하는 것이 좋은 습관이지만 실제 성능 영향은 콜백 내부에서 수행되는 작업에 따라 크게 달라집니다.

미미한 영향 시나리오

콜백이 간단한 변수 할당만 수행하는 경우 각 렌더링에서 새 함수를 만드는 오버헤드는 미미합니다. 최신 JavaScript 엔진은 함수 생성 및 가비지 수집에 매우 빠릅니다.

예: ref={(node) => (myRef.current = node)}

이러한 경우 기술적으로 덜 최적화되어 있지만 실제 애플리케이션에서 성능 차이를 측정할 가능성은 없습니다. 성급한 최적화의 함정에 빠지지 마십시오.

중대한 영향 시나리오

ref 콜백이 다음 중 하나를 수행하는 경우 항상 useCallback을 사용해야 합니다.

• DOM 조작: 클래스를 직접 추가하거나 제거하고, 속성을 설정하거나, 요소 크기를 측정합니다 (레이아웃 리플로우를 트리거할 수 있음).
• 이벤트 리스너: addEventListener 및 removeEventListener를 호출합니다. 모든 렌더링에서 이를 실행하면 버그와 성능 문제가 발생할 가능성이 큽니다.
• 라이브러리 인스턴스화: 차트 예제에서 볼 수 있듯이 복잡한 객체를 초기화하고 해체하는 것은 비용이 많이 듭니다.
• 네트워크 요청: DOM 요소의 존재 여부에 따라 API 호출을 수행합니다.
• 메모이제이션된 자식에 Refs 전달: React.memo로 래핑된 자식 컴포넌트에 ref 콜백을 prop으로 전달하는 경우 불안정한 인라인 함수는 메모이제이션을 깨고 자식이 불필요하게 다시 렌더링되도록 합니다.

좋은 경험 법칙: ref 콜백에 간단한 할당 하나 이상이 포함되어 있는 경우 useCallback으로 메모이제이션하십시오.

결론: 예측 가능하고 뛰어난 성능의 코드 작성

React의 ref 콜백은 DOM 노드 및 컴포넌트 인스턴스에 대한 세밀한 제어를 제공하는 강력한 도구입니다. 해당 라이프사이클 (특히 정리 중 의도적인 `null` 호출)을 이해하는 것이 효과적으로 사용하는 데 핵심입니다.

ref prop에 인라인 함수를 사용하는 일반적인 안티 패턴은 모든 렌더링에서 불필요하고 잠재적으로 비용이 많이 드는 재실행으로 이어진다는 것을 알았습니다. 해결책은 우아하고 관용적인 React입니다. useCallback 훅을 사용하여 콜백 함수를 안정화합니다.

이 패턴을 마스터하면 다음을 수행할 수 있습니다.

• 성능 병목 현상 방지: 모든 상태 변경에서 비용이 많이 드는 설정 및 해체 로직을 피하십시오.
• 버그 제거: 이벤트 리스너와 라이브러리 인스턴스가 중복 또는 메모리 누수 없이 깔끔하게 관리되도록 보장합니다.
• 예측 가능한 코드 작성: 컴포넌트가 마운트, 언마운트될 때 또는 특정 종속성이 변경될 때만 예상대로 정확하게 작동하는 ref 로직이 있는 컴포넌트를 만듭니다.

다음에 복잡한 문제를 해결하기 위해 ref에 도달하면 메모이제이션된 콜백의 힘을 기억하십시오. 이는 코드의 작은 변화이지만 React 애플리케이션의 품질과 성능에 큰 차이를 만들어 전 세계 사용자의 더 나은 경험에 기여할 수 있습니다.