# All files / src/chap03 EventMouse.js

0% Statements 0/6
100% Branches 0/0
0% Functions 0/3
0% Lines 0/4

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    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} />
      );
    }