4. 이벤트 핸들링

• 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(event)라고 합니다.

리액트에서 이벤트 사용시 주의사항

1. 이벤트 이름은 카멜 표기법으로 작성합니다

2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달합니다

• 함수 전달에 좋은 화살표 함수 사용
• 렌더링 부분 외부에 미리 만들어서 전달 가능

3. DOM 요소에만 이벤트를 설정할 수 있습니다

• html 태그 같은 DOM요소에만 설정 가능
• 컴포넌트에는 설정이 안된다.

클래스형 컴포넌트

• React에서는 DOM엘리먼트가 생성된 후 리스너를 추가하기 위해 addEventListener를 호출할 필요가 없다. 대신, 엘리먼트가 처음 렌더링될때 리스너를 제공하면 된다.
• 이벤트핸들러를 클래스의 메서드로 만들고 이를 컴포넌트 내에서 사용할 수 있다.
• 여기에서 주의해야할 것은, JS의 클래스 메서드는 기본적으로 바인딩되어있지 않기 때문에 this.handleClick을 바인딩하지 않고 호출하면 this는 undefined가 된다. 따라서 바인딩해주고 사용해야한다.
• 즉 binding을 따로 지정해주지 않으면 해당 메서드에서 호출하는 this가 해당 클래스안에서의 event값이 아닌 최상위의 window에서 값을 가져올 수 있기 때문에 주의해야한다.

함수형 컴포넌트

onChange

• Form 요소에서 값이 변하면 발생하는 이벤트
• e 객체 : SyntheticEvent. 웹 브라우저의 네이티브 이벤트랄 감싸는 개체. 이벤트가 끝나면 초기화
• e.target.value : 입력값 구하기

onClick

• 클릭 시 발생하는 이벤트

   <input
        type="text"
        name="message"
        placeholder="아무거나 입력해보세요."
        onChange={(e) => {
          console.log(e.target.value);
        }}
    />
    <button
        onClick={() => {
            alart('클릭')
        }}
      >
        확인
    </button>

useState(Hooks) 이용하여 input 값으로 상태값 설정, 초기화 하기

• useState 이용하여 첫번째 인자로 현재 상태(message)와 두번째 인자로 상태를 바꾸는 함수(setMessage) 설정
• input 태그에서 value를 이용하여 input값 표시
• 버튼의 onClick을 이용하여 현재 message 표시 후, 공백으로 초기화

input 여러 개 다루기

• input이 두개 밖에 업다면 useState()의 두번 째 인자 상태 설정 함수를 2개 써도 상관없음.
• 하지만 input이 여러 개라면 e.target.name 이용하여 하나의 함수로 설정
• 각각의 input 상태를 하나로 관리하기위해 form 객체 설정

const [form, setForm] = useState({
    message: '',
    username: '',
})

onKeyPress 이벤트

• 키를 눌렀을 때 발생하는 KeyPress 이벤트 처리
• e.key 가 Enter인 이벤트에 onClick() 함수 호출하도록 처리

  const onKeyPress = (e) => {
    if (e.key === 'Enter') {
      onClick();
    }
  };

  return{
      ...
      <input
        ...
        onKeyPress = {onKeyPress}
      >
  }