hover event

특정 component에 마우스 커서가 올라가면 이미지가 보이게 바꾸려고 했다.
처음에 생각한게

const [hover, setHover] = useState(false);

const onMouseOver = () => setHover(true);

const onMouseLeave = () => setHover(false);

이런 식으로 하려고했는데 component가 여러개 있을 때
마우스를 빨리 왔다갔다 하니까 이벤트가 적용이 안될때가 있었다.

그래서 styled-component에 hover를 적용하기로 했다.

const Wrapper = styled.div`
  width: 100px;
  height: 100px;
  background: yellow;
`;

const Img = styled.img`
  width: 100px;
  height: 100px;
  display: none;

  ${Wrapper}:hover & {
    display: block;
  }
`;

이런 방식으로 하니까 잘 적용이 됐다.