[TIL] 이벤트 버블링, 이벤트 캡쳐링, preventDefault, stopPropagation

이번 과제에서는 인스타그램 같은 간단한 커뮤니티 사이트를 만들었다. 포스트 리스트가 쭉 보이고, 포스트 이미지를 클릭하면 해당 포스트의 디테일 페이지로 이동한다. 포스트에는 추가로 수정/삭제 버튼을 넣었는데, 이때 버튼을 눌러도 바로 수정이나 삭제가 되는 것이 아니라 디테일 페이지로 이동한 다음, 거기서 버튼을 눌러야 수정/삭제를 할 수 있었다. 왜 그런지 알아보니 이벤트가 상위 요소 또는 하위 요소로 전파되었기 때문이었다. 이런 방식을 이벤트 버블링, 이벤트 캡쳐링이라고 하고, 이를 중단하기 위해 stopPropagation을 사용할 수 있다. 비슷한 개념으로 preventDefault라는 것도 있어서 알아보았다.

이벤트 버블링

이벤트 버블링이란 특정 화면 요소에서 이벤트가 발생했을 때, 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성이다.

이벤트 캡쳐링

이벤트 캡쳐링이란 버블링과 반대 방향으로 진행되는 이벤트 전파 방식이다.

preventDefault

preventDefault는 해당 이벤트에 대한 브라우저 고유의 동작을 중단시켜주는 역할을 한다.

stopPropagation

stopPropagation은 해당 이벤트가 전파되는 것을 막는다. 이벤트 버블링의 경우에는 클릭한 요소의 이벤트만 발생시키고 상위 요소로 전달되는 것을 막는다. 이벤트 캡쳐링의 경우에는 클릭한 요소의 하위 요소들로 이벤트를 전달하지 않는다.

<Button
                width="auto"
                margin="4px"
                padding="4px"
                _onClick={(e) => {
                  e.stopPropagation();
                  history.push(`/write/${props.id}`);
                }}
              >

따라서 이번에는 stopPropagation을 통해 문제를 해결할 수 있었다!✨