-
이벤트(Event)JavaScript/React 2022. 12. 17. 16:58
이벤트(event)란?!\
웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(event)라고 한다.
예를 들어, 버튼에 마우스 커서를 올리면은 onmouseoㅍer이벤트를 실행,
클릭했을때는 onclick 이벤트를 실행
cf. DOM(Document Object Model)웹페이지에 나타나는 HTML문서 전체를 객체로 표현한 것
HTML에서는 이벤트를 실행하면 " " 사이에 있는 JS를 실행하도록 코드를 작성한다<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <button onclick="alert('executed')"> Click me </button> </body> </html>
REACT에서 지원하는 이벤트 종류Clipboard, Composition, Keyboard, Focus, Form, Mouse, Selection
Touch, UI, Wheel, Media, Image, Animation, Transition
실습
1. 컴포넌트 새성 및 불러오기
2. onChange 이벤트 핸들링하기
3. 임의 메서드 만들기
4. input 여러개 다루기
5. onKeyPress 이벤트 핸들링하기// EventPractice 컴포넌트 생성 import { Component } from 'react'; class EventPractice extends Component { render(){ return ( <div> <h1>이벤트연습</h1> </div> ) } } export default EventPractice;// App.js에서 EventPractice렌더링 import EventPractice from './EventPractice'; const App = () => { return <EventPractice />; }; export default App;onchange 이벤트는 input 태그의 포커스를 벗어났을때 (즉, 입력이 끝났을때) 발생하는 이벤트
import { Component } from 'react'; class EventPractice extends Component { render() { return ( <div> <h1>이벤트실습</h1> <input type='text' name='message' placeholder='아무거나입력' onChange={ (e) => { console.log(e.target.value); } } /> </div> ); } } export default EventPractice;
'JavaScript > React' 카테고리의 다른 글
리액트 디자인 패턴(React Design Pattern) (0) 2023.02.16 State (1) 2022.12.23 프라퍼티(Props) (0) 2022.12.17 컴포넌트(component) (0) 2022.12.16 JSX (0) 2022.12.15