728x90
@typescript-eslint/explicit-function-return-type 규칙이 적용되어 있었고, return type이 필수로 명시돼야 했다. 게다가 초기에 제공된 환경에서도 JSX.Element로 return type을 명시해줬는데, namspace JSX가 deprecated 됐다.
@deprecated — Use React.JSX instead of the global JSX namespace.
이번 기회에 오랜만에 cheatsheet을 보고오자.
Useful React Prop Type Examples
export declare interface AppProps {
children?: React.ReactNode; // best, accepts everything React can render
childrenElement: React.JSX.Element; // A single React element
style?: React.CSSProperties; // to pass through style props
onChange?: React.FormEventHandler<HTMLInputElement>; // form events! the generic parameter is the type of event.target
// more info: https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase/#wrappingmirroring
props: Props & React.ComponentPropsWithoutRef<"button">; // to impersonate all the props of a button element and explicitly not forwarding its ref
props2: Props & React.ComponentPropsWithRef<MyButtonWithForwardRef>; // to impersonate all the props of MyButtonForwardedRef and explicitly forwarding its ref
}
React.JSX.Element와 ReactNode는 뭐가 다를까?
React.JSX.Element -> Return value of React.createElement
React.ReactNode -> Return value of a component사실 위에 이미 적혀있긴하다. children, childrenElement에 적혀있다.
(everything React can render 그리고 A single React element)
* ReactNode
ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;