이벤트(Event)

JavaScript/React

이벤트(Event)

yunajoe 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;