[React] useState 이용하여 JS로 :hover 구현하기

호버링이란..

말그대로 마우스를 특정 요소 위에 올렸을 때 해당 요소가 바뀌게 해주는 그런 기능? 이다

const Barogagi = styled.div`
  &:hover {
      background-color: rgb(0, 0, 0, 0.5);
      color: rgb(255, 255, 255, 100);
  }
`;

 

이런식으로 styled-component나 css를 이용하여
호버링 기능을 쉽게 구현할 수 있지만

이제.. 이걸로는 외부의 컴포넌트를 호버할때마다
전혀 다른 컴포넌트에게 영향을 끼치게 만드는게 안되어서 속상했다

 

useState 를 이용한 hover 기능 구현

그러다가 알게된 onMouseOver 과 onMouseOut..

그리하여 리액트의 useState()를 이용하여 메인함수 내부에 호버링을 구현했다!

이름하야 자바스크립트로 호버링하기

 

const Ad = () => {
  const [isHovering, setIsHovering] = useState(0);

  return (
    <Wrapper
      onMouseOver={() => setIsHovering(1)}
      onMouseOut={() => setIsHovering(0)}
    >
      <ImageArea>
        <Thumbnail src="assets_header/thumbnail.png" />
        <Icon src="assets_header/clickIcon.png" />
        {isHovering ? (
          <Barogagi>
            <p className="text">자세히 알아보기</p>
          </Barogagi>
        ) : (
          ""
        )}
      </ImageArea>
...

 

여기서 <Wrapper> 로 감싸진 컴포넌트 어디에 마우스를 올리든 그 안에 있는 <Barogagi> 컴포넌트가 나타나게 바꿀수 있다.

---