hover 시 이미지 변환하기(react hook)

hover 할 때 색을 바꿔야 할 때가 종종 생긴다.
코드로 직접 구현한 도형은 css에서 적용하면 되지만 이미지로 받은 경우에는 다른 색의 이미지로 바꾸어 주어야 한다.

onMouseOver, onMouseOut 함수를 사용하면 구현할 수 있다.

Ex)

import React from "react"
import navArrow from "../images/nav_list.png";
import navArrowBlue from "../images/nav_list_hover.png";

const Header = () => {
  const [isListHover, setIsListHover] = useState(false);
  return (
  	<li
      onMouseOver={() => setIsListHover(true)}
      onMouseOut={() => setIsListHover(false)}
    >
      리스트
      <img
        src={isListHover ? navArrowBlue : navArrow}
        alt=""
      />
    </li>
  )