JSX에서 onClick이 camelCase로 사용되는 이유
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
React 및 JSX를 사용하는 프론트엔드 개발자, 초보자
핵심 요약
- JSX는 JavaScript object syntax로, DOM property를 camelCase로 매핑
- HTML attribute(
onclick)와 JavaScript property(onClick)의 차이를 이해해야 함 - React는 JSX를
React.createElement()로 변환하며, camelCase가 DOM API와 호환됨
섹션별 세부 요약
1. HTML과 JSX의 차이점
- HTML에서 이벤트는
onclick과 같이 lowercase로 사용 - JSX는 JavaScript object로 작성이므로,
onClick과 같이 camelCase 사용 - 예:
는React.createElement("button", { onClick: ... })로 변환
2. JSX → JavaScript object 변환
- JSX의
onClick은React.createElement()의 property key로 사용 - DOM API에서
HTMLElement.prototype.onclick은 camelCase로 정의되어 있음 - 예:
→onChange: handleChange속성으로 변환
3. object key와 DOM property의 관계
- JSX는 props를 JavaScript object로 전달하므로, key는 실제 DOM property 이름과 일치해야 함
onClick은 JavaScript의 camelCase 규칙을 따르며,onclick은 HTML attribute로 사용 불가
결론
- React에서 JSX를 사용할 때 camelCase로 이벤트 핸들러를 명시해야 하며, 이는 JavaScript object와 DOM API의 호환성을 위해 필수적입니다. 예:
onClick대신onclick을 사용하면 React가 인식하지 못합니다.