React 개발중 component 에 ref 전달하기 (forwardRef)

이글은 프론트엔트 개발자 취업을 준비하며 공부한 내용을 정리한 글입니다.

오늘은 개발공부를 하다가 생긴 궁금증에 대해서 공부한 내용에 대한 정리입니다.

VirtualDOM 을 사용하는 React에서는 Dom을 선택하기 위해서

보통 useRef() 를 사용합니다.

그렇다면 커스텀한 component에 ref를 전달해줄려면 어떤방식을 사용해야할지 궁금증이 생겼습니다.

forwardRef

forwardRef를 사용하면 부모 컴포넌트로부터 하위 컴포넌트 ref를 전달할 수 있습니다.
이렇게 전달 받은 ref 를 HTML 요소의 속성으로 넘겨줌으로써 함수 컴포넌트 역시 ref를 통한 제어가 가능해집니다.

이런 형태로 사용합니다.

const Button = React.forwardRef(({props}, forwardedRef) => {
  return (
    <button ref={forwardedRef}>
      <span>{props}</span>
    </button>
  );
});

export default Button;

또는

const Button = (({props}, forwardedRef) => {
  return (
    <button ref={forwardedRef}>
      <span>{props}</span>
    </button>
  );
});
const forwardRefButton= React.forwardRef(Button);
export default forwardRefButton;

이런 형태로 사용 할수 있습니다.

정리

• 커스텀 컴포넌트는 ref 속성이 존재하지 않아 아래와 같이 ref를 전달받을 수 없다.
• 컴포넌트가 ref를 전달받기 위해서는 React.forwardRef 로 컴포넌트를 감싸준 후, props 뒤에 별도로 전달된 ref를 활용.