onMouseEnter 이슈

보통

onMouseEnter, onMouseLeave 를 쌍으로 사용한다.

그런데 간혹 onMouseLeave event가 발생되지 않는 케이스가 있다.

leaver가 발생할 수 있는 dom 자체가 사라지면, leave가 발생하지 않는다.

import React from 'react';

export default function Component() {
  const [highlight, setHighlight] = React.useState(false);
  const [visible, setVisible] = React.useState(true);
  return (
    <>
      <div onMouseEnter={() => {
        setHighlight(true);
      }}
        onMouseLeave={() =>{
          setHighlight(false);
        }}
      >
        <div>Event1</div>
        <div>highlight: {highlight + ''}</div>
        {
          visible && <button onClick={() => {
            setVisible(false);
          }}>클릭</button>
        }   
      </div>
    </>
  )
}

 

해결1

Component로 분리하고, clean up에서 처리한다.

import React from 'react';

const Btn = ({setVisible, setHighlight}: {setVisible: any, setHighlight: any}) => {
  React.useEffect(() => {
    return () => {
      setHighlight(false);
    }
  }, [])
  return (
    <button onClick={() => {
      setVisible(false);
    }}>클릭</button>
  )
}
export default function Component() {
  const [highlight, setHighlight] = React.useState(false);
  const [visible, setVisible] = React.useState(true);
  return (
    <>
      <div onMouseEnter={() => {
        setHighlight(true);
      }}
        onMouseLeave={() =>{
          setHighlight(false);
        }}
      >
        <div>Event1</div>
        <div>highlight: {highlight + ''}</div>
        {
          visible && <Btn setVisible={setVisible} setHighlight={setHighlight} />
        }   
      </div>
    </>
  )
}