[React] onMouseOver/onMouseOut 예제

기능을 설명하자면 메뉴에 MouseOver를 했을 때 슬라이드 메뉴가 나타나고 MouseOut 했을 때에는 슬라이드 메뉴가 없어지는 기능이다.

📍전체 코드

import { useState } from "react";
import { data } from "../data";
import styled from "styled-components";

//메인 페이지) Navbar 메뉴리스트
const NavbarMenuList = () => {
  const [ismouse, setIsMouse] = useState(false);

  return (
    <>
      {data.menuListData.map((menu) => (
        <MenuItem
          key={menu.id}
          onMouseOver={() => setIsMouse(true)}
          onMouseOut={() => setIsMouse(false)}
        >
          {menu.menuItem}
        </MenuItem>
      ))}
      {ismouse && (
        <MenuSlide
          onMouseOver={() => setIsMouse(true)}
          onMouseOut={() => setIsMouse(false)}
        >
          <ul className="category">
            <li>
              <b>직군전체</b>
            </li>
            {data.categoryMenuData.map((categoryItem) => (
              <li key={categoryItem.id}>{categoryItem.menuItem}</li>
            ))}
          </ul>
          <div className="categoryItem">
            <h4>직군을 먼저 선택하면 상세 직무를 볼 수 있어요.</h4>
          </div>
        </MenuSlide>
      )}
    </>
  );
};

export default NavbarMenuList;

state를 true/false로 만들어서 ismouse가 true 일 때에는 메뉴 슬라이드가 보여지게, false 일 때에는 메뉴 슬라이드가 안 보여지게 만들었다.

📍 < 논리곱 연산자(&&) 작동방식 >

false인 경우 : 첫 번째 피연산자가 false일 때 두 번째 피연산자를 평가하지 않고 첫 번째 피연산자를 반환한다
true인 경우 : 첫 번째 피연산자가 true일 때 두 번째 피연산자를 평가하고 두 번째 피연산자의 값을 반환한다

console.log(true && 'Hello');    // 'Hello'
console.log(false && 'Hello');   // false
console.log('' && 'Hello');      // ''
console.log(0 && 'Hello');       // 0
console.log(null && 'Hello');    // null
console.log(undefined && 'Hello'); // undefined
console.log(NaN && 'Hello');     // NaN

용어 - 연산자 : +,- 등 / 논리연산자 : && / 피연산자 : 'Hello', true 등

위에 코드를 바탕으로 알 수 있는 것은 ismouse가 true일 때 렌더링되게 만들었고, false일 때에는 아무것도 렌더링 되지 않게 만들었다. &&연산자를 사용하니까 오랜 시간이 걸리지 않고, 편한 방법으로 기능을 구현할 수 있었던 것 같다.