본문 바로가기

Web Front-End/React

React Event

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