이벤트

정의

사용자가 웹 브라우저에서 DOM 요소들과 상호작용 하는 것을 말한다.

예) 마우스 커서를 올렸을 때 onmouseover 이벤트를 실행한다.

 

사용 시 주의사항

   1. 이벤트 이름은 카멜 표기법(camelCase)으로 작성한다.

 

    ex)HTML의 onclick 은 onClick으로 작성

 

   2.이벤트에 실행할 문자열을 전달하는 것이 아니라 함수로 전달한다.

 

   ex)onClick = "함수 이름()" 이 아니라 onClick = {함수이름}으로 작성

   HTML에서 이벤트를 설정할 때는 큰 따옴표 안에 코드를 넣었지만, 리액트에서는 함수 형태의 객체를 전달한다.

 

   3. DOM 요소에만 이벤트를 설정할 수 있다.

 

   ex) <MyComponent onClick={doSomething}/>이 아니라 

        <div onClick={this.props.onClick}> ... </div> 와 같은 형태로 작성해야 한다.

        컴포넌트에 자체적으로 이벤트를 설정하는 것이 아니라 전달받은 props를 컴포넌트 내부의 DOM 이벤트로 설정          한다.

 

 

이벤트 종류

• Clipboard
• Composition
• Keyboard
• Focus
• Form
• Mouse
• Selection
• Touch
• UI
• Wheel
• Media
• Image
• Animation
• Transition

 

이벤트 적용해보기(onClick)

import logo from './logo.svg';
import React from "react";
import './App.css';
import Example from "./Example";


function App() {
  return (
    <div>
      <Example />
    </div>
  );
}


export default App;

 

App.js에 위와 같은 App 함수를 작성한다.

 

 

Example.js

Example.js 에는 위와 같은 컴포넌트를 작성한다.

 

실행화면

아직 이 코드로는 화면에 아무것도 나오지 않는다.

 

 

state를 이용해서 버튼을 클릭하면 상태가 변하는 코드를 작성해볼 것이다.

 

Example.js

Example.js에 constructor를 작성해서 state값을 초기화해준다.

 

 

Example.js

 

render()부분을 수정해서 버튼을 만들어주었다.

 

실행화면

여기까지 코드를 작성하면 위와 같은 결과를 볼 수 있다.

 

 

Example.js

Example.js에 위와 같은 함수를 작성해서 state를 변경시키도록 한다.

다만 setState 사용 시, text에 직접 접근해서 값을 변경할 수 없다. 

예를 들어 this.setState.text = "변경 후"와 같은 코드를 작성할 수 없다.

 

 

Example.js

render()의 코드를 수정해서 버튼을 클릭하면 state가 변하도록 한다.

 

 

 

클릭을 누르면 '변경 전'에서 '변경 후'로 화면의 글이 바뀐다.

 

 

 

참조

• 개발하는 펭군이
• 김민준, 리액트를 다루는 기술[개정판], 길벗
• 코드치고 무게치고
• React 공식홈