React는 사용자 인터랙션을 처리하고 컴포넌트를 업데이트하는 데 많이 사용됩니다. 그러나 가끔은 자식 컴포넌트로부터 인터랙션을 처리해야 하는 상황이 발생할 수 있습니다. 이를 위해 React.forwardRef() 함수를 활용하면 간단하게 해결할 수 있습니다.

React.forwardRef()란?

React.forwardRef()는 React 컴포넌트에서 ref를 전달하기 위한 메커니즘입니다. ref는 DOM 요소나 컴포넌트 인스턴스에 접근하기 위해 사용되는 객체입니다. React.forwardRef()는 부모 컴포넌트에서 생성한 ref를 자식 컴포넌트로 전달할 수 있도록 합니다.

사용 예시

아래는 React.forwardRef()를 활용하여 컴포넌트의 유저 인터랙션 처리를 보다 효율적으로 할 수 있는 예시입니다. 이 예시에서는 “Button” 컴포넌트의 클릭 이벤트를 처리하고 클릭 시 로그 메시지를 출력하도록 하겠습니다.

import React, { forwardRef } from 'react';

const Button = forwardRef((props, ref) => {
  const handleClick = () => {
    console.log('Button is clicked');
    // 클릭 이벤트를 처리하는 로직 추가
  };

  return (
    <button ref={ref} onClick={handleClick}>
      {props.children}
    </button>
  );
});

// 부모 컴포넌트에서 Button 컴포넌트 사용 예시
const ParentComponent = () => {
  const buttonRef = useRef();

  const handleButtonClick = () => {
    buttonRef.current.click();
  };

  return (
    <div>
      <Button ref={buttonRef}>Click me</Button>
      <button onClick={handleButtonClick}>Trigger Button Click</button>
    </div>
  );
};

위 예시에서는 “Button” 컴포넌트를 정의할 때, React.forwardRef() 함수를 사용하여 ref를 전달받을 수 있도록 하였습니다. 그리고 클릭 이벤트 처리를 위한 handleClick 함수를 구현하였습니다. 이렇게 구현된 “Button” 컴포넌트를 부모 컴포넌트에서 사용할 때 ref 속성을 전달하여 클릭 이벤트를 발생시킬 수 있습니다.

결론

React.forwardRef()를 활용하면 컴포넌트 간의 인터랙션을 더욱 효율적으로 처리할 수 있습니다. 이를 통해 자식 컴포넌트의 인터랙션을 부모 컴포넌트에서 쉽게 처리할 수 있으며, 코드의 가독성과 유지보수성을 향상시킬 수 있습니다. React 공식 문서에서 더 자세한 내용을 찾아보세요. #React #forwardRef