이벤트 소개

이벤트란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미.
유저의 행동(onClick, mouseEnter,etc.)에 의해 발생할 수도 있으며 개발자가 의도한 로직에 의해 발생할 수도 있다.
이렇게 발생된 이벤트를 자바스크립트를 이용해 대응할 수 있다.

Element가 로딩되었을 때, 사용자가 Element를 클릭하거나, 마우스를 올리거나, 더블 클릭 등과 같은 행동을 했을 때 등, 다양한 이벤트가 있다.

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

이벤트 처리 방법

핸들링 함수 선언

const App = () => {
   const handleClick = () => {
	alert('clicked');
   }
   return (
    <div>
    	<button onClick={handleClick}>클릭하세요</button>	
    </div>
   );
};

익명 함수로 처리

const App = () => {
    return (
    	<div>
            <button onClick={()=>{ alert('클릭했습니다.')}>
            클릭하세요</button>
        </div>
    )
}

React에서 이벤트를 처리하는 방법은 크게 두 가지가 있다.
별도의 핸들링 함수를 선언하고 Element에 넘겨주는 방법과
이벤트를 할당하는 부분에서 익명 함수를 작성하는 방법이다.

이벤트 객체

const App = () => {
	const handleChange = (event) => {
    	console.log(event.target.value + '라고 입력');
    }
    return (
    	<div>
           <input onChange={handleChange}/>
        </div>
    );
}

• DOM Element의 경우 핸들링 함수에 이벤트 object를 매개변수로 전달한다.
• 이벤트 object를 이용하여 이벤트 발생 원인, 이벤트가 일어난 Element에 대한 정보를 얻을 수 있다.
• 이벤트 형태(클릭, 키 입력 등)와 DOM 종류(button, form, input 등)에 따라 전달되는 이벤트 object의 내용도 다르니 유의해야 한다.

많이 쓰이는 DOM 이벤트

• onClick : element를 클릭
• onChange: element의 value가 변경됨
• onKeyDown, onKeyUp, onKeyPress: 키보드 입력이 일어남
• onDoubleClick: element를 더블 클릭
• onFocus: element에 focus 됨
• onBlur: element가 focus를 잃음
• onSubmit: form element에서 submit 했을 때

컴포넌트 내 이벤트 처리

DOM 버튼 클릭 이벤트

const App = () => {
   const handleClick = () => {
       alert('클릭했습니다.');
   }
   return (
   	<div>
  		<button onClick={handleClick}>클릭하세요</button>
	</div>
   );
}

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

DOM Input 값을 State에 저장하기

const App = () => {
   const [inputValue, setInputValue] = useState('defaultValue');
   const handleChange = (event) => {
   	setInputValue(event.target.value);
   }
   return (
   	<div>
  	    <input onChange={handgleChange} defaultValue={inputValue} />
  	<br/>
  	입력 값: {inputValue}
  	</div>
   );
}

event object의 target은 이벤트의 원인이 되는 Element를 가리킨다.
현재 event의 target은 input element이므로 입력된 value를 가져와 setState를 하는 모습.

여러 Input 동시에 처리

const App = () => {
    const [user, setUser] = useState({name:'철수', school:'전봇대학교'});
    const handleChange = (event) => {
    	const { name, value } = event.target;
        const newUser = {...user};
        newUser[name] = value;
        setUser(newUser);
    };
    return (
    	<div>
  	   <input name='name' onChange={handleChange} value={user.name}/>
    	   <br/>
           <input name='school' onChange={handleChange} value={user.school}/>
  	   <p>
             {user.name}님은 {user.school}에 재학중입니다.
  	   </p>
        </div>
    );
};

State를 여러 개 선언할 수도 있지만 object를 활용하여 여러 개의 input을 state로 관리하는 방법도 있다.
target으로부터 name을 받아와 해당 name의 key에 해당하는 value를 변경하여 state에 반영한다.

다른 컴포넌트로 이벤트 전달

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

const MyForm = ({onChange}) => {
    return (
    	<div>
  	   <span>이름: </span>
           <input onChange={onChange}/>
	</div>
    );
};

const App = () => {
	const [username, setUsername] = useState('');
    return (
    	<div>
  	   <h1>{username}님 환영합니다.</h1>
           <MyForm onChange={(event)=> {event.target.value)}}/>
        </div>
    );
}

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

커스텀 이벤트

const SOS = ({onSOS} => {
	const [count, setCount] = useState(0);
	const handleClick = () => {
		if(count >= 2) {
			onSOS();
		}
		setCount(count+1);
	}
	return <button onClick={handleClick}>
	세번 누르면 긴급 호출({count})</button>
}

const App = () => {
	return (
	<div>
		<SOS onSOS={() => {
       		alert('긴급사태!');
        }}/>
	</div>
	);
};

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

이벤트 명명법

직접 이벤트를 만들 때에는 이름을 자유롭게 설정할 수 있다.
그러나 보통은 코드를 읽을 때 쉽고 빠르게 이해할 수 있도록 'on'+동사 또는 'on'+명사+동사의 형태로 작성한다.
(e.g. onClick, onButtonClick, onInputChange)

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