React forwardRef: 재사용 가능한 컴포넌트를 위한 Ref 전달 마스터하기

React의 세계에서는 재사용 가능하고 조합 가능한 컴포넌트를 만드는 것이 가장 중요합니다. 하지만 때로는 부모 컴포넌트에서 자식 컴포넌트의 기본 DOM 노드에 접근해야 할 필요가 있습니다. 바로 이때 React.forwardRef가 유용하게 사용됩니다. 이 종합 가이드에서는 forwardRef의 복잡한 내용을 깊이 파고들어 그 목적, 구현, 사용 사례 및 모범 사례를 설명합니다.

Ref 전달이란 무엇인가요?

Ref 전달은 부모 컴포넌트가 자식 컴포넌트의 DOM 노드나 React 컴포넌트 인스턴스에 접근할 수 있도록 하는 React 기술입니다. 본질적으로, 이는 컴포넌트에 전달된 ref를 그 자식 중 하나에게 "전달"하는 것입니다. 이는 입력 필드에 포커스를 맞추거나 크기를 측정하는 등 자식 컴포넌트의 DOM을 직접 조작해야 할 때 특히 유용합니다.

forwardRef 없이는 ref를 DOM 엘리먼트나 클래스 컴포넌트에만 직접 붙일 수 있습니다. 함수형 컴포넌트는 직접 ref를 받거나 노출할 수 없습니다.

forwardRef를 사용하는 이유

다음과 같은 여러 시나리오에서 forwardRef 사용이 필요합니다:

• DOM 조작: 자식 컴포넌트의 DOM과 직접 상호작용해야 할 때. 예를 들어, 입력 필드에 포커스를 설정하거나, 애니메이션을 트리거하거나, 엘리먼트를 측정할 때입니다.
• 추상화: 커스터마이징이나 애플리케이션의 다른 부분과의 통합을 위해 특정 DOM 엘리먼트를 노출해야 하는 재사용 가능한 UI 컴포넌트를 만들 때입니다.
• 고차 컴포넌트(HOCs): 컴포넌트를 HOC로 감싸고 ref가 기본 컴포넌트로 올바르게 전달되도록 해야 할 때입니다.
• 컴포넌트 라이브러리: 컴포넌트 라이브러리를 구축할 때, ref 전달을 통해 개발자들이 컴포넌트의 기본 DOM 엘리먼트에 접근하고 커스터마이징할 수 있게 하여 더 큰 유연성을 제공합니다.

forwardRef의 작동 방식

React.forwardRef는 렌더링 함수를 인자로 받는 고차 컴포넌트(HOC)입니다. 이 렌더링 함수는 props와 ref를 인자로 받습니다. 그런 다음 렌더링 함수는 React 엘리먼트를 반환합니다. ref 인자는 부모로부터 컴포넌트에 전달된 ref입니다. 이 ref를 렌더링 함수 내의 자식 컴포넌트에 붙일 수 있습니다.

과정을 단계별로 나누면 다음과 같습니다:

1. 부모 컴포넌트가 useRef를 사용하여 ref를 생성합니다.
2. 부모 컴포넌트가 ref를 자식 컴포넌트에 prop으로 전달합니다.
3. 자식 컴포넌트는 React.forwardRef로 감싸집니다.
4. forwardRef의 렌더링 함수 내부에서 ref가 DOM 엘리먼트나 다른 React 컴포넌트에 붙여집니다.
5. 이제 부모 컴포넌트는 ref를 통해 DOM 노드나 컴포넌트 인스턴스에 접근할 수 있습니다.

forwardRef 구현하기: 실용적인 예제

부모 컴포넌트가 프로그래밍 방식으로 입력 필드에 포커스를 맞출 수 있도록 하는 커스텀 입력 컴포넌트라는 간단한 예제로 forwardRef를 설명해 보겠습니다.

예제: Ref 전달을 사용하는 커스텀 입력 컴포넌트

먼저, 커스텀 입력 컴포넌트를 만들어 보겠습니다:

import React, { forwardRef } from 'react';

const CustomInput = forwardRef((props, ref) => {
  return (
    <div>
      <label htmlFor={props.id}>{props.label}</label>
      <input type="text" id={props.id} ref={ref} {...props} />
    </div>
  );
});

