이벤트
웹 브라우저가 알려주는 HTML요소에 대한 사건 발생
사용자의 행동에 의해 발생하거나, 개발자가 의도한 로직에 의해 발생한다.
DOM 이벤트 종류
onClick - element 클릭을 감지
onChange - element 내용(input의 텍스트 변경, 파일선택 등) 변경 감지
onKeyDown, onKeyUp, onKeyPress - 키보드 입력을 감지
onDoubleClick - element를 더블클릭 했을 때
onFocus - element에 마우스가 포커스 됐을 때
onBlur - element가 포커스를 잃었을 때
onSubmit - 폼 element에서 제출했을 때
이벤트 핸들러 함수
발생된 이벤트를 자바스크립트를 이용해 대응할 수 있다.
이벤트 핸들러 함수안에 다양한 로직을 처리하고, 그 결과를 사용자에게 출력하여 알릴 수도 있다.
이벤트 처리 방법
(1) 핸들링 함수를 선언
import React from 'react';
function App() {
const handleChange = event => { // 핸들링 함수를 선언
console.log(event);
};
return (
<div className="App">
<input onChange={handleChange} /> // input element와 핸들링 함수를 연결
</div>
);
}
export default App;
(2) 익명함수를 선언
import React from 'react';
function App() {
return (
<div className="App">
<input onChange={(event) => { // 이벤트 익명함수로 작성
console.log(event.target.value)
}}/>
</div>
);
}
export default App;
컴포넌트 내 이벤트 처리
(1) DOM 버튼 클릭
DOM element의 클릭 이벤트를 전달받아 처리
// src/App.js 파일
import React from 'react';
import Greeting from './components/Greeting';
function App() {
return (
<div className="App">
<Greeting /> // 컴포넌트 삽입
</div>
);
}
export default App;
// src/components/Greeting.js
import React from 'react';
const Greeting = () => {
const handleClick = () => { // 컴포넌트 내에 이벤트 정의
alert('안녕하세요');
};
return <button onClick={handleClick}>클릭</button>; // 컴포넌트 내 이벤트 처리
};
export default Greeting;
(2) event와 state 연동하기
React로 애플리케이션을 개발하다보면
실시간으로 사용자로부터 값을 전달받아 컴포넌트에 반영할 일이 많기 때문에
이벤트와 State는 뗄래야 뗄 수 없는 관계라고 할 수 있다.
import React, { useState } from 'react'; // state를 쓰기 위해 useState 추가
function App() {
const [inputValue, setInputValue] = useState(''); // state는 반드시 한쌍으로 정의됨
return (
<div className="App">
<input
onChange={event => {
setInputValue(event.target.value); // state는 반드시 set으로 저장되어야 함.
}}
></input>
<span>{inputValue}</span> // stat는 변수처럼 가져다 사용 가능
</div>
);
}
export default App;
event.target.value : event object의 target은 이벤트의 원인이 되는 element를 가리킨다.
(3) 한개의 이벤트 핸들러를 이용해 여러 element에 재사용하기
state를 여러 개 선언할 수도 있지만 object를 활용하여 여러개의 input을 state로 관리하는 방법이 있다.
import React, { useState } from 'react';
function App() {
// state를 object로 선언
const [person, setPerson] = useState({
name: '김민수',
school: '엘리스대학교',
});
// 이벤트 핸들러 선언
const handleChange = event => {
const { name, value } = event.target;
setPerson(current => {
const newPerson = { ...current };
newPerson[name] = value;
return newPerson;
});
};
return (
<div className="App">
// element 2개(input name, input school)에서 같은 핸들러함수 호출 가능
<input name="name" value={person.name} onChange={handleChange}></input>
<input name="school" value={person.school} onChange={handleChange}></input>
<button
onClick={() =>
alert(`${person.name}님은 ${person.school}에 재학 중입니다.`)
}
>
클릭
</button>
</div>
);
}
export default App;
컴포넌트 외부로부터 이벤트를 전달받아 처리하기
(1) 컴포넌트 간 이벤트 전달하기
부모 컴포넌트에서 생성된 이벤트 핸들링 함수를 자식 컴포넌트로 전달하여 처리할 수 있다
src/components 디렉토리를 생성하고 MyForm.js 파일을 생성합니다.
MyForm 컴포넌트를 선언합니다.
이 컴포넌트는 onChange 라는 함수를 Props로부터 전달받습니다.
MyForm 컴포넌트에서 <input> element를 반환.
생성한 input element에 Props로부터 전달받은 onChange 함수를 전달
App.js로 돌아와 MyForm 컴포넌트를 import합니다.
username state를 선언합니다. 초기값은 ""입니다.
className이 "App"인 div 안에 <h1> element를 생성하고 내용은 OOO님 환영합니다.가 출력되도록 합니다.
(OOO에는 username state가 대입돼야 합니다.)
<h1> element 아래에
// app.js 파일
import React, { useState } from 'react';
import MyForm from './components/MyForm.js';
function App() {
const [username, setUsername] = useState('');
return (
<div className="App">
<h1>{username}님 환영합니다.</h1>
<MyForm
onChange={event => {
setUsername(event.target.value);
}}
/>
</div>
);
}
export default App;
// components/MyForm.js
import React from 'react';
const MyForm = ({ onChange }) => {
return <input onChange={onChange} />;
};
export default MyForm;
(2) 커스텀 이벤트
단순히 DOM 이벤트를 활용하는 것을 넘어서 나만의 이벤트를 만들 수도 있다.
이벤트 명명법
직접 이벤트를 만들 때에는 이름을 자유롭게 설정할 수 있다.
보톤은 on+동사 또는 on+명사+동사 형태로 작성한다.
