[231213] react mui menu hover로 구현하기

react mui menu hover로 구현하기

• 아래 스택오버플로우 참고했다.

• 대중적인 라이브러리는 자료가 많아서 편한 걸 한번 더 느낌

• stack overflow

• 샌드박스 참고

const [anchorEl, setAnchorEl] = (useState < null) | (HTMLElement > null)
const open = Boolean(anchorEl)
const handleMouseOver = (event: React.MouseEvent<HTMLDivElement>) => {
  setAnchorEl(event.currentTarget)
}
const handleClose = () => {
  setAnchorEl(null)
}

<Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
  <MenuItem disableRipple onClick={handleMessageResult}>
    결과 재전송
  </MenuItem>
  <MenuItem disableRipple onClick={handleMessageInfo}>
    안내 문자 발송
  </MenuItem>
</Menu>

• MenuListProps 는 하위에 아이템 props 를 전달해주는 역할을 한다. 처음에 menu 에 onMouseLeave를 적용해서 원하는대로 사용 못했었음