React는 컴포넌트를 작성할 때 많은 유용한 기능을 제공합니다. 그 중 하나가 React.forwardRef() 함수입니다. 이 함수를 사용하면 ref를 전달할 수 있는 컴포넌트를 만들 수 있습니다.

React.forwardRef()란?

React.forwardRef()는 React v16.3 이후에 도입된 기능으로, ref를 전달하는 컴포넌트를 생성하는 데 사용됩니다. 이 기능을 활용하면 다른 컴포넌트에서 ref를 사용할 수 있게 됩니다.

컴포넌트 후크 기능 구현하기

다음은 컴포넌트 후크 기능을 구현하는 예시입니다.

import React, { forwardRef } from 'react';

const HookComponent = forwardRef((props, ref) => {
  return (
    <div ref={ref}>
      // 컴포넌트 내용
    </div>
  );
});

export default HookComponent;

위의 예시 코드에서는 forwardRef() 함수를 사용하여 HookComponent라는 컴포넌트를 생성하고 있습니다. 이 컴포넌트는 ref를 전달받을 수 있도록 설정되어 있습니다. 그리고 div 요소에 전달받은 ref를 부여하여 다른 컴포넌트에서 해당 요소의 ref를 사용할 수 있게 됩니다.

후크 기능 사용 예시

다른 컴포넌트에서 HookComponent를 사용하고 ref를 전달하는 방법은 다음과 같습니다.

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

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

  const handleClick = () => {
    // ref를 활용한 로직
  };

  return (
    <div>
      <HookComponent ref={ref} />
      <button onClick={handleClick}>Click</button>
    </div>
  );
}

export default ParentComponent;

위의 예시 코드에서는 ParentComponent에서 HookComponent를 사용하고 있습니다. HookComponent에 ref를 전달하기 위해 useRef()를 사용하여 ref 객체를 생성합니다. 그리고 HookComponent를 렌더링할 때 ref props로 ref 객체를 전달합니다. 이렇게 하면 부모 컴포넌트에서 HookComponent 내부의 div 요소에 접근하여 로직을 실행할 수 있습니다.

결론

React.forwardRef()를 활용하면 ref를 전달하는 컴포넌트를 손쉽게 구현할 수 있습니다. 이 기능을 활용하여 컴포넌트 후크를 구현하고 다른 컴포넌트에서 ref를 사용하는 방법을 알아보았습니다.

#React #컴포넌트후크