이벤트 버블링 막기

모달창을 직접 만들어서 사용할 때 모달창 내부를 클릭하면 닫히는 현상볼수 있다. 이 현상을 막기 위해서 보통 event.stopPropagation()을 모달창 onClick을 핸들링하는 함수에 넣어준다. 

  const handleTagSearchOpen = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.stopPropagation();  // 이벤트 버블링 막기
    setSearchOpen((prev) => !prev);
  };

위와 같이 작성하면 부모 컴포넌트에 있는 onClick 이벤트가 작동하는 것을 막을 수 있다. 내가 참고한 모던 자바스크립트 튜토리얼(https://ko.javascript.info/bubbling-and-capturing#ref-868)에 보면 이벤트 버블링은 왠만하면 막지말라고 이야기 하고있다. 진짜 막아야하는 상황에만 막으라고 주의를 주고있다.