React에서는 부모 컴포넌트와 자식 컴포넌트 간의 상호작용이 매우 중요합니다. 이때, React.forwardRef()를 사용하면 자식 컴포넌트에서 부모 컴포넌트의 참조(ref)를 사용할 수 있게 됩니다.

React.forwardRef()를 사용하면 부모 컴포넌트에서 자식 컴포넌트로 인스턴스의 참조를 전달할 수 있습니다. 이를 통해 자식 컴포넌트는 부모 컴포넌트의 내부 상태에 접근하거나, 부모 컴포넌트의 메서드를 호출하는 등의 상호작용을 할 수 있습니다.

아래는 React.forwardRef()를 활용한 예제입니다.

import React, { forwardRef } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  return (
    <div ref={ref}>
      <button onClick={props.onClick}>Click me</button>
    </div>
  );
});

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

  handleClick = () => {
    // 자식 컴포넌트에서 부모 컴포넌트의 메서드 호출
    console.log("ParentComponent's method is called");
  }

  componentDidMount() {
    // 자식 컴포넌트의 DOM 요소에 접근
    console.log(this.childRef.current);
  }

  render() {
    return (
      <div>
        <ChildComponent ref={this.childRef} onClick={this.handleClick} />
      </div>
    );
  }
}

export default ParentComponent;

위의 예제에서는 ChildComponent라는 자식 컴포넌트를 정의하고, forwardRef() 함수를 사용하여 ref를 전달합니다. 부모 컴포넌트에서는 자식 컴포넌트를 렌더링할 때 ref prop을 통해 자식 컴포넌트의 참조를 생성하고 전달합니다. 이렇게 생성된 ref를 통해 부모 컴포넌트에서는 자식 컴포넌트의 DOM 요소에 접근하거나 메서드를 호출할 수 있습니다.

위의 예제를 실행하면, 자식 컴포넌트의 버튼을 클릭하면 “ParentComponent’s method is called”이라는 메시지가 콘솔에 출력되고, 부모 컴포넌트의 componentDidMount() 메서드에서는 자식 컴포넌트의 DOM 요소에 접근하여 출력할 수 있습니다.

React.forwardRef()를 사용하면 부모 컴포넌트와 자식 컴포넌트 간의 상호작용을 수월하게 구현할 수 있습니다. 더 자세한 내용은 React 공식 문서를 참고해주세요.

#React #ReactForwardRef