React.forwardRef()를 활용하여 동적으로 생성되는 컴포넌트를 다루는 방법에 대해 알려주세요.

10 Nov 2023

reactjs

React에서 컴포넌트를 동적으로 생성하고 다루는 것은 매우 일반적인 요구사항입니다. 이를 위해 React.forwardRef()를 사용할 수 있습니다. React.forwardRef()는 ref 속성을 전달하여 자식 컴포넌트에서 부모 컴포넌트로 ref를 전달하는 데 사용됩니다.

아래 예시는 React.forwardRef()를 사용하여 동적으로 생성된 컴포넌트를 다루는 방법을 보여줍니다.

import React, { forwardRef } from 'react';

// 동적으로 생성되는 컴포넌트
const DynamicComponent = forwardRef((props, ref) => {
  // 컴포넌트가 생성될 때 ref 속성을 전달받음
  // ref를 원하는 요소에 연결할 수 있음
  return <div ref={ref}>동적으로 생성된 컴포넌트</div>;
});

// 부모 컴포넌트
const ParentComponent = () => {
  const ref = useRef(null);

  // 버튼 클릭 시 동적으로 컴포넌트 생성
  const handleCreateComponent = () => {
    const dynamicComponent = <DynamicComponent ref={ref} />;
    ReactDOM.render(dynamicComponent, document.getElementById('root'));
  };

  return (
    <div>
      <button onClick={handleCreateComponent}>컴포넌트 생성</button>
      <div id="root"></div>
    </div>
  );
}

export default ParentComponent;

위 예시에서 DynamicComponent는 동적으로 생성되는 컴포넌트입니다. forwardRef를 사용하여 ref 속성을 전달 받을 수 있도록 설정하였습니다. 그리고 컴포넌트를 생성할 때 전달된 ref를 원하는 요소에 연결하도록 설정했습니다.

ParentComponent는 위에서 정의한 DynamicComponent를 동적으로 생성하고 다루는 예시입니다. 버튼이 클릭되면 DynamicComponent를 생성하고 ref 속성을 전달하여 동적으로 생성된 컴포넌트의 ref를 ParentComponent에서 접근할 수 있도록 했습니다.

이처럼 React.forwardRef()를 사용하면 동적으로 생성되는 컴포넌트를 다루는 데 유용하게 활용할 수 있습니다.

자세한 내용은 React 공식 문서를 참고하시기 바랍니다.

#React #ReactComponents