[React][css] 마우스 hover 시에 svg 보이기

구현하고자 한 뷰

나는 그저 이와 같은 뷰를 만들고 싶었다. .

나는 그저 위와 같은 뷰를 만들고 싶었다. .

 

---

onmouseover / onmouseout 이벤트

처음에 들었던 생각은

onmouseover 이벤트로 hover 시의 state와

onmouseout 이벤트로 hover 가 해제될 때의 state를 관리하고자 하였다

 

<StWrapper
  onClick={() => console.log("wrapper")}
  onMouseOver={() => handleIsMouseOver(true)}
  onMouseOut={() => handleIsMouseOver(false)}
>
  {isMouseOver ? (
    <StHoveringBox onClick={() => console.log("hover")}>
      <SVG />
    </StHoveringBox>
  ) : null}
</StWrapper>

 

그래서 위와 같이 isMouseOver boolean state를 관리해주었고,

2가지 문제점이 발생하였다

 

1. onmouseover / onmouseout 이벤트는 hover 뿐만 아니라,
   자식 요소 출입 시에도 일어나 부정확한 렌더링 뷰가 보여진다
2. StHoveringBox 의 레이아웃으로 인해 onClick 이벤트의 target 요소가 부정확하다

 

필수적으로 다른 방법을 고안해야 했다

 

---

&:hover::before 가상선택자

hover 를 이벤트로 처리하지 않는 css의 해답으로,

가상선택자를 생각하였다

 

이 때에, svg를 ::before 가상선택자 div에 위치시키기 위해

content: url( ) 로 불러와야 했다

 

찾아본 바로 다음과 같이 2가지 방법이 있다

 

.div::before {
    content: url("data:image/svg+xml; utf8, <svg ... code here</svg>");
    ...
}

 

위와 같이 svg 코드를 직접적으로 불러올 수 있다

 

또한,

React + styled-components + typescript 에서는

svg 를 import 하여 아래와 같이 string 값으로 가져온다

 

import styled from "styled-components";
import svg from "./svg.svg";

...

<StWrapper svgurl={svg} />

..
      
 const StWrapper = styled.div<{ svgurl: string }>`
   &:hover::before {
    content: url(${({ svgurl }) => svgurl});
    
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 10;

    background-color: #f6f6f6;
    opacity: 80%;
  }
`;

 

참고로 CSS2 까지는 가상선택자에 : 를, 

CSS3 부터는 :: 를 붙인다고 한다

 

svg 파일이 모듈링되고, string으로 처리된다는 사실이 인상적이다

확인해보니 static/media/~.svg 로 저장이 되는 듯 하였다

---

https://zetawiki.com/wiki/HTML_%EB%A7%88%EC%9A%B0%EC%8A%A4_%EC%9D%B4%EB%B2%A4%ED%8A%B8_onmouseenter,_onmouseover,_onmouseout,_onmousemove

HTML 마우스 이벤트 onmouseenter, onmouseover, onmouseout, onmousemove - 제타위키

https://stackoverflow.com/questions/19255296/is-there-a-way-to-use-svg-as-content-in-a-pseudo-element-before-or-after

Is there a way to use SVG as content in a pseudo element ::before or ::after