[React] React에서의 State 이벤트 처리

React의 이벤트 처리

🔹 React에서의 이벤트 처리 방식은 DOM 이벤트 처리 방식과 유사하다. (몇 가지의 문법 차이가 있음)

• React에서 이벤트는 카멜 케이스 사용

👉 식별자 표기법

1. 카멜 표기법(Camal Case): 식별자 표기 시, 여러 단어가 이어지면 첫 단어 시작만 소문자로 표시하고 각 단어의 첫 글자는 대문자로 지정
2. 파스칼 표기법(Pascal Case): 식별자 표기 시, 여러 단어가 이어지면 각 단어의 첫 글자는 모두 대문자로 지정
3. 스네이크 표기법(Snake Case): 식별자 표기 시, 여러 단어가 이어지면 단어 사이에 언더바 넣는 표기법
4. 헝가리안 표기법(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 태그에 입력한 이름이 알림창 팝업창을 띄운다.

참고: 코드스테이츠