🔹 React에서의 이벤트 처리 방식은 DOM 이벤트 처리 방식과 유사하다. (몇 가지의 문법 차이가 있음)
<button onclick="handleEvent()">Event</button>
🎈 React에서의 이벤트 처리
<button onClick={handleEvent}>Event</button>
<input>
, <textarea>
, <select>
와 같은 폼 엘리먼트는 사용자의 입력값을 제어하는 데에 사용된다. React에서는 이러한 변경될 수 있는 입력값을 일반적으로 컴포넌트의 state로 관리하고 업데이트한다. onChange 이벤트가 발생하면 e.target.value
를 통해 이벤트 객체에 담겨져 있는 input
의 값을 읽을 수 있다.
function NameForm() {
const [name, setName] = useState(""); // state 문자열 변수 선언, 바뀌는 값은 setName 함수를 통해서 리턴
const handleChange = (e) => {
setName(e.target.value); // 이벤트 타겟의 value 값으로 바꾸겠다
};
return (
<div>
<input type="text" value={name} onChange={handleChange}></input>
{/* <input> 타입의 폼의 value는 현재 값이 들어가 있는 name(초기값이 ""이었으므로 현재
name에는 ""이 있다. onChange 이벤트가 발생하면 handlChange 함수가 실행되며,
함수 내에서는 setName을 통해 input의 값을 새롭게 갱신한다.) */}
<h1>{name}</h1>
</div>
);
}
컴포넌트 return 문 안에서의 input
태그에 value
와 onChange
를 넣었다. onChange
는 input
의 텍스트가 바뀔 때마다 발생하는 이벤트이다. 이벤트가 발생하면 handleChange
함수가 작동하여, 이벤트 객체에 담긴 input
값을 setState
를 통해서 새로운 state로 갱신한다.
onClick
은 사용자가 클릭 행동을 했을 때 발생하는 이벤트이다. 버튼이나 <a>
tag를 통해서 링크 이동 등과 같이 주로 사용자 행동에 따라서 애플리케이션이 반응해야 할 때 자주 사용되는 이벤트이다.
function NameForm() {
const [name, setName] = useState("");
const handleChange = (e) => {
setName(e.target.value);
};
const handleClick = () => {
alert(name);
};
return (
<div className="App">
<h1>Event handler practice</h1>
<input type="text" value={name} onChange={handleChange}></input>
{/* <button onClick={handleClick}>Button</button> */}
<button onClick={() => alert(name)}>Button</button>
<h3>{name}</h3>
</div>
);
}
버튼을 클릭 시, alert를 통해 input
태그에 입력한 이름이 알림창 팝업창을 띄운다.