[React] 함수로 hover 기능 구현

import React, { useState } from 'react';
import './App.css';

function App() {
   
  const [alert, setAlert] = useState(false);

  return (
    <div className="App">
      <button
        onMouseEnter={() => setIsShown(true)}
        onMouseLeave={() => setIsShown(false)}>
        Hover over me!
      </button>
      {alert && (
        <div>
          I'll appear when you hover over the button.
        </div>
      )}
    </div>
  );
}

export default App;

export default Login;

1. { alert && <div></div> }
2. 위에 내용은 useState(false)의 값을 주면 alert이 false이기 때문에 && 는 둘중하나만 거짓이여도 반환하지 않기 때문에 onMouseEnter()함수가 실행되면 true을 반환하여 화면에 text가 나타나게 된다.
3. useState(false)에 false의 값으로 주고 onMouseEnter()를 실행하여 이미지에 마우스를 올리면 true를 반환
4. onMouseLeave()를 실행하여 이미지에서 마우스가  벗어나면 false를 반환

.login-main-container {
    .right-checkbox {
    position: relative;
    }
    .right-checkbox-2nd-text {
      position: absolute;
      top: -40px;
      right: -10px;
    } 
}

1. 부모요소에 postion : relative을 주고
2. 자식요소에 postion : absolute  안주면 화면에 block 요소로 위치하여 화면이 없던 content가 생기면서 화면이 흔들리게 됨