CustomInput.displayName = "CustomInput"; // 더 나은 디버깅을 위해 권장됩니다

export default CustomInput;

이 예제에서는:

• 'react'에서 forwardRef를 가져옵니다.
• 함수형 컴포넌트를 forwardRef로 감쌉니다.
• forwardRef 함수는 props와 ref를 인자로 받습니다.
• ref를 <input> 엘리먼트에 붙입니다.
• React 개발자 도구에서 더 나은 디버깅을 위해 displayName을 설정합니다.

이제 이 컴포넌트를 부모 컴포넌트에서 어떻게 사용하는지 보겠습니다:

import React, { useRef, useEffect } from 'react';
import CustomInput from './CustomInput';

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

  useEffect(() => {
    // 컴포넌트가 마운트될 때 입력 필드에 포커스를 줍니다
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return (
    <div>
      <CustomInput label="이름:" id="name" ref={inputRef} placeholder="이름을 입력하세요" />
    </div>
  );
};

export default ParentComponent;

이 부모 컴포넌트에서는:

• useRef를 사용하여 ref를 생성합니다.
• inputRef를 CustomInput 컴포넌트에 ref prop으로 전달합니다.
• useEffect 훅 내부에서 inputRef.current를 사용하여 기본 DOM 노드에 접근하고 focus() 메서드를 호출합니다.

ParentComponent가 마운트되면, CustomInput 컴포넌트의 입력 필드에 자동으로 포커스가 맞춰집니다.

forwardRef의 사용 사례

다음은 forwardRef가 매우 유용하게 사용되는 일반적인 사례들입니다:

1. 입력 필드에 포커스 주기

위의 예제에서 보여준 것처럼, forwardRef를 사용하면 프로그래밍 방식으로 입력 필드에 포커스를 줄 수 있어 양식 유효성 검사, 접근성 및 사용자 경험 향상에 유용합니다. 예를 들어, 사용자가 오류가 있는 양식을 제출한 후, 오류가 있는 첫 번째 입력 필드에 포커스를 주어 사용자를 안내할 수 있습니다.

2. 엘리먼트 크기 측정

forwardRef를 사용하여 자식 컴포넌트의 DOM 노드에 접근하고 그 크기(너비, 높이 등)를 측정할 수 있습니다. 이는 반응형 레이아웃, 동적 크기 조절 및 커스텀 애니메이션을 만드는 데 유용합니다. 페이지의 다른 엘리먼트 레이아웃을 조정하기 위해 동적 콘텐츠 영역의 높이를 측정해야 할 수 있습니다.

3. 서드파티 라이브러리와의 통합

많은 서드파티 라이브러리는 초기화나 구성을 위해 DOM 노드에 직접 접근해야 합니다. forwardRef를 사용하면 이러한 라이브러리를 React 컴포넌트와 원활하게 통합할 수 있습니다. 차트를 렌더링할 대상으로 DOM 엘리먼트가 필요한 차트 라이브러리를 사용한다고 상상해 보세요. forwardRef는 그 DOM 엘리먼트를 라이브러리에 제공할 수 있게 해줍니다.

4. 접근성 있는 컴포넌트 만들기

접근성은 종종 DOM 속성의 직접적인 조작이나 포커스 관리를 필요로 합니다. forwardRef는 접근성 표준을 준수하는 접근성 있는 컴포넌트를 만드는 데 사용될 수 있습니다. 예를 들어, 입력 필드를 오류 메시지와 연결하기 위해 aria-describedby 속성을 설정해야 할 수 있습니다. 이를 위해서는 입력 필드의 DOM 노드에 직접 접근해야 합니다.

5. 고차 컴포넌트(HOCs)

HOC를 만들 때, ref가 래핑된 컴포넌트로 올바르게 전달되도록 하는 것이 중요합니다. forwardRef는 이를 달성하는 데 도움이 됩니다. 컴포넌트에 스타일을 추가하는 HOC가 있다고 가정해 봅시다. forwardRef를 사용하면 스타일이 적용된 컴포넌트에 전달된 모든 ref가 기본 컴포넌트로 전달됩니다.

forwardRef 사용을 위한 모범 사례

forwardRef를 효과적으로 사용하려면 다음 모범 사례를 고려하세요:

1. 디버깅을 위해 displayName 사용

forwardRef 컴포넌트에는 항상 displayName 속성을 설정하세요. 이렇게 하면 React 개발자 도구에서 컴포넌트를 더 쉽게 식별할 수 있습니다. 예를 들면 다음과 같습니다:

CustomInput.displayName = "CustomInput";

2. 성능에 유의

forwardRef는 강력한 도구이지만, 과도하게 사용하면 성능에 영향을 미칠 수 있습니다. 불필요한 DOM 조작을 피하고 렌더링 로직을 최적화하세요. 애플리케이션을 프로파일링하여 ref 전달과 관련된 성능 병목 현상을 식별하세요.

3. 신중하게 Ref 사용

Ref를 React의 데이터 흐름을 대체하는 수단으로 사용하지 마세요. Ref는 꼭 필요한 경우에만, 즉 DOM 조작이나 서드파티 라이브러리와의 통합을 위해 드물게 사용해야 합니다. 컴포넌트 데이터 및 동작 관리는 props와 state에 의존하세요.

4. 컴포넌트 문서화

컴포넌트에서 forwardRef를 언제, 왜 사용하는지 명확하게 문서화하세요. 이는 다른 개발자들이 코드를 이해하고 컴포넌트를 올바르게 사용하는 데 도움이 됩니다. 컴포넌트 사용 방법 예제와 전달된 ref의 목적을 포함하세요.

5. 대안 고려

forwardRef를 사용하기 전에, 더 적절할 수 있는 대안적인 해결책이 있는지 고려해 보세요. 예를 들어, DOM을 직접 조작하는 대신 props와 state를 사용하여 원하는 동작을 달성할 수 있을지도 모릅니다. forwardRef에 의존하기 전에 다른 옵션을 탐색해 보세요.

forwardRef의 대안

forwardRef가 ref 전달을 위한 최상의 해결책인 경우가 많지만, 특정 상황에서는 고려해 볼 만한 대안적인 접근 방식도 있습니다:

1. 콜백 Ref

콜백 ref는 DOM 노드에 접근하는 더 유연한 방법을 제공합니다. ref prop을 전달하는 대신, DOM 노드를 인자로 받는 함수를 전달합니다. 이를 통해 DOM 노드가 붙거나 떨어질 때 커스텀 로직을 수행할 수 있습니다. 그러나 콜백 ref는 forwardRef보다 더 장황하고 가독성이 떨어질 수 있습니다.

const MyComponent = () => {
  let inputElement = null;

  const setInputElement = (element) => {
    inputElement = element;
  };

  useEffect(() => {
    if (inputElement) {
      inputElement.focus();
    }
  }, []);

  return <input type="text" ref={setInputElement} />;
};

2. 컴포지션(Composition)

경우에 따라, forwardRef를 사용하는 대신 컴포넌트를 조합하여 원하는 동작을 달성할 수 있습니다. 이는 복잡한 컴포넌트를 더 작고 관리하기 쉬운 컴포넌트로 나누고, props를 사용하여 데이터와 동작을 전달하는 것을 포함합니다. 컴포지션은 더 유지보수하기 쉽고 테스트하기 쉬운 코드로 이어질 수 있지만, 모든 시나리오에 적합하지는 않을 수 있습니다.

3. 렌더 프롭스(Render Props)

렌더 프롭스는 값이 함수인 prop을 사용하여 React 컴포넌트 간에 코드를 공유할 수 있게 해줍니다. 렌더 프롭스를 사용하여 DOM 노드나 컴포넌트 인스턴스를 부모 컴포넌트에 노출할 수 있습니다. 그러나 렌더 프롭스는 코드를 더 복잡하고 읽기 어렵게 만들 수 있으며, 특히 여러 렌더 프롭스를 다룰 때 그렇습니다.

피해야 할 일반적인 실수

forwardRef로 작업할 때, 다음과 같은 일반적인 실수를 피하는 것이 중요합니다:

1. displayName 설정 잊기

앞서 언급했듯이, displayName 속성 설정을 잊으면 디버깅이 어려워질 수 있습니다. 항상 forwardRef 컴포넌트에 displayName을 설정하세요.

2. Ref 남용

모든 것에 ref를 사용하려는 유혹을 물리치세요. Ref는 꼭 필요한 경우에만, 즉 DOM 조작이나 서드파티 라이브러리와의 통합을 위해 드물게 사용해야 합니다. 컴포넌트 데이터 및 동작 관리는 props와 state에 의존하세요.

3. 타당한 이유 없이 DOM 직접 조작

직접적인 DOM 조작은 코드를 유지보수하고 테스트하기 어렵게 만들 수 있습니다. 절대적으로 필요한 경우에만 DOM을 조작하고 불필요한 DOM 업데이트를 피하세요.

4. Null Ref 처리하지 않기

기본 DOM 노드나 컴포넌트 인스턴스에 접근하기 전에 항상 ref가 null인지 확인하세요. 이는 컴포넌트가 아직 마운트되지 않았거나 마운트 해제되었을 때 오류를 방지합니다.

if (inputRef.current) {
  inputRef.current.focus();
}

5. 순환 의존성 생성

forwardRef를 HOC나 렌더 프롭스와 같은 다른 기술과 함께 사용할 때는 주의하세요. 컴포넌트 간에 순환 의존성을 만들지 않도록 하세요. 이는 성능 문제나 예기치 않은 동작으로 이어질 수 있습니다.

전 세계의 예시

React와 forwardRef의 원칙은 보편적이지만, 다른 지역의 개발자들이 그 사용법을 어떻게 적용할 수 있는지 생각해 보세요:

• 현지화 및 국제화(i18n): 유럽이나 아시아에서 다국어 애플리케이션을 구축하는 개발자들은 forwardRef를 사용하여 현지화된 텍스트 엘리먼트의 크기를 측정하고 다른 언어에 맞게 레이아웃을 동적으로 조정하여 텍스트가 컨테이너를 넘치지 않도록 할 수 있습니다. 예를 들어, 독일어 단어는 영어 단어보다 긴 경향이 있어 조정이 필요합니다.
• 오른쪽에서 왼쪽(RTL) 레이아웃: 중동 및 아시아 일부 지역에서는 애플리케이션이 종종 RTL 레이아웃을 지원해야 합니다. forwardRef는 현재 레이아웃 방향에 따라 엘리먼트의 위치를 프로그래밍 방식으로 조정하는 데 사용될 수 있습니다.
• 다양한 사용자를 위한 접근성: 전 세계적으로 접근성은 점점 더 중요한 관심사가 되고 있습니다. 개발자들은 forwardRef를 사용하여 장애가 있는 사용자를 위한 접근성을 향상시킬 수 있습니다. 예를 들어, 스크린 리더를 위해 엘리먼트에 프로그래밍 방식으로 포커스를 주거나 양식 필드의 탭 순서를 조정하는 것입니다.
• 지역별 API와의 통합: 지역 API(예: 결제 게이트웨이, 지도 서비스)와 통합하는 개발자들은 해당 API에서 요구하는 DOM 엘리먼트에 접근하기 위해 forwardRef를 사용하여 호환성과 원활한 통합을 보장할 수 있습니다.

결론

React.forwardRef는 재사용 가능하고 조합 가능한 React 컴포넌트를 만들기 위한 강력한 도구입니다. 부모 컴포넌트가 자식의 DOM 노드나 컴포넌트 인스턴스에 접근할 수 있게 함으로써, forwardRef는 DOM 조작에서부터 서드파티 라이브러리와의 통합에 이르기까지 광범위한 사용 사례를 가능하게 합니다. 이 가이드에서 설명한 모범 사례를 따르면, forwardRef를 효과적으로 활용하고 일반적인 실수를 피할 수 있습니다. Ref를 신중하게 사용하고, 컴포넌트를 명확하게 문서화하며, 적절한 경우 대안적인 해결책을 고려하는 것을 잊지 마세요. forwardRef에 대한 확실한 이해를 바탕으로 더 견고하고 유연하며 유지보수하기 쉬운 React 애플리케이션을 구축할 수 있습니다.