Notice
Recent Posts
Recent Comments
Link
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

거니의 velog

(11) 이벤트 핸들링 1 본문

React_리액트 시작

(11) 이벤트 핸들링 1

Unlimited00 2023. 11. 30. 08:41

* 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(event)라고 한다. 예를 들어 버튼에 마우스 커서를 올렸을 때는 onmouseover 이벤트를 실행하고, 클릭했을 때는 onclick 이벤트를 실행한다. form 요소는 값이 바뀔 때 onchange 이벤트를 실행한다. HTML을 사용한 적이 있다면 매우 익숙할 것이다. HTML에서 DOM 요소에 이벤트를 설정하는 방법을 한번 살펴보자.

* 다음 코드를 HTML 파일로 저장하여(프로젝트 디렉터리 외부에 저장하자) 웹 브라우저로 열어보거나, JSBin에서 코드를 입력하여 테스트해 보자. 여기서는 JSBin을 사용해 보자.

https://jsbin.com/?html,output

 

JS Bin

Sample of the bin:

jsbin.com

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <button onclick="alert('executed')">
    Click Me
  </button>
</body>
</html>

* 코드를 입력하고 HTML이 웹 브라우저에서 렌더링되면 버튼이 나타날 것이다. Click Me 버튼을 눌러보자.

* 버튼을 누르면 alert 함수를 사용하여 메시지 박스를 띄우도록 했다. HTML에서는 이처럼 이벤트를 실행하면  "  " 사이에 있는 자바스크립트를 실행하도록 코드를 작성한다. 리액트에서 이벤트를 다룰 때는 이와 비슷하면서도 좀 다르다. 한번 알아보도록 하자.

1. 리액트의 이벤트 시스템

* 리액트의 이벤트 시스템은 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 꽤 비슷하다. 이전에 작성한 버튼 코드를 다시 한 번 살펴보자.

import React, { useState } from 'react';

const Say = () => {
  const [message, setMessage] = useState('');
  const onClickEnter = () => setMessage('안녕하세요!');
  const onClickLeave = () => setMessage('안녕히 가세요!');

  const [color, setColor] = useState('black');

  return (
    <div>
      <button onClick={onClickEnter}>입장</button>
      <button onClick={onClickLeave}>퇴장</button>
      <h1 style={{ color }}>{message}</h1>
      <button style={{ color: 'red' }} onClick={() => setColor('red')}>
        빨간색
      </button>
      <button style={{ color: 'green' }} onClick={() => setColor('green')}>
        초록색
      </button>
      <button style={{ color: 'blue' }} onClick={() => setColor('blue')}>
        파란색
      </button>
    </div>
  );
};

export default Say;

* 사용법은 일반 HTML에서 이벤트를 작성하는 것과 비슷한데, 주의해야 할 몇 가지 사항이 있다.

(1) 이벤트를 사용할 때 주의 사항

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

- 예를 들어 HTML의 onclick은 리액트에서 onClick으로 작성해야 한다. 또 onkeyup은 onKeyUp으로 작성한다.

2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다.

- HTML에서 이벤트를 설정할 때는 큰따옴표 안에 실행할 코드를 넣었지만, 리액트에서는 함수 형태의 객체를 전달한다. 앞서 버튼 예제에서도 화살표 함수 문법으로 함수를 만들어 전달했다. 이렇게 바로 만들어서 전달해도 되고, 렌더링 부분 외부에 미리 만들어서 전달해도 된다. 이것은 추후 직접 실습해 보자.

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

- 즉, div, button, input, form, span 등의 DOM 요소에는 이벤트를 설정할 수 있지만, 우리가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다.

- 예를 들어 다음과 같이 MyComponent에 onClick 값을 설정한다면 MyComponent를 클릭할 때 doSomething 함수를 실행하는 것이 아니라, 그냥 이름이 onClick인 props를 MyComponent에게 전달해 줄 뿐이다.

<MyComponent onClick={doSomething} />

* 따라서 컴포넌트에 자체적으로 이벤트를 설정할 수는 없다. 하지만 전달받은 props를 컴포넌트 내부에서 DOM 이벤트로 설정할 수는 있다.

<div onClick={this.props.onClick}>
	{ /* (...) */ }
</div>

(2) 이벤트 종류

* 리액트에서 지원하는 이벤트 종류는 다음과 같다.

- Clipboard

- Composition

- Keyboard

- Focus

- Mouse

- Selection

- Touch

- UI

- Wheel

- Media

- Image

- Animation

- Transition

* 이 외에도 종류가 많지만 여기서는 전부 다루지는 않고, 흔히 사용하는 간단한 이벤트만 이번에 다룰 것이다. 나머지 이벤트는 리액트 메뉴얼을 참고하기 바란다.

https://legacy.reactjs.org/docs/handling-events.html

 

Handling Events – React

A JavaScript library for building user interfaces

legacy.reactjs.org

저작자표시

'React_리액트 시작' 카테고리의 다른 글

(13) ref:DOM 에 이름 달기 1  (0) 2023.11.30
(12) 이벤트 핸들링 2  (0) 2023.11.30
(10) 컴포넌트 3  (0) 2023.11.29
(9) 컴포넌트 2  (0) 2023.11.29
(8) 컴포넌트 1  (0) 2023.11.29
'React_리액트 시작' Related Articles more