그림 3-21 stopPropagation( ) 메서드 호출 결과

● 이벤트 기본 동작 막기

HTML 요소는 특정 이벤트가 발생하면 자동으로 실행하는 기본 동작이 있습니다. JSX 요소도 HTML 태그와 동일하게 이러한 기본 동작을 따릅니다. 예를 들어 <a> 태그는 클릭하면 링크로 이동하고, <button> 태그는 클릭 이벤트를 발생시키며, <form> 태그는 입력한 데이터를 서버로 제출하면서 페이지를 새로 고침합니다.

하지만 리액트 애플리케이션에서는 이런 기본 동작을 막아야 할 상황이 자주 발생합니다. 예를 들어, REST API를 통해 데이터를 비동기 방식으로 전송하는 경우에 <form>의 기본 동작(페이지 새로 고침)이 실행되면 리액트 애플리케이션의 상태와 UI가 초기화되어 사용자가 입력한 데이터가 모두 사라질 수 있습니다.

기본 동작을 막으려면 이벤트 객체의 preventDefault() 메서드를 사용합니다. 이 메서드는 웹 브라우저의 기본 동작을 취소합니다. 다음 예제를 봅시다.