[React] JSX.Element 곧 사용할 수 없게 될 심볼이 사용되었습니다

📱테스트 환경

"react": "18.3.0",
"react-dom": "18.3.0"

---

props 로 Element 를 넘길때가 있어서 기존에 사용하던

JSX.Element 를 타입으로 줬다.

내 코드는 다음과 같다.

export const CardHeader = ({
                               label,
                               info,
                               onClick = () => {
                               },
                               buttonText,
                               buttonWidth,
                               children,
                               editIcon
                           }: {
    label: string;
    info?: string | JSX.Element;
    onClick?: () => void;
    buttonText?: string,
    buttonWidth?: number | string;
    children?: ReactNode;
    editIcon?: boolean;
}) => {
	return ...
}

근데 JSX 쪽에 취소선이 그어지더니

곧 사용할 수 없게 될 심볼이 사용되었습니다, 더 나은 심볼로 대체하려면 문서를 참조하세요 

응 .. ? 이게뭐지 ..? 경고다 보니 안되는건 아닌데

곧 사용할 수 없다고 하니 이게뭐야 .. 하고 좀 찾아봤더니

타입스크립트 5.0 이후 JSX 관련 타입 시스템이 개선되면서

향후 변경되거나 지원 중단될 예정이라고 한다 ..

이를 해결하기위해 JSX.Element 대신 React.ReactNode 를 사용해야 한다고 한다.

뭔가 업데이트 될때마다 많은게 바뀌니 .. 어렵다 어려워 ..

개발은 언제나 어려워 :(