[React] 부모 요소의 Event 제어하기

0. 개요

프로젝트를 구현하는 과정에서 이러한 List를 만들었다.

각 List는 클릭시 해당 페이지로 이동되고,

여기에 각 List를 제어하기 위한 체크박스도 추가했는데

체크박스 클릭시 체크박스 이벤트와 부모요소인 List의 이동 이벤트가 동시에 작동되었다.

부모 요소의 이벤트는 사용하지 않은 채 자식요소의 이벤트만 사용하고 싶다면 어떻게 해야될까?

 

---

 

1. 삽질기: e.preventDefault()

리액트를 배웠을 때, 다른 이벤트의 동작을 막기 위해 사용했던 e.preventDefault()를 사용했다.

결과는 역시 실패였다.

이유는 preventDefault 메서드는 현재 요소의 기본 이벤트를 막는 기능이기 때문이다.

즉, 위와 같은 상황에서 사용시, 체크박스의 체크 기능을 막아버리는 것이다.

 

 

 

2. 해결책: e.stopPropagation()

비슷한 상황을 검색하다보니, 특별한 로직이 아닌 문제 해결을 위한 기본메서드를 찾을 수 있었다.

e.stopPropagation() 사용시 해당 요소의 이벤트만 동작하며 다른 이벤트(부모 요소의) 이벤트들은 막는다.

 

const test = (e) => {
    e.stopPropagation(); // 이 요소를 제외한 부모 요소들의 이벤트를 막는다.
    // e.preventDefault(); // 이건 이 요소의 기본 이벤트를 막는다.
    console.log("test")
}

비교적 허무하게(?) 해결되었다

 

---

결론

쉽게 해결 된 문제라 다행이지만서도, 한편으론 이런 간단한 해결책도 모르고 있었다는 점이 아쉬움이 남는다.

어서 지금 진행하는 프로젝트를 끝낸 후, 책으로 좀 더 깊게 Java Script를 공부해야겠다는 생각이 든다