[React] 4. React 컴포넌트(4) - 이벤트 처리 방법

4. React 컴포넌트(4) - 이벤트 처리 방법

 

안녕하세요. 갓대희 입니다. 이번 포스팅은 [ React에서 이벤트 handling 하는 방법 ] 입니다. : ) 

 

 

 

1. 컴포넌트에서 DOM 이벤트 사용

 

- 컴포넌트에서 출력된 특정 DOM 객체에 이벤트 컴포넌트가 동작하기 위해선 DOM이벤트 프로퍼티를 사용해야 한다.
 - 우리가 흔히 쓰고 있는 HTML 엘리먼트의 이벤트들은 JSX내에서 'on + 이벤트명' 형태의 프로퍼티로 제공된다.

ex) 프로퍼티 샘플

이벤트 명	JSX DOM 이벤트 프로퍼티	이벤트 호출 시점
click	onClick	엘리먼트에 마우스나 키보드가 클릭 된 경우
change	onChange	엘리먼트의 내용이 변경된 경우
submit	onSubmit	폼의 데이터가 전송될 때
keydown	onKeyDown	키보드 버튼이 눌린 경우 ( 값 입력전에 발생하며, shift, alt, ctrl 등 특수키에 동작한다. ) (한/영, 한자 등은 인식불가)
keyup	onKeyUp	키보드 버튼이 눌렸다 뗀 경우 ( 값 입력후에 발생하며, onKeyDown 과 동일하게 동작한다. )
keypress	onKeyPress	키보드 버튼이 눌려져 있는 경우 ( 실제 글자가 작성될때 이벤트이며, ASCII 값으로 사용되어 특수키를 인식 못한다.)
focus	onFocus	엘리먼트가 포커스 된 경우
blur	onBlur	엘리먼트가 포커스가 사라진 경우
mousemove	onMouseMove	엘리먼트 위에서 마우스 커서가 움직일 때
mousedown	onMouseDown	마우스 버튼이 클릭되기 시작할 때
mouseup	onMouseUp	마우스 버튼 클릭이 끝날때

 

 

2. 리액트의 이벤트 문법

 

 - 소문자 대신 카멜 케이스(camelCase)를 사용한다.

onClick={changename} (x)
onClick={changeName} (o)

 

 - JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다.

onClick="changeName()" (x) 
onClick={changeName} (o)

 

ex)

import React, { useState } from 'react';

const Main = () => {
	const [ myName, setMyName ] = useState("GodDaeHee") 
    function changeName() {
		setMyName(myName === "GodDaeHee" ? "KimDaeHee" : "GodDaeHee");
    }

    return (
        <div>
			<h1>안녕하세요. {myName} 입니다.</h1>
            <button onClick={changeName}>Change</button>
        </div>
    );
};

export default Main;

※ 혹시 함수명 뒤에 ()를 넣는 경우 ex) onClick={changeName()}
  changeName이라는 함수가 반환하는 값이 들어 가게 된다.
  이 함수에서 반환하는 값이 없다면 undefined가 들어가게 원하는 결과가 나오지 않을 수 있다.

 

 - 함수를 직접 선언하여 사용할 수도 있다.

import React, { useState } from 'react';

const Main = () => {
	const [ myName, setMyName ] = useState("GodDaeHee") 
    return (
        <div>
			<h1>안녕하세요. {myName} 입니다.</h1>
            <button 
                onClick={() => {
                    setMyName(myName === "GodDaeHee" ? "KimDaeHee" : "GodDaeHee");
                }}
            >Change</button>
        </div>
    );
};

export default Main;

 

3. 이벤트의 기본동작 방지 처리

 

 - React에서는 false를 반환해도 기본 동작을 방지할 수 없다.
 - 반드시 preventDefault를 명시적으로 호출해야 한다.
 - 그럼 새로운 페이지로 연결되는 기본 링크 동작을 막으려면 어떻게 해야할까?

 

ex) Change 클릭시 기본 링크 동작이 수행되어, 주소창에 #이 찍히게 된다.

import React, { useState } from 'react';
const Main = () => {
	const [ myName, setMyName ] = useState("GodDaeHee")
    function changeName() {
		setMyName(myName === "GodDaeHee" ? "KimDaeHee" : "GodDaeHee");
    }

    return (
        <div>
			<h1 claaName="kk">안녕하세요. {myName} 입니다.</h1>
			<a href="alert(1);" onClick={changeName}>Change</a>
        </div>
    );
};

 

ex) e.preventDefault를 명시적으로 호출하여 기본 링크 동작을 막을 수 있다.

import React, { useState } from 'react';
const Main = () => {
	const [ myName, setMyName ] = useState("GodDaeHee")
    function changeName(e) {
		e.preventDefault();
		setMyName(myName === "GodDaeHee" ? "KimDaeHee" : "GodDaeHee");
    }

    return (
        <div>
			<h1 claaName="kk">안녕하세요. {myName} 입니다.</h1>
			<a href="#" onClick={changeName}>Change</a>
        </div>
    );
};

 

※ 위의  내용을 이해 했다면, 합성 이벤트(SyntheticEvent)란 무엇인지 이해 하고 넘어가도 좋을 것 같다.

▶ 합성 이벤트

 - 객체로 모든 브라우저에서 이벤트를 동일하게 처리하기 위한(크로스브라우징 문제 해결) Wrapper 객체. 대부분의 인터페이스는 브라우저 고유 이벤트와 같다.

 

 - 합성 이벤트 객체 필드(Attribute) 종류

boolean bubbles : 이벤트가 DOM을 통해 상위로 전파되는지 여부를 boolean 반환한다.(이벤트 버블링 : 하위에서 상위요소로 이벤트 전파하는 것)
boolean cancelable : 이벤트에 규정한 액션을 취소할 수 있는지 여부를 boolean 반환한다.
void preventDefault() : 해당 DOM의 기본 이벤트를 막는 역할의 메서드이다. void 타입으로 반환값이 없다.
boolean isDefaultPrevented() : 해당 이벤트 객체에서 preventDefault() 가 호출되었는지 여부를 반환한다.
void stopPropagation() : 여러 중첩된 DOM의 경우, 이벤트 타겟 외 DOM에 이벤트가 적용되지 않도록 버블링을 막는다.
boolean isPropagationStopped() : 해당 이벤트 객체에서 stopPropagation() 이 호출되었는지 여부를 반환한다.
DOMEventTarget target : 이벤트 핸들러가 할당된 DOM에서 이벤트가 직접 발생한 DOM을 반환한다. 자식 컴포넌트가 될 수도 있다.
number timeStamp : 이벤트가 발생했던 시간을 밀리초 단위로 반환한다.
string type : 이벤트의 타입을 문자열로 반환한다. (click, error 등등)

 - 더 자세한 건 다음 공식 문서를 참고하면 좋을 것 같다.

https://ko.reactjs.org/docs/events.html