1. React event에서 주의할 사항
- 이벤트의 이름은 카멜 표기법으로 사용할 것
- 이벤트에 자바스크립트 코드를 전달하는게 아니라, 함수 형태의 값을 전달 할 것
- DOM 요소에만 이벤트 설정이 가능하고 컴포넌트에는 이벤트를 자체적으로 설정할 수 없음(컴포넌트에는 props를 전달할 뿐)
예제) DOM Event Handling 부분에 객체 형태로 전달. 객체가 아닌 자바스크립트 코드를 넣으면 실행안됨
Warning 문구로 "Warning: Expected `onChange` listener to be a function, instead got a value of `string` type."
React의 이벤트에서는 문자열이 아닌 Function 형태를 기대함
import React, { Component } from 'react';
class EventPractice extends Component {
render () {
return (
<div>
<h1>이벤트 연습</h1>
<input type="text" name="message" placeholder="아무거나 입력하세요."
onChange={
(e) => {
alert('aaa');
}
} />
</div>
)
}
}
export default EventPractice;
'Web Front-End > React' 카테고리의 다른 글
React Hooks (0) | 2020.04.12 |
---|---|
React 라이프사이클 메서드 (0) | 2020.04.12 |
React 라이프사이클 (0) | 2020.04.11 |
React 함수형 컴포넌트, 클래스형 컴포넌트, (0) | 2020.04.09 |
React Project 생성 (0) | 2020.04.07 |