React 컴포넌트를 일급함수로 전달하기

헤더에 메뉴들이 있고 그 메뉴는 아이콘과 메뉴 이름 으로 구성된 버튼이다
메뉴 버튼을 공통으로 사용하고 메뉴 이름과 아이콘 컴포넌트를 주입받는 메뉴 컴포넌트를 만들었다
그런데 메뉴에 마우스를 올렸을 때, 아이콘의 색이 바뀌어야 한다
하지만 아이콘 컴포넌트는 외부에서 주입을 받는 상황에서 전달받은 컴포넌트의 props 제어를 어떻게 해야할까?

// HeaderMenu.tsx
interface HeaderMenuButtonProps {
  href: string;
  menuName: string;
  IconComponentFunction: (prop: HeaderIconProps) => JSX.Element;
}

export default function HeaderTabMenu({
  href,
  menuName,
  IconComponentFunction,
}: HeaderTabMenuProps) {
  	const [active, setActive] = useState(false);
	return (
    	<li
          onMouseEnter={() => setActive(true)}
	      onMouseLeave={() => setActive(false)}
        >
          <Link href={href}>
            <div>
                <IconComponentFunction active={active} />
            </IconWrapper>
            <div>
              {menuName}
            </div>
          </Link>
        </li>
    )
  );
}

위와 같이 IconComponent를 함수로 전달 후 전달을 받은 컴포넌트에서 props를 직접 제어할 수 있다

// header.tsx
<HeaderTabMenu
  href={routes.home}
  menuName="학습 데이터 종합"
  IconComponentFunction={ChartBarIcon}
>