forwardRef: 부모에게 DOM 참조 노출하기

ref는 다시 렌더링을 일으키지 않으면서 렌더링 사이에도 유지되는 DOM 노드나 컴포넌트 인스턴스에 대한 참조를 보관하는 방법입니다. ref 속성으로 연결하면 React가 DOM에 커밋한 후 그 값을 current 속성에 채웁니다.

주의할 점은 div에 하듯 함수 컴포넌트에 ref를 연결할 수 없다는 것입니다. ref는 일반 props처럼 아래로 전달되지 않기 때문에, 부모는 기본적으로 자식 컴포넌트 내부에 있는 DOM 노드에 접근할 경로가 없습니다.

React.forwardRef를 사용하면 컴포넌트가 부모로부터 ref를 받아 자신의 요소 중 하나로 전달할 수 있습니다. 컴포넌트 함수를 감싸고 함수 시그니처를 변경하여 ref가 props와 함께 두 번째 인수로 전달되도록 합니다.

이는 내부 DOM 노드를 호출하는 컴포넌트에 노출하기 위한 공식적인 우회 수단입니다. 이를 통해 원래는 내부가 보이지 않던 자식 컴포넌트의 요소를 부모가 직접 참조할 수 있게 됩니다.

감싼 함수는 두 개의 매개변수인 (props, ref)를 받습니다. 첫 번째는 일반적인 props 객체이고, 두 번째는 전달된 ref입니다. 그런 다음 공개할 요소에 ref를 펼쳐 전달하거나 연결합니다. 예를 들어 내부 입력 요소에 ref={ref}처럼 연결할 수 있습니다.

이 두 번째 인수는 forwardRef로 감싼 컴포넌트만 받는다는 점을 기억하십시오. 두 번째 매개변수로 ref를 선언한 일반 함수 컴포넌트는 단순히 undefined를 받습니다.

대표적인 예는 내부 입력 요소에 부모가 포커스를 맞출 수 있도록 만든 재사용 가능한 텍스트 필드 컴포넌트입니다. 필드를 forwardRef로 감싸고 전달된 ref를 기반 입력 요소에 연결하면, 부모가 해당 요소에서 focus를 직접 호출할 수 있습니다.

이렇게 하면 필드 컴포넌트의 재사용성을 유지하면서도 필요한 곳에서만 제어된 명령형 접근을 제공할 수 있습니다. 예를 들어 폼이 마운트될 때 첫 번째 필드에 포커스를 맞출 수 있습니다.

전달된 ref를 사용하면 크기도 측정할 수 있습니다. 부모는 forwardRef를 통해 받은 자식 요소에서 offsetWidth와 offsetHeight를 읽거나 getBoundingClientRect를 호출할 수 있습니다.

이는 툴팁, 팝오버, 레이아웃 계산에 유용합니다. 부모가 요소를 기준으로 다른 요소를 어디에 배치할지 결정하기 전에 내부 요소의 정확한 렌더링 크기나 위치를 알아야 할 때 사용할 수 있습니다.

전달된 ref가 실제 DOM 노드를 가리키므로 부모는 해당 노드에서 기본 DOM 메서드를 호출할 수 있습니다. 전달된 목록 항목에서 scrollIntoView를 호출하면 해당 항목이 부드럽게 화면에 표시되고, 전달된 스크롤 컨테이너에서 scrollTo를 호출하면 콘텐츠의 위치가 바뀝니다.

이러한 동작은 선언적으로 깔끔하게 표현할 수 있는 대응 방식이 없기 때문에, ref가 처리하도록 만들어진 상호작용에 정확히 해당합니다.

때로는 공개하려는 요소가 여러 컴포넌트 안쪽 깊숙이 묻혀 있습니다. 각 중간 계층에서 받은 ref를 다음 계층으로 전달하도록 forwardRef를 연결하여, 최종적으로 대상 DOM 노드에 도달하게 만들 수 있습니다.

이 연결의 각 래퍼도 반드시 forwardRef를 사용해 ref를 전달해야 합니다. 중간에 일반 컴포넌트가 하나라도 있으면 연결이 끊어지기 때문입니다.

forwardRef와 React.memo를 함께 사용하면 ref 전달과 렌더링 메모이제이션을 모두 얻을 수 있습니다. 일반적인 순서는 memo(forwardRef(Component))이며, forwardRef의 결과를 memo로 감싸 메모 비교가 계속 적용되도록 합니다.

이 패턴은 성능이 중요한 디자인 시스템에서 자주 사용됩니다. 자주 렌더링되는 컴포넌트가 자신의 노드를 공개하면서도 불필요한 다시 렌더링을 건너뛰어야 할 때 유용합니다.

React DevTools에서는 forwardRef 컴포넌트가 컴포넌트 이름을 감싸는 ForwardRef 레이블과 함께 표시됩니다. 따라서 컴포넌트가 ref 전달에 참여하는지 한눈에 쉽게 확인할 수 있습니다.

내부 함수에 이름을 지정하거나 displayName을 설정하면, DevTools 항목이 일반적인 익명 ForwardRef 레이블보다 명확하게 표시됩니다.

forwardRef는 데이터를 전달하기 위한 것이 아니라 DOM 노드와 명령형 핸들을 공개하기 위한 것입니다. 부모가 자식에 영향을 주어야 한다면 ref를 통해 내부에 접근하기보다 일반 props와 상태를 사용하십시오.

ref를 지나치게 사용하면 컴포넌트가 강하게 결합되고 React의 데이터 흐름을 우회하게 되어 동작을 파악하기 어려워집니다. 선언적인 prop으로는 상호작용을 진정으로 표현할 수 없을 때만 forwardRef를 사용하십시오.

forwardRef는 컴포넌트 라이브러리와 재사용 가능한 입력 컴포넌트에서 ref를 공개하는 표준 도구로 남아 있습니다. 최신 React 버전은 ref를 일반 prop으로 전달하는 방향으로 나아가고 있지만, forwardRef는 여전히 널리 사용되며 이해할 가치가 있습니다.

forwardRef를 잘 이해해 두면 기존 코드베이스뿐만 아니라 앞으로의 ref-as-prop 구문이 기반으로 삼을 내부 동작도 익힐 수 있습니다.

forwardRef 컴포넌트가 ref를 받는 방식을 이해했는지 테스트해 보십시오.

forwardRef는 부모가 자식 컴포넌트의 DOM 노드에 접근할 수 없는 제한을 해결합니다. 컴포넌트에 두 번째 ref 인수를 제공하고, 이를 내부 요소로 전달할 수 있게 하기 때문입니다. 이를 통해 자식 요소에 포커스를 맞추고, 크기를 측정하고, 스크롤할 수 있습니다.

forwardRef는 memo와 조합할 수 있고 여러 계층을 거쳐 연결할 수 있으며, DevTools에서는 ForwardRef로 표시됩니다. 명령형 DOM 접근에 사용하고, 데이터 전달에는 사용하지 마십시오. 데이터 전달에는 props가 더 적합합니다.