React 06 - Event Handling

26 Dec 2023

이 글을 읽는 사람들은 대게는 개발에 대해 공부하고 있는 사람들일거고 HTML에서 이벤트를 사용해보지 않은 사람들은 없을 것이다. React에서 이벤트는 작동될까?

이벤트에 대해 알아보기 이전에 몇가지 규칙을 정하고 가자.

1. 이벤트 이름은 카멜 케이스(Caeml Case)로 사용한다.
2. 이벤트에 실행할 때에는 함수 형태의 객체를 넘기자.
3. Component 단위가 아닌 Element 단위에서만 이벤트를 설정하자

위 세가지 규칙을 외우고 진행해보자. 리액트에서 제공하는 이벤트는 뭐가 있을까?

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

등이 있는데 이벤트에 대해 세세한 내용은 따로 검색을 해서 찾아보자 ^^! (우리는 이벤트를 어떻게 사용하는지만 테스트 해볼 것이다.)

기존에 사용했던 Buttonomp.js를 가지고 와보자.

import { useState } from "react";
const ButtonComp = () => {
    const [message, setMessage] = useState('');
    const onClick1 = () => setMessage('1번 버튼 클릭');
    const onClick2 = () => setMessage('2번 버튼 클릭');
    return (
        <>
            <button onClick={onClick1}>버튼1</button>
            <button onClick={onClick2}>버튼2</button>
            <h1>{message}</h1>
        </>
    );
};

export default ButtonComp;

위 예제에서 버튼을 클릭했을 때 message가 바뀐다. message가 바뀌는 것을 감지하고 싶을때는 리액트에서 어떻게 할까?

import { useState } from "react";
const ButtonComp = () => {
    return (
        <>
            <button onClick={onClick1}>버튼1</button>
            <button onClick={onClick2}>버튼2</button>
            <input
                type="text"
                name="message"
                placeholder="입력해보자"
                onChange={
                    (e) => {
                        console.log(e)
                    }
                }/>
        </>
    );
};

export default ButtonComp;

Event Handling 해보자