🌙 [React] 이벤트 핸들링

🌊 이벤트

: 사용자가 웹 브라우저에서 DOM 요소들과 상호작용하는 것

 

 

리액트의 이벤트

주의사항

• 이벤트 이름은 카멜 표기법으로 작성한다. HTML의 onclick은 리액트에서 onClick으로 작성해야 한다.
• 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다.
• DOM요소에만 이벤트를 설정할 수 있다. 

 

이벤트 종류

• Clipboard
• Composition
• Keyboard
• Focus
• Form
• Mouse
• Selection
• Touch
• UI
• Wheel
• Media
• Image
• Animation
• Transition

 

input이 여러 개 일 때 state에 적용하는 법

 

1. onChange 관련 함수를 두 개를 만들어서 사용하는 방법.

import React, { useState } from 'react';

export default function EventPractice() {
  const [username, setUsername] = useState('');
  const [message, setMessage] = useState('');
  const onChangeUsername = (e) => setUsername(e.target.value);
  const onChangeMessage = (e) => setMessage(e.target.value);
  // 이벤트를 전달받으면 이벤트를 각 setUsername, setMessage에 전달하는 함수
  const onClick = () => {
    alert(username + ': ' + message);
    setUsername('');
    setMessage('');
    // setUsername과 setMessage를 빈 문자열로 초기화해준다.
  };
  const onKeyDown = (e) => {
    if (e.key === 'Enter') {
      onClick();
    }
    // 확인 버튼을 클릭하지 않고 엔터를 눌러도 작동하게 하는 함수
  };

  return (
    <div>
      <input
        type='text'
        name='username'
        placeholder='사용자명'
        value={username}
        onChange={onChangeUsername}
      />
      <input
        type='text'
        name='message'
        placeholder='아무거나 입력해보세요'
        value={message}
        onChange={onChangeMessage}
        onKeyDown={onKeyDown}
      />
      <button onClick={onClick}>확인</button>
    </div>
  );
}

 

2. e.target.<value>를 활용하는 방법

import React, { useState } from 'react';

export default function EventPractice() {
  const [form, setForm] = useState({
    username: '',
    message: '',
  });
  const { username, message } = form;
  const onChange = (e) => {
    const nextForm = {
      ...form, // 기존의 form 내용을 이 자리에 복사한 뒤
      [e.target.name]: e.target.value, // 원하는 값을 덮어씌우기
    };
    setForm(nextForm);
  };
  const onClick = () => {
    alert(username + ': ' + message);
    setForm({
      username: '',
      message: '',
    });
  };
  const onKeyDown = (e) => {
    if (e.key === 'Enter') {
      onClick();
    }
  };
  return (
    <div>
      <input
        type='text'
        name='username'
        placeholder='사용자명'
        value={username}
        onChange={onChange}
      />
      <input
        type='text'
        name='message'
        placeholder='아무거나 입력해보세요'
        value={message}
        onChange={onChange}
        onKeyDown={onKeyDown}
      />
      <button onClick={onClick}>확인</button>
    </div>
  );
}

e.target.name을 활용하기 위해 useState를 싸용할 때 인풋 값이 들어 있는 form 객체를 활용한다.

 

 

 

리액트를 다루는 기술을 참고하였습니다.