5. React (Event)

이벤트는 사용자가 웹 브라우저에서 HTML 요소에 접근, 사용에 대한 사건의 발생을 의미한다

(또는 사용자가 아닌, 개발자의 의도에 따른 로직에 의해 발생될 수도 있다)

어떠한 방식이던 발생된 이벤트는 자바스크립트와 대응시킬 수 있다

 

HTML 요소 로딩, 사용자의 클릭(또는 더블클릭), 마우스 오버, 입력 등의 다양한 이벤트가 존재

이때, 이벤트 핸들러 함수로 다양한 로직을 처리하고 결과를 사용자에게 출력할 수 있다

(React 뿐만 아니라 다른 언어에서도 이벤트 핸들러 함수는 다양한 방식으로 활용되고 있다)

 

 

[이벤트 핸들링 방법]

React에서 이벤트 핸들링은 대표적으로 아래의 두 가지 방법이 존재한다

 

1. 핸들링 함수 선언

별도의 함수 선언 후 요소에 넘겨주는 방법

 

2. 익명 함수로 처리

이벤트 할당 부분에서 함수의 이름 없이 직접 작성하는 방법

 

 

[이벤트 객체]

- DOM Element의 경우 핸들링 함수에 event object를 매개변수로 전달

- event object를 이용해서 이벤트 발생 원인,

  이벤트가 일어난 Element에 대한 정보를 얻을 수 있다

- 이벤트 형태(Click, key press)와 DOM 종류(button, form, input 등)에 따라

  전달되는 event object의 내용도 다르니 유의

 

참고 : Event - Web API | MDN (mozilla.org)

 

---

Object key 동적 할당

하나의 핸들링 함수를 여러 input element에서 사용한 값을 입력받는 방법

하나의 handleChange( )에 사용자의 입력을 받는다

이때, 사용자의 입력 값은 미리 정의된 딕셔너리 key의 value 값에 해당하게 된다

(해당 코드에서는 person 안에 할당 되어질 데이터를 의미)

 

const handleChange = (event) => {
  const { name, value } = event.target;

핸들러 함수를 통해 input의 입력값을 매개 변수로 받고, 새로운 오브젝트를 생성

새롭게 선언된 name, value는 input이 입력될 때 마다 새로운 값을 받아오게 된다

(name, value 각각의 Attribute에 할당 된 값들이 들어오는 것)

 

하지만 React는 State로 인한 상자 내부의 데이터는 감지할 수 없음을 살펴보았었다

(해당 내용을 모르겠거나, 이해가 가지 않는 다면 State를 다시 보고 오면 된다)

그렇기 때문에 새로운 객체(newPerson)를 만들어서 그 안에 기존 데이터에서 변경된 키 값을 할당

 

const newUser = { ...user };
newUser[name] = value;
setUser(newUser);

newUser : React의 재렌더링을 돕기 위한 새로운 객체

{ ...user } : 기존 데이터들이 저장되고 있던 user 딕셔너리를 복사해서 newUser에 할당

 

newUser[name] = value : 새로만든 객체에 key의 value값을 입력받은 데이터로 변경

 

 

위 과정을 통해 입력 값이 변경될 때 마다 동적으로 Object의 key 값을 반영할 수 있다

 

 

실행시 아래와 같이 alert을 통해 Obejct의 key값이 입력 값에 따라 동적으로 변하는 것을 확인

---

컴포넌트 안에서의 이벤트 처리

사용자의 입력 정보를 현재 컴포넌트가 아닌 부모 컴포넌트에서 활용해야 할 때가 있다

이때, 이벤트를 Props로 전달하여 처리하는 것이 가능하다

App( )의 onChange 함수를 MyForm의 props로 전달

 

 

[Custom]

위 특징을 활용하면 DOM 이벤트 활용 뿐 아닌 자신만의 이벤트도 만들 수 있다

커스텀 이벤트의 경우 명칭을 자유롭게 설정할 수 있다

(하지만 가급적이면 일반적으로 많이 사용하고 있는 형태로 사용하는 것이 좋다)

 

예로 이벤트 함수의 경우 "on" + 동사(+명사)의 형태로,

핸들러 함수의 경우 "handle" + 동사(+명사)의 형태로 작성하는 것이 좋다

 

 

[이벤트 전달]

const MyForm = ({onChange}) => { }

부모 컴포넌트인 App( )에서 만든 onChange함수를 Props로 전달받는 과정

컴포넌트는 <input> element에 Props에서 전달받은 onChange 함수를 전달하게 된다

(사용자가 입력한 값을 실시간으로 반환하게 되는 것)

 

 

<h1>의 내용이 사용자의 입력 정보를 실시간으로 재렌더링 후 출력해주는 영역

 

데이터의 흐름을 생각해보면 App( )의 onChange 함수를 Props로 갖고 있는 상태로

MyForm에서 <input>입력을 받고 해당 데이터가 계속해서 App( )으로 리턴 된다

setUsername(e.target.value);

그렇게 리턴되는 데이터를 setUsername 가 확인하여 변경점을 파악한다

setUsername이 파악해준 변경점은 실시간으로 useState 내의 정보를 업데이트하여 출력되게 된다

 

위 결과를 보며 다시 한 번 코드를 읽어보면 어느 정도 흐름을 알 수 있을 것 같다