이렇게 하면 안됨
const ArrowBack = ({ onClick }: React.MouseEventHandler<SVGSVGElement>) => {
return (
<StyledArrowBack
onClick={onClick}
style={{ cursor: "pointer" }}
role="button"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z" />
</StyledArrowBack>
);
};
const ArrowForward = (onClick: React.MouseEventHandler<SVGSVGElement>) => {
return (
<StyledArrowForward
onClick={onClick}
style={{ cursor: "pointer" }}
role="button"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z" />
</StyledArrowForward>
);
};
const Slider = (recipeList: SliderProps[]) => {
const { card, cardIdx, goForward, goBack } = useSliderCard(recipeList);
return (
<SliderContainer>
{card.length !== 0 && (
<>
<ImgBox>
<ArrowBack onClick={goBack} />
</ImgBox>
</>
)}
</SliderContainer>
);
};
export default Slider;
React.MouseEventHandler <- 여기에 onClick은 없다고 뜸
근데 이렇게는 됨
interface ArrowButtonProps {
onClick: React.MouseEventHandler<SVGSVGElement>;
}
const ArrowBack = ({ onClick }: ArrowButtonProps) => {
return (
<StyledArrowBack
onClick={onClick}
style={{ cursor: "pointer" }}
role="button"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z" />
</StyledArrowBack>
);
};
또 이렇게는 안 됨
const ArrowForward = (onClick: ArrowButtonProps) => {
return (
);
};
무조건 {onClick}으로 해야하는 거 같은데
왜지????