[7주차] React에서의 이벤트

3월 4일 자 학습 내용 정리입니다.

 

 

✅ 이벤트

이벤트(Event)란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미한다.
사용자의 행동에 의해 발생할 수도 있고 개발자가 의도한 로직에 의해 발생할 수도 있다.

Element가 로드되었을 때, 클릭되었을 때, Element 위로 마우스를 올렸을 때, 키보드 입력이 들어왔을 때 등 다양한 이벤트가 존재한다.

이러한 이벤트는 이벤트 핸들러 함수를 통해 이벤트에 관련된 로직이 처리되고 그 결과를 사용자에게 알릴 수 있다.

 

 

✅ React에서의 이벤트

React에서 이벤트를 처리하는 방법은 두 가지가 있다.

 

첫째로 별도의 핸들링 함수를 선언하고 Element에 넘겨주는 방법이 있다.

 

import React from "react";

function App() {
  const onClickhandler = () => {
    alert("안녕하세요!");
  };
  return (
    <>
      <button onClick={onClickhandler}>Greeting</button>
    </>
  );
}

export default App;

 

위 코드에서는 onClickHandler라는 핸들링 함수를 App 컴포넌트 안에 선언하고 button element의 onClick 이벤트가 발생하면 onClickHandler를 호출하도록 했다.

 

둘째로 이벤트를 할당하는 부분에서 익명 함수를 작성하는 방법이 있다.

 

import React from "react";

function App() {
  return (
    <>
      <button onClick={() => alert("안녕하세요!")}>Greeting</button>
    </>
  );
}

export default App;

 

위 코드에서는 별도의 핸들링 함수를 선언하지 않고 onClick 이벤트 발생 시 이벤트를 할당하는 부분에서 익명 함수로 바로 이벤트 처리를 하고 있다.

 

 

✅ 이벤트 객체

DOM Element의 경우 핸들링 함수에 이벤트 객체를 매개변수로 전달한다.

 

import React from "react";

function App() {
  const onChangeHandler = (event) => {
    console.log(event.target.value);
  };
  return (
    <>
      <input onChange={onChangeHandler} />
    </>
  );
}

export default App;

 

위 코드에서 onChangeHandler의 매개변수로 전해진 event가 이벤트 객체이다.

event.target.value로 현재 input에서 작성된 내용을 가져올 수 있다.

이처럼 이벤트 핸들링 함수에서는 이벤트 객체를 통해 이벤트 발생 원인, 이벤트가 일어난 target element에 대한 정보 등을 얻을 수 있다.

이벤트의 형태와 이벤트가 일어난 target element의 종류에 따라 전달되는 이벤트 객체의 내용이 달라진다.

onChange 이벤트가 발생했을 때 이벤트 객체를 살펴보면 다음과 같다.

 

 

이를 통해 현재 발생한 이벤트의 타입이 change이고 HTML Input Element에서 해당 이벤트가 발생했음을 알 수 있다.

 

 

✅ DOM 이벤트 종류

DOM 이벤트 종류는 다양하지만 자주 사용되는 이벤트는 다음과 같다.

• onClick : Element 클릭
• onChange : Element 내용 변경(input의 텍스트 변경, 파일 선택 등)
• onKeyDown, onKeyUp, onKeyPress : 키보드 입력
• onDoubleClick : Element 더블 클릭
• onFoucs : Element가 Focus 되었을 때
• onBlur : Element가 Focus를 잃었을 때
• onSubmit : Form Element에서 Submit했을 때

 

 

✅ 컴포넌트간 이벤트 전달하기

사용자가 입력한 정보를 현재 컴포넌트가 아닌 부모 컴포넌트에서 활용해야 하는 경우 이벤트를 Props로 전달하여 처리할 수 있다.

 

--- Name.js(자식) ---
import React from 'react';

function Name({ onChangeHandler }) {
  return <input onChange={onChangeHandler}></input>;
}

export default Name;

--- App.js(부모) ---
import React, { useState } from 'react';
import Name from './Name';

function App() {
  const [name, setName] = useState('');
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <Name onChangeHandler={(e) => setName(e.target.value)} />
    </div>
  );
}

export default App;

 

위 코드에서는 자식 컴포넌트인 Name에서 이름을 입력받고 이 값을 부모 컴포넌트인 App이 name이라는 State에 담아 사용하고 있다. 

App에서는 onChange 이벤트가 발생할 때 사용할 onChangeHandler라는 이벤트 핸들링 함수를 Props로 Name에 전달해준다.

그리고 Name에서 onChange 이벤트가 발생했을 때 부모로부터 받은 onChangeHandler를 통해 이벤트를 처리한다.

이렇게 되면 Name에서 입력받은 input의 value를 App에서도 접근할 수 있게 되어 name state의 값을 해당 값으로 바꿀 수 있다.

 

 

✅ 이벤트 명명법

이벤트 이름은 on+동사 또는 on+명사+동사의 형태로 작성하는 것이 일반적이다.
ex. onClick, onButtonClick

핸들링 함수의 경우에도 마찬가지로 handle+동사 또는 handle+명사+동사의 형태로 작성하며 handle 대신 이벤트 명과 동일한 on을 앞에 붙여도 된다.

ex. handleClick, handleButtonClick, onButtonClick

나는 주로 이벤트 이름은 on+명사+동사를 쓰고 핸들링 함수는 이벤트명+handler를 사용한다.
ex. onBtnClick, onClickHandler