React : 상위 요소 클릭 안되게 하는 법

Blog.js

/* eslint-disable */
import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
 
function Blog() {
 
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <h4 onClick={() => { console.log('h4클릭') }}> 제목
        <span onClick={() => { console.log('span클릭') }}> 😆 </span>
      </h4>
    </div>
  );
}
 
export default Blog;
 

이런 식으로 h4 태그, span 태그 두개에 이벤트를 걸어 놓았다면, 아래와 같이 span 태그 안에 있는 내용 클릭 시 h4 클릭 이벤트도 함께 발생하게 된다. (이걸 이벤트 버블링이라 한다.)

 

 

아이콘 클릭 시 제목 클릭 이벤트도 같이 발생된다.

 

 

 

# span 에만 이벤트가 발생하게 하고 싶을 땐?

 

<span onClick={(e) => { e.stopPropagation(); console.log('span클릭') }}> 😆 </span>

span 태그에 (e) 를 넣어주고 e.stopPropagation(); 을 넣어주면 된다!!

 

▲ 결과!!