[React] 이벤트 버블링 막기

포트폴리오 헤더 만들면서 생긴 문제,,

Link 안에 span태그로 다크모드를 만들었더니 다크모드 클릭 할 때마다 홈으로 가는 현상 발생

이벤트 버블링 막는 메소드가 e.stopPropagation() 만 있는 줄 알고 왜 안되지 ? 고민만 하다가 검색해보니

form submit 버튼 클릭시 막아주는 메소드(e.preventDefault)를 써도 이벤트 버블링을 막을 수 있다는 걸 발견 

 

e.stopPropagation 안되면 e.preventDefault 써보기

차이가 뭔지 찾아봐야겠다

<header>
    <div>
        <Link to={'/'}><h1 className="logo">Dust
            <span className="dark-mode" onClick={(e) => {
                // e.stopPropagation();
                e.preventDefault();
                const click = e.currentTarget;
                if(click === e.currentTarget){
                    root.classList.toggle('dark');
                    setDark(!dark);
                }
            }}>{dark ? '🌜모드' : '🌞모드'}</span></h1>
        </Link>
        <ul>
            <li><Link to={'/todolist'}>TodoList</Link></li>
            <li><Link to={'/shop'}>shop</Link></li>
            <li><Link to={'/board'}>Board</Link></li>
            <li><a href="#">Github</a></li>
        </ul>
        <div id="mobile-menu" onClick={() => {
            dispatch(modalOpen(true));
        }}>Menu</div>   
    </div>
</header>