● 이벤트 속성 사용 시 주의사항

리액트의 JSX 요소에 이벤트 속성을 사용할 때 주의해야 할 점이 있습니다. JSX에서 HTML 태그에는 DOM 표준 이벤트 속성만 사용할 수 있습니다. 따라서 다음과 같이 존재하지 않는 속성(onFive)을 사용하면 웹 브라우저에서 인식할 수 없어 오류가 발생하거나 무시됩니다.

export default function App() {
  return (
    <>
      <button onFive={() => { alert('five'); }}>click</button> ----- 존재하지 않는 이벤트 속성 사용으로 오류 발생

    </>
  );
}

하지만 컴포넌트는 HTML 태그와 달리 직접 만든 사용자 정의 함수입니다. 따라서 다음과 같이 원하는 이름의 이벤트 속성을 자유롭게 정의해 props로 전달할 수 있습니다.