e.stopPropagation()

컴포넌트가 겹쳐있을 때 클릭하면 이벤트 버블링이 일어난다.
따라서 부모로 이벤트가 전파되는것을 막기위해 이벤트 캡쳐링을 사용한다.

// 이벤트 캡쳐링(이벤트 중복방지) - e.stopPropagation()
import type { SyntheticEvent } from "react";

export default function EventHandler() {
  const aclick = (e: SyntheticEvent) => {
    console.log("클릭1");
  };

  const bclick = (e: SyntheticEvent) => {
    console.log("클릭2");
    e.stopPropagation();
  };

  return (
    <div onClick={aclick}>
      <div>클릭1</div>
      <button onClick={bclick}>클릭2</button>
    </div>
  );
}

이렇게 하면 클릭2를 눌럿을때 클릭1까지 클릭되는것을 막을 수 있다!

e.preventDefault()

<submit> 태그는 값을 전송하면서 해당 페이지를 새로고침 하는 기능을 가지고 있다. 이러한 기능들은 매우 유용하지만, 그 의도로 사용하지 않게 될 경우 불편함을 야기할 수 있다.
이때 사용하는 것이 바로 event.preventDefault() 이다.

import { useState } from "react";

export default function FormEx() {
  const [value, setValue] = useState<string>("");
 
  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
    const {
      currentTarget: { value },
    } = event;
    setValue(value);
  };

  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault(); // 자동제출 방지
    console.log(value);
  };

  return (
    <>
      <form onSubmit={onSubmit}>
        <input
          onChange={onChange}
          value={value}
          placeholder="입력하세요"
        ></input>
        <button>제출</button>
      </form>
    </>
  );
}

이렇게 하면 제출버튼을 눌렀을 때 자동으로 페이지가 새로고침되는 것을 막을 수 있다.