Typescript 특정 컴포넌트만 필터링 할 수 있는법

최근 코드 리펙토링 도중에 이해가 가지 않는 부분이 있어 여쭤봅니다. 일단 제가 작업한 내용은 다음과 같습니다.

// CustomTracks.tsx
import { faList } from '@fortawesome/free-solid-svg-icons';
import styled from 'styled-components';
import Icon from '../../../../components/atom/Icon';
import LinkElement from '../../../../components/atom/LinkElement';

const MenuItem = styled.li`
  * {
    width: 25px;
    height: 25px;
  }
  Link,
  LogoutButton {
    padding: 5px;
  }
`;

function CustomTracks() {
  return (
    <MenuItem>
      <LinkElement
        LinkStyle={undefined}
        linkText={<Icon icon={faList} />}  // 필터링 하고 싶은 속성
        title="찜한 트랙 리스트"
        to="/tracks/custom"
      />
    </MenuItem>
  );
}

export default CustomTracks;

// Link.tsx
import { Link, LinkProps } from 'react-router-dom';
import { StyledComponent } from 'styled-components';

export interface LinkElementProps {
  to: string;
  linkText: string | JSX.Element; // 실제로 작업한 내용
  title?: string;
  LinkStyle?: StyledComponent<
    React.ForwardRefExoticComponent<
      LinkProps & React.RefAttributes<HTMLAnchorElement>
    >,
    any,
    {},
    never
  >;
}

function LinkElement({ to, title, linkText, LinkStyle }: LinkElementProps) {
  return LinkStyle ? (
    <LinkStyle to={to} title={title ? title : ''}>
      {linkText}
    </LinkStyle>
  ) : (
    <Link to={to}>{linkText}</Link>
  );
}

export default LinkElement;

저는 Link 컴포넌트의 linkText 속성이 string 그리고 Icon 컴포넌트만 허용할 수 있도록 하고 싶습니다. 그러나 보셨다시피 linkText의 type은 string | JSX.Element이므로 Icon 컴포넌트 뿐만이 아니라 어느 컴포넌트라도 허용하도록 되어있습니다. 이를 해결하기 위해서는 어찌 해야할지 모르겠습니다.

somn45 / mucketlist

Typescript 특정 컴포넌트만 필터링 할 수 있는법 #12