Closed hyeyoonS closed 2 months ago
button 태그의 기본 어트리뷰트를 props로 받기 위해서는 React.ComponentPropsWithoutRef를 사용할 수 있고, ref를 props로 받기 위해서 forwardRef와 제네릭을 사용할 수 있습니다.
import React, { forwardRef } from 'react'
type ButtonProps = {
} & React.ComponentPropsWithoutRef<'button'>
const Button = forwardRef<HTMLButtonElement, ButtonProps>(({ children, ...buttonProps }, ref) => {
return (
<button ref={ref} {...buttonProps}>
{children}
</button>
)
})
Button.displayName = 'Button'
export default Button
import React, { forwardRef } from 'react'
type NativeButtonType = React.ComponentPropsWithoutRef<"button">;
type ButtonProps = {
children: React.ReactNode;
} & NativeButtonType;
const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
const { children, onClick, ...buttonProps } = props;
return (
<button ref={ref} onClick={onClick} {...buttonProps}>
{children}
</button>
)
})
export default Button;
ButtonHTMLAttributes<HTMLButtonElement>
를 추가합니다.
→ button 태그의 기본 Attribute를 받을 수 있습니다.2.forwardRef
를 사용하여 ref를 전달합니다.
→ ref를 props로 받을 수 있습니다.
import React, { forwardRef } from 'react'
type ButtonProps = {
onClick: () => void;
children: React.ReactNode;
} & React.ComponentPropsWithoutRef<'button'>
const Button = forwardRef<HTMLButtonElement, ButtonProps>(({ onClick, children }, ref) => {
return (
<button onClick={onClick} ref={ref}>
{children}
</button>
);
});
export default Button;
❓문제
🎯답변