[React] 특정 div에서 클릭 이벤트를 막으려면?

안녕하세요. 오늘은 Javascript에서 이벤트 전파를 중지하는 메소드인 'stopPropagation()' 에 대해 써 볼까 합니다.

홈페이지를 만들다가 생각난 부분인데 잊기 전에 기록해 두려고 해요.

 

stopPropagation()

직역하자면 "멈춰 전파!" 정도 되려나욬ㅋㅋ

Javascript 이벤트 핸들러에서 사용되는 메소드로, 특정 이벤트가 더 이상 상위 요소로 전파되지 않도록 막는 역할을 합니다. 웹 페이지에서 이벤트는 기본적으로 '버블링(bubbling)' 방식으로 발생하는데, 이는 특정 요소에서 이벤트가 발생하면 그 이벤트가 상위 요소로 차례대로 전파되는 것을 의미합니다.

 

• 부모 요소의 이벤트 핸들러가 실행되는 것을 방지하고 싶을 때
• 특정 요소에서만 이벤트를 처리하고 싶을 때

 

제 홈페이지 같은 경우, 접혀있는 페이지를 클릭 시 왼쪽으로 슬라이드 되며 펼쳐지고, 다시 클릭하면 접히는 애니메이션으로 구성해 둔 터라, 페이지 안의 다른 요소들(버튼 혹은 다른 div등)을 클릭하면 내용 확인도 못하고 그대로 페이지가 접혀버리는 오류가 발생했죠. 페이지가 펼쳐진 상태에서 다른 요소를 클릭해도 페이지가 접히지 않게 하려면 하위 요소에 stopPropagation()을 적용해 주면 됩니다.

 

예시코드 입니다:

element.addEventListener('click', function(event) {
	event.stopPropagation();
	// 이벤트 처리 로직...
});

 

 

이와 같은 방법으로, 제 홈페이지에도 적용해 주었습니다. (일부 발췌)

function Portfolio() {
    return (
        <div className={styles.portfolioContainer}>
            <div className={styles.portfolioSubContainer}>
                <div className={styles.portfolioTitle}>
                    <p>포트폴리오</p>
                </div>
                <div className={styles.portfolioContent}>
                    <div className={styles.sectionTitle}>
                        <p>PROJECT #1. InterviewGo</p>
                    </div>
                    <div className={styles.portfolioDesc} onClick={(event) => event.stopPropagation()}>
                        <p>음성인식을 이용한 모의면접 어플리케이션입니다.</p>
                        <p>AI면접관이 질문을 하면 사용자는 휴대폰의 마이크를 통해 답변하는 형식으로,</p>
                        <p>면접 종료 후 간단한 피드백도 받아볼 수 있습니다.</p>
                        <p>-</p>
                        <p>InterviewGo는 구글 플레이스토어에서 만나보실 수 있습니다. 👉<a href="https://play.google.com/store/apps/details?id=com.interviewlab&hl=ko" target="_blank" rel="noopener noreferrer">플레이스토어 이동</a></p>
                        <p>GitHub: <a href="https://github.com/bjiyoon/InterviewGo" target="_blank" rel="noopener noreferrer">github.com/bjiyoon/InterviewGo</a></p>
                    </div>
                    .
                    .
                    .

 

<div className={styles.portfolioDesc} onClick={(event) => event.stopPropagation()}>

 

이런 식으로 div안에 추가해 주면 됩니다.

이렇게 해 주면,

 

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

 

잘 적용된 것을 볼 수 있습니다.

 

요는,

• 이벤트가 상위DOM요소로 전파되는 것을 방지합니다.
• 주로 이벤트 버블링을 막기 위해 사용됩니다.
• 이는 이벤트의 기본 동작을 막는 것이 아니라, 이벤트가 다른 요소로 '전파'되는 것만 막습니다.

폼 제출 할 때 preventDefault()를 쓰는 것과 살짝 비슷하죠?

 

비슷한 메소드로 stopImmediatePropagation()이 있는데

stopPropagation()이 상위요소로의 전파만 중지한다고 하면 stopImmediatePropagation()는

상위요소로의 전파는 물론, 현재 요소의 다른 이벤트 리스너 실행도 중지합니다. 

잘 사용하면 복잡한 DOM구조에서 이벤트 처리를 더 세밀하게 제어가 가능하겠네요.