React의 이벤트 처리
🔹 React에서의 이벤트 처리 방식은 DOM 이벤트 처리 방식과 유사하다. (몇 가지의 문법 차이가 있음)
- React에서 이벤트는 카멜 케이스 사용
👉 식별자 표기법
- 카멜 표기법(Camal Case): 식별자 표기 시, 여러 단어가 이어지면 첫 단어 시작만 소문자로 표시하고 각 단어의 첫 글자는 대문자로 지정
- 파스칼 표기법(Pascal Case): 식별자 표기 시, 여러 단어가 이어지면 각 단어의 첫 글자는 모두 대문자로 지정
- 스네이크 표기법(Snake Case): 식별자 표기 시, 여러 단어가 이어지면 단어 사이에 언더바 넣는 표기법
- 헝가리안 표기법(Hungarian Case): 식별자 표시 시, 두어에 자료형을 붙임
- 헝가리안 표기법은 JS와 같은 동적 타입 언어와의 궁합은 최악이라고 함
https://namu.wiki/w/%ED%97%9D%EA%B0%80%EB%A6%AC%EC%95%88%20%ED%91%9C%EA%B8%B0%EB%B2%95
🎈 HTML에서의 이벤트 처리
<button onclick="handleEvent()">Event</button>🎈 React에서의 이벤트 처리
<button onClick={handleEvent}>Event</button>onChange
<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
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 태그에 입력한 이름이 알림창 팝업창을 띄운다.
