[React] HOC(High Order Component)

---

1.HOC(High Order Component)

React에서 컴포넌트를 확장하거나 재사용 가능하게 만들기 위한 패턴
기존 컴포넌트를 받아서 새로운 기능을 추가한 새로운 컴포넌트를 반환하는 함수이다.
재사용 가능한 로직을 여러 컴포넌트에 공유하고 싶을 때 유용하다.

// HOC 버튼 텍스트를 변경
function withTextChange<P>(Component: React.ComponentType<P>) {
  return (props: P) => {
    return <Component {...props}>{'New Text'}</Component>;
  };
}

// 버튼 컴포넌트
const Button: React.FC = ({ children }) => {
  return <button>{children}</button>;
};

// HOC 사용
const ButtonWithTextChange = withTextChange(Button);

// 사용
const App = () => (
  <>
    <ButtonWithTextChange />
  </>
);