React 이벤트 처리

React에서의 이벤트 처리

• React 에서 이벤트 처리는 DOM 과 유사하지만 몇가지 문법의 차이가 존재한다.
  1. 이벤트를 작성할 때 소문자가 아닌, 카멜케이스로 작성한다.
  2. 중괄호를 이용하여 JS로 실행될 함수(이벤트 핸들러) 를 호출한다.

(
  <button onclick ="eventHandler()">btn</button> {/* HTML */}
  <button onClick={eventHandler}>btn</button> {/* JSX */}
)

• () 를 제외하는 이유는 렌더링 과정에서 함수가 실행 될 경우 리턴값이 onClick에 전달된다.

onChange

• 내용이 변경되는 경우에 발생하는 이벤트

function NameForm() {
  const [name, setName] = useState(""); {/* 최초값은 빈문자 */}

  const handleChange = (event) => {
    setName(event.target.value);
  } 
  {/* 이벤트가 발생한 요소 내부의 값을 setName 을 통해 name 으로 전달한다. */}

  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      {/* input 태그의 내용이 변경되면 함수가 실행되고, value를 내부의 값으로 갱신한다.*/} 
      <h1>{name}</h1>
      {/* 변경된 name 을 표시한다. */}
    </div>
  )
};

• input 내부에 내용이 변경되면 handleChange 함수가 실행되고, 그 값이 state 저장 변수인 name에 전달된다.
• 이렇게 state 가 바뀌면 리액트는 컴포넌트를 다시 렌더링하므로, h1 태그 내부의 name이 input 태그에 작성된 내용과 동일해진다.

onClick

• 요소가 클릭된 경우에 발생하는 이벤트

function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (event) => {
    setName(event.target.value);
    {/* 이벤트가 발생한 요소 내부의 값을 setName 을 통해 name 으로 전달한다. */}
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <button onClick={() => alert(name)}>Button</button>
      {/* 버튼을 클릭하면 alert 함수의 인자로 name이 전달되어 실행된다. */}
      <h1>{name}</h1>
    </div>
  );
};

• 한가지 유의할 점은 이벤트 핸들러 함수를 작성할 때는 실행하는 형태로 작성하지 않는다.
  → 함수명()
• 이 경우, 컴포넌트의 렌더링 과정에서 함수가 바로 실행되어 버리고, 함수에서 리턴되는 값이 없기 때문에 undefined 를 반환하므로, 요소를 클릭해도 아무 반응을 하지 않는다.
  → 즉 이벤트가 실행되어도 실행 할 값이 없는 것과 같다.

<button onClick={alert(name)}>Button</button>
{/* 렌더링 과정에서 함수가 바로 실행됨 */}
{/* 이러면 안됨! */}

const alertName = () => { 
  alert(name) 
}
<button onClick={alertName}>Button</button>
</* 함수를 선언하여 전달함 */>

<button onClick={() => alert(name)}>Button</button>
</* 내부에서 화살표 함수로 선언함 */>

• 그래서 onClick에 함수를 전달할 때는 바로 호출하는 것이 아니라, 리턴문 외부에 함수를 정의하여 이벤트 핸들러로 전달하거나, 이벤트핸들러 위치에 함수를 정의하여야 한다.

---

+

• 정리하자면,
  1. useState 를 사용하여,
  2. state 갱신 함수의 값으로 이벤트가 발생하는 요소의 값을 지정하고,
     → event.target.value
  3. 이벤트가 발생될 때마다 실행되게끔 만들면,
  4. 이벤트가 발생할 때마다 state 가 갱신되어 컴포넌트가 렌더링 되므로,
  5. 변수안의 값을 실시간으로 확인 할 수 있다.
• onClick 에서 이벤트핸들러로 전달되는 함수들은 화살표 함수로 작성되어야 함수들이 컴포넌트 내부의 state 로 접근이 가능하다.
  → 이말이 크게 이해는 되지 않지만.... 리액트에서는 화살표 함수가 유리하다고 생각하자...