React는 컴포넌트 기반의 웹 개발을 쉽게 할 수 있도록 도와주는 자바스크립트 라이브러리입니다. React 컴포넌트는 일반적으로 이벤트 처리를 위해 props를 사용합니다. 그러나 일부 경우에는 자식 컴포넌트에서 발생한 이벤트를 부모 컴포넌트로 전달하는 것이 필요할 수 있습니다. 이 때 React.forwardRef()를 사용하여 이벤트 처리를 구현할 수 있습니다.

React.forwardRef()는 컴포넌트가 ref 속성을 전달받을 수 있도록 해줍니다. ref 속성은 React에서 제공하는 기능으로, DOM 요소나 다른 컴포넌트에 어떤 작업을 수행하기 위해 사용됩니다. 이를 이용하여 부모 컴포넌트로부터 전달받은 ref 속성을 자식 컴포넌트에 전달하고, 자식 컴포넌트에서 발생한 이벤트를 부모 컴포넌트로 전달할 수 있습니다.

아래는 React.forwardRef()를 사용하여 이벤트 처리를 구현하는 간단한 예시입니다.

import React, { forwardRef } from 'react';

// 자식 컴포넌트
const ChildComponent = forwardRef((props, ref) => {
  return (
    <button ref={ref} onClick={props.onClick}>
      Click me
    </button>
  );
});

// 부모 컴포넌트
const ParentComponent = () => {
  const buttonRef = React.createRef();

  const handleClick = () => {
    console.log('Button clicked');
  };

  return (
    <div>
      <ChildComponent ref={buttonRef} onClick={handleClick} />
    </div>
  );
};

위 예시에서 ChildComponent는 React.forwardRef()를 사용하여 자식 컴포넌트로 전달된 ref 속성을 button 요소에 설정합니다. 그리고 onClick 이벤트를 부모 컴포넌트로 전달하기 위해 props로 전달된 handleClick 함수를 사용합니다.

ParentComponent는 button 요소에 대해 ref 속성을 생성하여 자식 컴포넌트로 전달하고, handleClick 함수를 onClick 이벤트로 전달합니다. 이제 자식 컴포넌트에서 버튼을 클릭하면 handleClick 함수가 실행되어 ‘Button clicked’ 메시지가 콘솔에 출력됩니다.

React.forwardRef()를 사용하여 컴포넌트의 이벤트 처리를 구현하면 컴포넌트 간의 효율적인 상호작용을 달성할 수 있습니다.

더 자세한 내용은 React 공식 문서를 참고해주세요.

#React #이벤트처리