LIME

공부하고 기록하는 블로그

2 분 소요

이벤트(Event)란?

이벤트는 사용자가 웹 브라우저에서 DOM요소들과 상호작용하는 것을 말합니다. (input 요소에 타이핑을 하거나, 버튼을 클릭하는 등..)

  • 문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다. -> 문서 객체란 원본 html 문서의 <html>, <body>, <div> 등 자바스크립트를 이용하여 수정 가능한 객체를 말하며, DOM은 자바스크립트를 이용해 조작할 수 있는 객체를 사용하여 원본 html 문서를 해석하는 방법을 말합니다.

React 이벤트 핸들링 주의사항

  1. React에서 이벤트 이름은 카멜케이스(camelCase)로 표기합니다. 예를 들어 HTML에서는 클릭 이벤트를 onclick 으로 작성하였지만 리액트에서는 onClick으로 작성해야 합니다.
  2. HTML에서는 실행할 코드를 문자열로 전달했다면 리액트는 JSX를 사용하여 함수 형태의 값을 전달해야 합니다. 화살표 함수 문법을 사용해도 되고 외부에서 미리 함수를 만들어서 전달해도 됩니다.
  3. 반드시 DOM요소에서만 이벤트 설정이 가능합니다.

이벤트 핸들링 해보기

예제를 만들면서 이벤트 핸들링을 해보도록 하겠습니다.

먼저 src 폴더에 EventPractices.js라는 파일을 만들고 App.js에서 불러오도록 하겠습니다.
EventPractives.js

1
2
3
4
5
6
7
8
9

 const EventPractices = () => {
   return (
     <div>
       <h1>Event</h1>
     </div>
   );
 };
 ​
 export default EventPractices;

App.js

1
2
3
4
5
6
7
8
9
10
11

 import './App.css';
 import EventPractices from './EventPractices';
 ​
 ​
 function App() {
   
   return <EventPractices />;
 ​
 };
 ​
 export default App;

onChange 이벤트를 핸들링하는 예제를 만들어보도록 하겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

const EventPractices = () => {
  return (
    <div>
      <h1>이벤트</h1>
      <input
        type="text"
        onChange={(e) => {
          console.log(e.target.value);
        }}
      />
    </div>
  );
};

export default EventPractices;

1
input 박스에 위와 같이 입력하면

2
입력할 때 마다 값이 콘솔에 기록됩니다.

만약 input이 여러개라면 아래처럼 하면 됩니다.

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

import { useState } from "react";

const EventPractices = () => {
  const [value, setValue] = useState("");
  const [value2, setValue2] = useState("");

  const handleChange = (e) => {
    console.log("첫 번째 input : " + e.target.value);
    setValue(e.target.value);
  };

  const handleChange2 = (e) => {
    console.log("두 번째 input : " + e.target.value);
    setValue2(e.target.value);
  };

  return (
    <div>
      <h1>이벤트</h1>
      <>
        <input onChange={handleChange} type="text" value={value} />

        <input onChange={handleChange2} type="text" value={value2} />
      </>
    </div>
  );
};

export default EventPractices;

3 4

Today I Learned

오늘은 리액트 이벤트 핸들링을 공부했습니다. 문법이 살짝 다르긴 하지만 기존 바닐라JS나 JQuery등에서 이벤트를 다루던 방식과 유사하기 때문에 금방 적응하고 쉽게 활용할 수 있게 되었습니다.

참고 사이트

https://ko.reactjs.org/docs/handling-events.html
참고 서적 : 리액트를 다루는 기술(김민준 저자)

🔔포스팅 공지
개인 공부 기록용 블로그 입니다.
잘못된 부분이 있을 시 메일이나 댓글로 지적해주시면 감사드리겠습니다 :)

댓글남기기

참고