이벤트 전파

• 리액트의 이벤트 핸들러는 기본적으로 모든 하위 컴포넌트의 이벤트도 포착
  • 하위 컴포넌트에서 발생한 이벤트가 위로 전파됨 (= 버블링)

예시

• Header 컴포넌트 안에 Button 컴포넌트가 있을 때
• 두 컴포넌트 함수에 모두 console.log를 찍고 Button 컴포넌트를 클릭하면
  • Button의 콘솔도 실행되고 이후 Header의 콘솔도 실행됨
    = 하위 컴포넌트만 실행되길 원했는데 상위도 실행되는 상황 (feat. 버블링)

=> 해결하기: 하위 컴포넌트(Button)의 이벤트 핸들러 함수 안에 e.stopPropagation() 라인 추가

대안: 모듈화된 하위 컴포넌트 만들 때 전파 방지 라인을 추가

• 예를 들어 재사용할 수 있는 Button 컴포넌트를 만들 때 e.stopPropagation() 라인을 추가해두면 위와 같은 Header/Button 상황을 미리 막을 수 있음
  • '전파에 대한 좋은 대안'이라고 공식 문서에서 설명

function Button({ onClick, children }) {
	return (
    	<button onClick={(e) => {
        	e.stopPropagation();
            onClick();
        }}>
        	{children}
        </button>
    );
}

추가: e.preventDefault()

= 브라우저의 기본 동작 방지

• form의 onSubmit 이벤트 핸들러에 e.preventDefault()를 넣는 것은 사용 예시 중 하나일 뿐
• form의 새로고침 동작을 막는 것에만 국한된 게 아니라 다른 HTML 태그의 기본 브라우저 동작도 방지