[React] 이벤트처리

1. 이벤트 소개

이벤트란?

이벤트란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미합니다.

유저의 행동에 의해 발생할 수도 있으며 개발자가 의도한 로직에 의해 발생할 수도 있습니다.

이렇게 발생된 이벤트를 자바스크립트를 이용해 대응할 수 있습니다.

Element가 로딩되었을 때, 사용자가 Element 를 클릭했을 때, 마우스를 올렸을 때, 더블 클릭했을 때, 키보드 입력을 주었을 때 등 다양한 이벤트가 존재합니다.

이벤트 핸들러 함수에서는 다양한 로직을 처리하고 그 결과를 사용자에 출력하여 알릴 수도 있습니다.

 

-이벤트 처리 (핸들링) 방법

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

별도의 핸들링 함수를 선언하고 Element에 넘겨주는 방법과 이벤트를 할당하는 부분에서 익명 함수를 작성하는 방법으로 나뉩니다.

 

-이벤트 객체

 

 

 

-DOM Element 의 경우 핸들링 함수에 이벤트 object 를 매개변수로 전달합니다.

 

-이벤트 object 를 이용하여 이벤트 발생 원인, 이벤트가 일어난 Element 에 대한 정보를 얻을 수 있습니다.

 

-이벤트 형태 (클릭, 키 입력 등) 와 DOM 종류 (button, form, input 등) 에 따라 전달되는 이벤트 object의 내용도 다르니 유의하세요.

 

 

-많이 쓰이는 DOM 이벤트

onClick: Element 를 클릭했을 때

onChange: Element 의 내용이 변경되었을 때 (input 의 텍스트를 변경, 파일 선택 등)

onKeyDown, onKeyUp, onKeyPress: 키보드 입력이 일어났을 때

onDoubleClick: Element 를 더블 클릭했을 때

onFocus: Element 에 Focus 되었을 때

onBlur: Element 가 Focus 를 잃었을 때

onSubmit: Form Element 에서 Submit 했을 때

 

2. 컴포넌트 내 이벤트 처리

-DOM 버튼 클릭

 

 

 

 

 

DOM element의 클릭 이벤트를 전달받아 처리하는 간단한 예제입니다.

 

 

 

 

 

 

 

-DOM Input 값을 State에 저장하기

 

 

 

 

 



 

 

event object의 target은 이벤트의 원인이 되는 Element 를 가리킵니다. 

 

현재 event의 target은 input element 이므로 입력된 value 를 가져와 setState를 하는 모습니다.

-여러 input 동시에 처리하기

 

 

 

 

 

 

 

 

State를 여러 개 선언할 수도 있지만 object를 활용하여 여러 개의 input을 state로 관리하는 방법이 있습니다.

 

target으로부터 name을 받아와 해당 name의 key에 해당하는 value를 변경하여 state에 반영합니다.

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

 



 

 

 

 

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

-커스텀 이벤트

단순히 DOM 이벤트를 활용하는 것을 넘어서 나만의 이벤트를 만들 수도 있습니다.

-이벤트 명명법

 

 

직접 이벤트를 만들 때에는 이름을 자유롭게 설정할 수 있습니다.

 

그러나 보통은 코드를 읽을 때 쉽고 빠르게 이해할 수 있도록 "on" + 동사 또는 "on" + 명사 + 동사 형태로 작성합니다.

 

예시: onClick, onButtonClick, onInputChange 핸들링 함수의 경우 마찬가지로 "handle" + 동사 또는 "handle" + 명사 + 동사 의 형태로 작성하며. "handle" 대신 이벤트명과 동일한 "on" 을 앞에 붙여도 무방합니다.