React는 중첩된 컴포넌트를 사용하여 복잡한 UI를 구성하는 데 매우 효과적입니다. 그러나 중첩된 컴포넌트의 경우 자식 컴포넌트에서 부모 컴포넌트의 참조에 접근하는 것은 조금 까다로울 수 있습니다. 그럴 때 React.forwardRef()를 활용하면 중첩된 컴포넌트의 관리가 간편해집니다.

React.forwardRef()는 컴포넌트에 ref 속성을 전달하기 위한 함수입니다. 이를 사용하면 부모 컴포넌트에서 ref를 생성하고, 이를 자식 컴포넌트로 전달할 수 있습니다. 이로써 자식 컴포넌트에서 부모 컴포넌트의 참조에 접근하거나 조작할 수 있게 됩니다.

아래는 React.forwardRef()를 사용하여 중첩된 컴포넌트에 ref를 전달하는 예제 코드입니다.

import React, { forwardRef } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  // ref를 이용한 로직 구현
  // ...
  
  return (
    <div ref={ref}>
      {/* 자식 컴포넌트 내용 */}
    </div>
  );
});

const ParentComponent = () => {
  const childRef = React.createRef();

  const handleClick = () => {
    // ref를 이용한 자식 컴포넌트 조작
    childRef.current.style.background = 'red';
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleClick}>자식 컴포넌트 스타일 변경</button>
    </div>
  );
}

위의 코드에서 ChildComponent는 forwardRef() 함수로 감싸져 있습니다. 이로써 ChildComponent는 ref 속성을 통해 부모 컴포넌트로부터 전달된 ref 참조를 사용할 수 있습니다. 그리고 해당 참조를 필요한 동작에 활용할 수 있습니다.

ParentComponent에서는 React.createRef()를 사용하여 childRef라는 ref를 생성하고, ChildComponent에 이 ref를 전달합니다. ParentComponent에서는 이 ref를 사용하여 자식 컴포넌트의 속성이나 동작을 조작할 수 있습니다. 예를 들어, handleClick() 함수에서는 childRef.current를 통해 자식 컴포넌트의 스타일을 변경하고 있습니다.

React.forwardRef()를 사용하여 중첩된 컴포넌트를 관리하는 방법에 대해 알아보았습니다. 이를 통해 부모 컴포넌트에서 자식 컴포넌트로 ref를 전달하고, 이를 활용하여 다양한 조작을 할 수 있습니다. 자식 컴포넌트의 참조를 필요로 하는 상황에서 React.forwardRef()는 매우 유용한 도구입니다.

#React #React.forwardRef