이벤트

이벤트란?

사용자가 웹 브라우저와 상호 작용을 하는 것을 이벤트라고 한다. 마우스 클릭, 마우스 아웃, form 입력 등이 있다. 여러 이벤트에 따라 리액트는 해당 이벤트를 받아서 처리할 수 있다. 

 

이벤트 사용 주의사항

• 이벤트 명은 카멜 표기로 작성 ex) onclick -> onClick
• 이벤트에 실행할 자바스크립트 코드가 아닌 함수 형태로 전달
• DOM 요소에만 이벤트 설정 가능 ex) div, button, inpu등 , 즉 직접 제작한 컴포넌트에는 사용이 불가능

 

이벤트 종류

리액트에서 지원하는 이벤트 종류이다. 이외에도 다양한 이벤트가 있으므로 공식 문서를 참고해서 각자 필요한 이벤트를 사용하면 된다.

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

....

 

이벤트 사용하기

새로운 컴포넌트를 생성한다. 해당 컴포넌트의 상태 값 name, msg를 useState로 만들고, onChageName, onChageMsg에 각각의 세터 함수를 대입한다. 

사용자가 버튼을 클릭하면 handleOnClick 함수를 만들어주고, 해당 내용에 name과 msg를 경고창으로 띄워준다.

그리고 엔터가 눌렸을 경우 위에 정의한 handleOnClick함수가 호출된다. 

input에 아까 정의한 세터 함수 변수를 지정하고, 버튼에는 키 프레스 함수를 대입해준다.

import {useState} from "react";

const EventTest = () => {
    const [name, setName] = useState('');
    const [msg, setMsg] = useState('');
    const onChangeName = e => setName(e.target.value);
    const onChangeMsg = e => setMsg(e.target.value);

    const handleOnClick = () => {
        alert(`name: ${name} msg: ${msg}`);
        setName('');
        setMsg('');
    };

    const handleKeyPress = e => {
        if (e.key === 'Enter') {
            handleOnClick();
        }
    }

    return (
        <>
            <h1>이벤트</h1>
            <input
                type="text"
                name={name}
                placeholder="name"
                value={name}
                onChange={onChangeName}
            />
            <input
                type="text"
                name={msg}
                placeholder="msg"
                value={msg}
                onChange={onChangeMsg}
            />
            <button onClick={handleOnClick}>확인</button>
        </>
    )
}
export default EventTest;

import './App.css';
import EventTest from "./components/EventTest";

function App() {
  return (
    <>
        <EventTest/>
    </>
  );
}

export default App;