4. 이벤트 처리하기

맨날·2021년 5월 10일

React

리액트를 다루는 기술 정리

목록 보기

5/7

사용자와 DOM 요소들과 상호작용하는 것을 이벤트라고 합니다. React에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 유사합니다.

이벤트 처리시 유의 사항

1. 이벤트 이름은 카멜 케이스방식으로 작성

HTML에서는 onclick으로 모두 소문자로 사용하지만, 리액트에서는 onClick으로 작성합니다.

2. 이벤트의 값으로 자바스크립트 코드가 아니라 함수를 전달

HTML에서는 onclick="alert('hello')"와 같이 자바스크립트 코드를 전달하였습니다. 하지만 리액트에서는 자바스크립트 코드가 아닌 함수를 전달합니다.

function Hello() {
  return <button click={(e) => alert('hello!')}>버튼</button>
}

3. DOM 요소에만 이벤트 설정 가능

div, button, form 등과 같은 DOM 요소에는 이벤트를 설정할 수 있지만, 사용자가 직접 만든 컴포넌트에서는 이벤트 설정이 불가합니다. <MyComponent onClick={func} />와 같이 코드를 작성하더라도 MyComponent의 props에 값을 전달할 뿐입니다.

4. 기본동작을 방지 위해서는 preventDefault 사용하기

HTML에서는 false를 반환하면 요소의 기본동작을 중단시킬 수 있습니다. 하지만 리액트에서는 false를 반환하더라도 기본동작을 중단할 수 없습니다. 그때 사용할 수 있는 것이 preventDefault 입니다.

function Event() {
  const onClick = (e) => {
    e.preventDefault();
  }
  return <a onClick={onClick}>링크</a>
}

이벤트 핸들러

위에서 이벤트에 값으로 함수를 전달해야 한다고 하였습니다. 이때 그 함수가 이벤트 핸들러라고 하며, 이벤트가 발생하였을 때 처리 할 내용을 작성하는 곳입니다.

이벤트 핸들러에 대해서 아래와 같은 순서로 진행해보며 익혀보겠습니다.

컴포넌트 생성
onChange 이벤트 핸들링
임의 메소드 만들기
input 여러개 다루기

컴포넌트 생성

기본 컴포넌트 생성하기.

EventPractice.js

import React from 'react';

const EventPractice = () => {
  return (
    <div>
      <h1>이벤트 연습</h1>
    </div>
  )
};

App.js

import React from 'react';
import EventPractice from './EventPractice';

const App = () => {
  return <EventPractice />
};

onChange 이벤트 핸들링

위에서 작성한 EventPractice 컴포넌트에 input 태그 추가. 그리고 input 태그에 onChange 이벤트를 설정.

아래와 같이 코드를 작성한 후에 서버를 시작해서 input태그에 아무값이나 입력하면 콘솔창에 이벤트 객체가 출력되는 것을 확인할 수 있습니다.

import React from 'react';

const EventPractice = () => {
  return (
    <div>
      <h1>이벤트 연습</h1>
      <input
        type="text"
        name="message"
        onChange={(e) => console.log(e)}
      />
    </div>
  )
};

임의 메소드 만들기

위에서는 이벤트의 값에 바로 콜백함수를 작성하였는데, 이 함수를 외부로 분리하여 보겠습니다. 그리고 추가적으로 input의 값이 변경이 될때 state에 저장이 되는 코드도 추가하였습니다.

아래와 같이 작성하면 input에 값을 입력할때마다 message 상태값이 변경되는 것을 확인할 수 있습니다.

import React, { useState } from 'react';

const EventPractice = () => {
  const [message, setMessage] = useState('');
  const onChange = (e) => {
    setMessage(e.target.value);
  };
  return (
    <div>
      <h1>이벤트 연습</h1>
      <input
        type="text"
        name="message"
        value={message}
        onChange={onChange}
      />
    </div>
  )
};

input 여러개 다루기

현재 작성한 코드에서는 input이 하나밖에 없지만 만약 input이 하나더 추가했을 때 코드를 작성하여 보겠습니다.

username state와 이를 변경할 수 있는 이벤트 핸들러를 각각 추가하였습니다.

import React, { useState } from 'react';

const EventPractice = () => {
  const [message, setMessage] = useState('');
  const [username, setUsername] = useState('');
  const onChangeMessage = (e) => {
    setMessage(e.target.value);
  };
  const onChangeUsername = (e) => {
    setUsername(e.target.value);
  }
  return (
    <div>
      <h1>이벤트 연습</h1>
      <input
        type="text"
        name="message"
        value={message}
        onChange={onChangeMessage}
      />
      <input
        type="text"
        name="username"
        value={username}
        onChange={onChangeUsername}
      />    
    </div>
  )
};

input이 많지 않은 경우에는 위와 같이 코드를 작성해도 나쁘지 않으나, input의 개수가 많은 경우에는 input의 개수만큼 이벤트 핸들러를 추가해주어야 합니다. 이런 경우에는 객체를 활용하면 좀더 간단하게 코드를 작성할 수 있습니다.

import React, { useState } from 'react';

const EventPractice = () => {
  const [form, setForm] = useState({
    username: '',
    message: '',
  });
  const onChange = (e) => {
    const { name, value } = e.target;
    setForm({
      ...form,
      [name]: value
    });
  };
  return (
    <div>
      <h1>이벤트 연습</h1>
      <input
        type="text"
        name="message"
        value={form.message}
        onChange={onChange}
      />
      <input
        type="text"
        name="username"
        value={form.username}
        onChange={onChange}
      />    
    </div>
  )
};
``