FrontEnd/React2 [React : TypeScript] 이벤트 핸들링의 모든 것: 기본 문법부터 전파 관리까지 리액트 이벤트 개요리액트에서 사용자와 상호작용(Interaction)을 구현하는 핵심은 이벤트(Event)입니다. HTML의 이벤트 처리 방식과 유사해 보이지만, 리액트만의 고유한 문법과 동작 원리(Synthetic Event)가 존재합니다.리액트 이벤트 핸들링의 올바른 문법, 흔히 하는 실수, 그리고 이벤트 전파(Propagation)를 제어하는 방법까지 정리해 보겠습니다.1. 리액트 이벤트의 기본 문법리액트의 이벤트는 HTML DOM 이벤트와 비슷하지만 몇 가지 차이점이 있습니다.카멜 케이스(camelCase): onclick이 아닌 onClick, onsubmit이 아닌 onSubmit을 사용합니다.JSX 표현식: 문자열이 아닌 함수(이벤트 핸들러)를 중괄호 {} 안에 전달합니다.// ✅ 올바른 예.. 2026. 1. 4. [React : TypeScript] verbatimModuleSyntax 개요'인터페이스나 타입'is a type and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled.이라는 경고메세지를 보고 이해가 되지않아 작성하게 되었습니다.에러 상황[경고 메세지]인터페이스나 타입을 import 해서 사용하던 와중에 발생한 에러에러 메세지는 다음과 같습니다.'사용했던 인터페이스나 타입'is a type and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled.원인 main.tsx 파일createRoot(document.getElementById('root')!).render( ,)바이트.. 2026. 1. 3. 이전 1 다음