[React] 이벤트 처리하기
2022. 10. 12. 20:18
프로그래밍/React
이벤트 처리하기 React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사함 몇 가지 문법 차이는 다음과 같음 React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용 JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달함 예를 들어, HTML은 다음과 같음 Activate Lasers React에서는 약간 다름 Activate Lasers 또 다른 차이점으로, React에서는 false를 반환해도 기본 동작을 방지할 수 없음 반드시 preventDefault를 명시적으로 호출해야 함 예를 들어, 일반 HTML에서 폼을 제출할 때 가지고 있는 기본 동작을 방지하기 위해 다음과 같은 코드를 작성할 수 있음 Submit React에서는 다음..
[React] 엘리먼트 렌더링
2022. 10. 6. 20:13
프로그래밍/React
엘리먼트 렌더링 엘리먼트는 React 앱의 가장 작은 단위 엘리먼트는 화면에 표시할 내용을 기술 const element = Hello, world; 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며(plain object) 쉽게 생성할 수 있음 React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트함 주의 더 널리 알려진 개념인 “컴포넌트”와 엘리먼트를 혼동할 수 있음 엘리먼트는 컴포넌트의 “구성 요소”임 DOM에 엘리먼트 렌더링하기 HTML 파일 어딘가에 가 있다고 가정해보자 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 “루트(root)” DOM 노드라고 부름 React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있음..