All files / src/chap03 EventMouse.js

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
 
 
 
 
 
 
 
 
 
 
 
import { useState } from 'react';
 
export default function EventMouse({ beforeSrc, afterSrc, alt }) {
  // 현재 표시 중인 이미지
  const [current, setCurrent] = useState(beforeSrc);
  // mouseover/mouseleave 이벤트 핸들러를 준비한다.
  const handleEnter = () => setCurrent(afterSrc);
  const handleLeave = () => setCurrent(beforeSrc);
  return (
    <img src={current} alt={alt}
      onMouseEnter={handleEnter} onMouseLeave={handleLeave} />
  );
}