React 이벤트 핸들링

이벤트 연결하는 법

- jsx에서 camelCase 형태의 속성에 함수를 전달함.

import { useCallback } from "react";

// 컴포넌트 외부에 함수 선언
function handleClick2(e) {
  console.log("click2", e);
}

function App() {
   /**
   * 합성 이벤트 (SyntheticEvent)
   * - React에서 이벤트가 발생할 때, 이벤트 핸들러의 인자로 합성 이벤트 객체가 전달됨
   * - 이 합성 이벤트는 javascript에서 전달 받는 이벤트 객체를 확장(래핑)한 객체임
   *   (거의 동일한 인터페이스를 가지고 있음)
   * - 원본 이벤트 객체(native event)는 syntheticEvent.nativeEvent 에 있음
   * - 지금은 그냥 같은 이벤트 객체라고 생각해도 무방
   */
  function handleClick1(e) {
    console.log("click1", e);
  }
  
  /**
   * 이벤트 핸들러(함수)를 만들 때는 react lifecycle을 고려하자!
   *  - 컴포넌트가 리랜더링 되면 컴포넌트 내에서 단순 정의한 함수가 새로운 함수로 만들어짐
   *  - 이것은 불필요한 작업으로 성능 문제를 야기함
   *  - 그래서 함수의 정의를 최대한 컴포넌트 밖으로 빼거나,
   *    useCallback으로 감싸줘서 매 랜더링 마다 새로 만들어지지 않도록 해줄 필요가 있음
   */
  const handleChange = useCallback((e) => {
    console.log("change", e.target.value);
  }, []);

  return (
    <div>
      <button onClick={handleClick1}>Button1</button>
      <button onClick={handleClick2}>Button2</button>
      <div>
        <input type="text" onChange={handleChange} />
      </div>
    </div>
  );

}

 

이벤트 종류

Mouse 이벤트

- onClick, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, onMouseMove

Keyboard 이벤트

- onKeyDown(물리적인 키에 반응), onKeyUp, onKeyPress(실제적으로 문자가 들어왔을 때만 반응)

Focus 이벤트

 - onFocus(요소가 포커스 될 때), onBlur(요소의 포커스가 사라졌을 때)

- Form 이벤트: onChange

 

Form 요소

Controlled Component (제어 컴포넌트)

- React에 입력 요소의 값이 제어되는 컴포넌트

- 장점 : 컴포넌트의 state와 input value가 완전히 동일한 값을 갖음 (신뢰가능한 출처)

다른 component에 input value를 전달하거나 다른 이벤트 핸들러에서 값을 재설정할 수 있음.

- 단점 : 값이 변경되는 매 순간 렌더링 됨.