React는 자바스크립트 라이브러리로, 재사용 가능한 UI 컴포넌트를 작성하는 데 사용됩니다. 이러한 컴포넌트를 개발할 때, 종종 부모 컴포넌트에서 자식 컴포넌트로 스타일을 전달해야 할 때가 있습니다. 이를 위해 React에서는 forwardRef() 메서드를 제공합니다.

React.forwardRef() 메서드는 Ref를 자식 컴포넌트로 전달할 수 있는 기능을 제공합니다. 이를 이용하면 부모 컴포넌트에서 스타일 정보를 Ref로 전달하여 자식 컴포넌트에서 스타일링을 관리할 수 있습니다.

다음은 React.forwardRef()를 사용하여 컴포넌트의 스타일링을 관리하는 예시 코드입니다.

import React, { forwardRef } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  return (
    <div ref={ref} style={props.style}>
      Child Component
    </div>
  );
});

const ParentComponent = () => {
  const ref = useRef();

  const handleButtonClick = () => {
    const newStyle = { color: 'red', fontWeight: 'bold' };
    ref.current.style = { ...ref.current.style, ...newStyle };
  };

  return (
    <div>
      <ChildComponent ref={ref} />
      <button onClick={handleButtonClick}>Change Style</button>
    </div>
  );
};

위의 예시 코드에서는 ChildComponent가 스타일 정보를 받아와서 div 엘리먼트에 적용합니다. ParentComponent에서는 Ref를 생성하고, 버튼이 클릭되면 ChildComponent의 스타일을 변경합니다.

React.forwardRef()를 사용하면 부모 컴포넌트에서 자식 컴포넌트로 스타일 정보를 전달하고, 자식 컴포넌트에서 스타일링을 동적으로 변경할 수 있습니다. 이를 통해 컴포넌트 간의 스타일링 관리를 더욱 유연하게 할 수 있습니다.

더 많은 정보와 예제는 React 공식 문서를 참고하시기 바랍니다.

#React #스타일링