엘리먼트가 변경될 때 함수가 여러번 실행되는 버그

마우스를 올리면 +1씩 올라가는 함수인데 <img>엘리먼트에서 <video>엘리먼트로 변경될 때 함수가 3번 실행이 되는 버그가 발생하였다.

 

원인

const Home = () => {
  const [leftNum, setLeftNum] = useState(0);

  const leftPlusNum = () => {
    setLeftNum(leftNum + 1);
  };


  return (
    <ContainerS>
      <LeftScreenS onMouseEnter={leftPlusNum} leftNum={leftNum}>
        {leftNum % 4 === 3 ? (
          <video src={leftVideo} muted loop autoPlay />
        ) : (
          <img src={leftScreenData[leftNum % 4]} alt='leftscreen' />
        )}
      </LeftScreenS>
    </ContainerS>
  );
};

export default Home;

onMouseEnter는 해당 박스에 커서를 올렸을 때 발동을 한다. 

leftNum % 4 === 3일 때 문제가 발생한다.

 

1. 커서를 올릴 때 leftPlusNum 함수 발동하여 leftNum % 4 -> 3이 된다.

2. <video>엘리먼트로 변경되면서 leftPlusNum 함수 발동 leftNum % 4 -> 0 이된다.

3. <image>엘리먼트로 다시 변경되면서 leftPlusNum 함수 발동leftNum % 4 ->  1 이된다.

 

해결

const Home = () => {
  const [leftNum, setLeftNum] = useState(0);

  const leftPlusNum = () => {
    setLeftNum(leftNum + 1);
  };

  return (
    <ContainerS>
      <LeftScreenS onMouseEnter={leftPlusNum} leftNum={leftNum}>
        <img src={leftScreenData[leftNum % 4]} alt='leftscreen' />
        <video src={leftVideo} muted loop autoPlay />
      </LeftScreenS>
      <RightScreenS onMouseOver={rightPlusNum}>
        <img src={rightScreenData[rightNum % 4]} alt='leftscreen' />
      </RightScreenS>
    </ContainerS>
  );
};

export default Home;

const LeftScreenS = styled.section<{ leftNum: number }>`
  width: 100%;
  height: 100%;
  img,
  video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  img {
    display: ${(props) => (props.leftNum % 4 === 3 ? 'none' : null)};
  }
  video {
    z-index: ${(props) => (props.leftNum % 4 === 3 ? null : 'none')};
  }
`;

<img>, <video> 엘리먼트를 display:none;으로 컨트롤 하였다.