이벤트(Event) - React 배우기

1. 이벤트(Event)

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

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

이벤트 종류

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

1. 마우스 이벤트

   • onClick : 마우스를 클릭했을 때 발생
   • onDoubleClick : 마우스를 더블 클릭했을 때 발생
   • onMouseOver : 마우스를 요소 위로 올렸을 때 발생
   • onMouseOut : 마우스를 요소 밖으로 옮겼을 때 발생
   • onMouseEnter : 마우스가 요소 안으로 들어왔을 때 발생
   • onMouseLeave : 마우스가 요소 밖으로 나갔을 때 발생
   • onMouseDown : 마우스 버튼을 눌렀을 때 발생
   • onMouseUp : 마우스 버튼을 뗐을 때 발생
   • onMouseMove : 마우스를 움직였을 때 발생
   • onContextMenu : 마우스 오른쪽 버튼을 클릭했을 때 발생

function MouseEvents() {
  return (
    <div>
      {/* 클릭 이벤트 */}
      <button
        onClick={e => console.log('클릭!')}
        onDoubleClick={e => console.log('더블 클릭!')}
      >
        클릭해보세요
      </button>

      {/* 마우스 오버/아웃 */}
      <div
        onMouseEnter={e => console.log('마우스 진입')}
        onMouseLeave={e => console.log('마우스 나감')}
      >
        마우스를 올려보세요
      </div>

      {/* 마우스 이동 */}
      <div
        onMouseMove={e => {
          console.log(`X: ${e.clientX}, Y: ${e.clientY}`);
        }}
      >
        마우스를 움직여보세요
      </div>
    </div>
  );
}

2. 키보드 이벤트

   • onKeyDown : 키보드의 키를 눌렀을 때 발생
   • onKeyPress : 키보드의 키를 눌렀을 때 발생
   • onKeyUp : 키보드의 키를 뗐을 때 발생

function KeyboardEvents() {
  return (
    <input
      type='text'
      onKeyDown={e => console.log('키 다운:', e.key)}
      onKeyUp={e => console.log('키 업:', e.key)}
      onKeyPress={e => console.log('키 프레스:', e.key)}
      placeholder='키보드를 눌러보세요'
    />
  );
}

3. 폼 이벤트

   • onChange : input, textarea, select 요소의 값이 변경되었을 때 발생
   • onSubmit : 폼을 제출했을 때 발생
   • onReset : 폼을 초기화했을 때 발생

function FormEvents() {
  const handleSubmit = e => {
    e.preventDefault(); // 기본 동작 방지
    console.log('폼 제출!');
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 입력 변경 */}
      <input
        onChange={e => console.log('값 변경:', e.target.value)}
        onFocus={e => console.log('포커스!')}
        onBlur={e => console.log('블러!')}
      />

      {/* 체크박스 */}
      <input
        type='checkbox'
        onChange={e => console.log('체크:', e.target.checked)}
      />

      {/* 선택 */}
      <select onChange={e => console.log('선택:', e.target.value)}>
        <option value='1'>옵션 1</option>
        <option value='2'>옵션 2</option>
      </select>

      <button type='submit'>제출</button>
    </form>
  );
}

4. 기타 이벤트

   • onScroll : 요소를 스크롤할 때 발생
   • onWheel : 마우스 휠을 움직일 때 발생
   • onCopy : 요소를 복사할 때 발생
   • onCut : 요소를 잘라낼 때 발생
   • onPaste : 요소에 붙여넣을 때 발생
   • onDrag : 요소를 드래그할 때 발생
   • onDragStart : 요소를 드래그하기 시작할 때 발생
   • onDragEnd : 요소를 드래그하기 끝낼 때 발생
   • onDragEnter : 드래그한 요소를 들어갈 때 발생
   • onDragLeave : 드래그한 요소를 나갈 때 발생
   • onDragOver : 드래그한 요소 위로 올라갈 때 발생
   • onDrop : 드래그한 요소를 놓을 때 발생

function OtherEvents() {
  return (
    <div
      onScroll={e => console.log('스크롤')}
      onWheel={e => console.log('휠')}
      onCopy={e => console.log('복사')}
      onCut={e => console.log('잘라내기')}
      onPaste={e => console.log('붙여넣기')}
      onDrag={e => console.log('드래그')}
      onDragStart={e => console.log('드래그 시작')}
      onDragEnd={e => console.log('드래그 끝')}
      onDragEnter={e => console.log('드래그 진입')}
      onDragLeave={e => console.log('드래그 나감')}
      onDragOver={e => console.log('드래그 위')}
      onDrop={e => console.log('드래그 놓기')}
    >
      드래그해보세요
    </div>
  );
}

이벤트 객체

• 이벤트 핸들러의 첫 번째 파라미터로 이벤트 객체를 받을 수 있다.
• 이벤트 객체에는 이벤트가 발생한 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;