이벤트(Event) - React 배우기

1. 이벤트(Event)

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

• 이벤트를 사용할 때는 on이벤트명={이벤트 핸들러} 형식으로 사용한다.
• 이벤트 핸들러는 이벤트가 발생했을 때 실행되는 함수로 함수의 형태로 작성해야 한다.
• 이벤트 핸들러에 ()를 붙이지 않는 이유는 이벤트를 등록할 때 함수를 호출하는 것이 아니라 함수를 등록하기 때문이다.

이벤트 종류

• React 공식문서에서 확인 가능하다.

이벤트 객체

• 이벤트 핸들러의 첫 번째 파라미터로 이벤트 객체를 받을 수 있다.
• 이벤트 객체에는 이벤트가 발생한 DOM 요소에 대한 정보와 이벤트에 대한 정보가 들어있다.

import React from 'react';

function App() {
    const handleClick = (event) => {
        console.log(event); // 이벤트 객체 (MouseEvent)
        console.log(event.target); // 이벤트가 발생한 DOM 요소 (button)
        console.log(event.type); // 이벤트 타입 (click)
    };

    return (
        // onClick 이벤트 핸들러에 이벤트 객체를 전달받을 수 있다.
        <div className="App">
            <button onClick={handleClick}>버튼</button>
        </div>
    );
}

export default App;

이벤트 핸들러 등록

• 이벤트 핸들러를 등록할 때는 함수를 호출하는 것이 아니라 함수를 등록하는 것이다.

import React from 'react';

function App() {
    const handleClick = () => {
        alert('버튼 클릭');
    };

    return (
        // onClick 이벤트 핸들러에 ()를 붙이지 않는 이유는
        // 이벤트를 등록할 때 함수를 호출하는 것이 아니라 함수를 등록하기 때문이다.
        <div className="App">
            <button onClick={handleClick}>버튼</button>
        </div>
    );
}

export default App;

• 이벤트 핸들러에 전달하는 함수에 ()를 붙이면 이벤트 핸들러가 등록되는 것이 아니라 함수가 호출되면서 함수의 반환값이 이벤트 핸들러로 등록된다.

import React from 'react';

function App() {
    const handleClick = () => {
        alert('버튼 클릭');
    };

    return (
        // onClick 이벤트 핸들러에 ()를 붙이면 이벤트 핸들러가 등록되는 것이 아니라
        // 함수가 호출되면서 함수의 반환값이 이벤트 핸들러로 등록된다.
        // 따라서 아래 코드는 버튼을 클릭하면 즉시 alert 창이 뜬다.
        <div className="App">
            <button onClick={handleClick()}>버튼</button>
        </div>
    );
}

export default App;

이벤트 기본 예제

import React from 'react';

function App() {
    // 버튼 클릭시 Alert 창 띄우기
    const handleClick = () => {
        alert('버튼 클릭');
    };

    // input 태그에 텍스트 입력시 .text 요소에 텍스트 출력하기
    // event = onChange 이벤트가 발생
    const handleChange = (event) => {
        // event.target = 이벤트가 발생한 요소
        document.querySelector('.text').innerText = event.target.value;
    };

    // 마우스를 올렸을 때 this 요소의 배경색을 빨간색으로 변경하기
    const handleMouseOver = (event) => {
        event.target.style.backgroundColor = 'red';
    };

    return (
        // 아래 코드는 JSX 문법으로 함수를 호출할 때 ()를 붙이지 않는 이유는
        // 이벤트를 등록할 때 함수를 호출하는 것이 아니라 함수를 등록하기 때문이다.
        <div className="App">
            <h1>클릭 이벤트</h1>
            <button onClick={handleClick}>버튼</button>

            <h1>입력 이벤트</h1>
            <input type="text" onChange={handleChange} />
            <strong className="text"></strong>

            <h1>마우스오버 이벤트</h1>
            <div className="change-red" onMouseOver={handleMouseOver}>
                마우스를 올려주세요.
            </div>
        </div>
    );
}

export default App;

• 위 코드에 State(상태)를 사용하여 코드를 개선해보자.

// useState를 불러온다.
import React, { useState } from 'react';

function App() {
    // 클릭 이벤트 처리와 상태 관리를 위한 변수
    // count = 상태, setCount = 상태를 변경하는 함수
    // useState(0) = count의 초기값을 0으로 설정
    const [count, setCount] = useState(0);

    // 버튼 클릭 시 count 상태 업데이트
    const handleButtonClick = () => {
        setCount(count + 1); // count 상태를 1 증가
    };

    // 입력 이벤트 처리를 위한 변수
    // inputValue = 상태, setInputValue = 상태를 변경하는 함수
    // useState('') = inputValue의 초기값을 ''으로 설정
    const [inputValue, setInputValue] = useState('');

    // 입력 필드의 값이 변경될 때 inputValue 상태 업데이트
    const handleInputChange = (event) => {
        // event.target.value = 입력 필드의 값
        setInputValue(event.target.value);
    };

    return (
        // 삼항 연산자 : 조건 ? 참일 때 반환값 : 거짓일 때 반환값
        <div className="App">
            <h1>클릭 이벤트 예제</h1>
            <button onClick={handleButtonClick}>클릭하여 증가: {count}</button>

            <h1>조건부 렌더링 예제</h1>
            {count >= 5 ? <p>count가 5 이상입니다.</p> : <p>count가 5 미만입니다.</p>}

            <hr />

            <h1>입력 이벤트 예제</h1>
            <input type="text" placeholder="입력하세요" value={inputValue} onChange={handleInputChange} />
            <p>입력한 값: {inputValue}</p>
        </div>
    );
}

export default App;