React.forwardRef()를 사용하여 컴포넌트의 속성(props)을 전달하는 방법은 무엇인가요?

10 Nov 2023

reactjs

먼저, forwardRef()를 사용하여 ref를 전달할 컴포넌트를 만들어야 합니다. 예를 들면 다음과 같습니다:

const MyComponent = React.forwardRef((props, ref) => {
  // 컴포넌트 기능 구현

  return <div ref={ref}>컴포넌트 내용</div>;
});

이제 MyComponent를 사용할 때 ref를 전달할 수 있습니다. 예를 들어, 부모 컴포넌트에서 ref를 만들고 MyComponent에 전달할 수 있습니다:

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

  render() {
    return (
      <div>
        <MyComponent ref={this.myComponentRef} />
        <button onClick={() => this.handleClick()}>버튼</button>
      </div>
    );
  }

  handleClick() {
    // MyComponent의 ref를 사용하여 접근 가능
    console.log(this.myComponentRef.current);
  }
}

위의 예제에서는 MyComponent를 통해 ref를 전달하고, 부모 컴포넌트에서 버튼 클릭 시 MyComponent의 ref를 사용하여 접근하고 있습니다.

이와 같이 forwardRef()를 사용하면 속성(props)뿐만 아니라 ref를 전달할 수 있으며, 이는 ref를 사용하여 컴포넌트 내부에 있는 요소에 직접 접근할 때 유용합니다.

React 공식 문서: forwardRef