[말로 풀어쓴 React] 이벤트 핸들링

목차

• 리액트 이벤트 표기법 주의사항
• 클래스형 컴포넌트에서의 이벤트 핸들링
• 함수형 컴포넌트에서의 이벤트 핸들링
  

1. 리액트 이벤트 표기법 주의사항

1) 이벤트 이름은 카멜 표기법을 따라야 한다.
ex) 'HTML: onclick' -> 'React: onClick', 'HTML: onkeyup: onKeyUp'

2) 이벤트 발생시 실행할 함수를 자바스크립코드가 아니라 함수 형태의 값을 전달한다. 아래 html에서는 onclick 발생 시 실행할 코드를 alert()라는 자바스크립트 코드로 작성했다. 반면 react는 객체형태({})로 onClickEnter라는 함수를 전달했다.

<input type="submit" value="클릭하면 대화상자" onclick="alert('안녕하세요');" />```

```javascript
<button onClick = {onClickEnter}> 입장 </button>

3) DOM 요소에만 이벤트 설정이 가능하다. div, button, input, form, span 등의 DOM 요소에는 이벤트 설정이 가능하지만, 리액트의 컴포넌트에는 불가능하다. 위의 예시에서도 button이라는 DOM요소에 함수를 걸었다. 아래처럼 컴포넌트에 `onClick`을 달아도 Second를 클릭할 떄 doIt이 실행되지 않는다. name, color처럼 onClick이라는 props를 전달해줄 뿐이다.

function App() {
  const doIt = function () {
    alert('do it');
  };

  return (
    <House>
      <First />
      <Second onClick={doIt} name="동2" color="blue" />
    </House>
  );
}

2. 클래스형 컴포넌트에서의 이벤트 핸들링

여기서 챙겨보아야 할 내용은 'input 태그 내용'과 'HandleChange함수`이다. input에서 type은 어떤 데이터 타입을 다룰 건지, name은 해당 input 데이터 값을 뭐라고 지칭할 건지, onChange는 변화가 발생했을 때 사용할 메소드, value는 해당 name의 값이다.

onChange 함수로 userName, userNickname값이 바뀐다. 이것을 this.state.userName으로 불러서 value에 저장한다.

HandleChange의 [e.target.name]: e.target.value 부분이 javascript문법적으로 헷갈릴 수도 있다. 객체 안에서 key를 []로 감싸면, []안의 값이 가리키는 실제 값이 key 값이 된다 . 여기서 name은 'userName', 'userNickname'이 있다. e.target에 따라 'userName': ~, 'userNickname': ~이 된다.

여기서 name은 userName, userNickname 두 개가 있다. 변수가 한 개라면 'userName' : e.target.value으로 코드를 짜면 되지만, 변수가 엄청 많을 수도 있다. 이를 모두 고려하기는 번거롭다. 그래서 이런 문법을 사용한다.

// Handler_class.js
import React, { Component } from 'react';

class Handler_class extends Component {
  state = {
    userName: '',
    userNickname: '',
  };

  HandleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  };

  HandleClick = () => {
    this.setState({
      username: '',
      message: '',
    });
  };

  render() {
    return (
      <div>
        <h1> 이벤트 연습 </h1>
        <input
          type="text"
          name="userName"
          value={this.state.userName}
          placeholder="이름을 입력하세요"
          onChange={this.HandleChange}
        ></input>
        <input
          type="text"
          name="Nickname"
          value={this.state.userNickname}
          placeholder="닉네임을 입력하세요"
          onChange={this.HandleChange}
        ></input>
      </div>
    );
  }
}

export default Handler_class;

// App.js
import React from 'react';
import Handler_class from './Handler_class';

function App() {
  return <Handler_class />;
}
export default App;

3. 함수형 컴포넌트에서의 이벤트 핸들링

전체적인 기능은 같으나 클래스형, 함수형에서 오는 표기방식 차이가 있다. 함수형 컴포넌트는 useState를 이용할 수 있다. useState의 arugment에 빈 문자열이 아니라 객체를 넣어 표현을 간소화했다. 객체를 사용하지 않으면 이렇게 두 번 반복해야 한다.

const [userName, setName] = useState('');
const [userNickname, setNickname] = useState('');

이후 Desturcting을 이용해 form객체의 값을 userName, userNickname에 할당해준다. onChange에서 ...form으로 과거의 값을 복사해주는 것은, name이 바꼈을 수도 있고 nickname에 바꼈을 수도 있어서다. 즉 두 가지 모두 고려해서 바뀐 값만 업데이트하려고 해준 것이다. [e.target.name]: e.target.value을 하면 새로운 값만 덮어쓰여진다. 현재 onChange가 Name, Nickname 모두에 적용된다. 불필요한 반복과정을 없애기 위해 이렇게 작성한 것이다.

// Handler_function.js
import React, { useState } from 'react';

const Handler_function = () => {
  const [form, setForm] = useState({
    userName: '',
    userNickname: '',
  });

  const { userName, userNickname } = form;

  const onChange = (e) => {
    const nextForm = {
      ...form, // 기존의 값 복사 (spread operator)
      [e.target.name]: e.target.value, // 덮어쓰기
    };
    console.log(nextForm);
    setForm(nextForm);
  };
  
  const handleClick = () => {
    setForm({ userName: '', userNickname: '' });
  };

  return (
    <div>
      <h1>이벤트 핸들링</h1>
      <input
        type="text"
        placeholder="이름"
        name="userName"
        value={userName}
        onChange={onChange}
      ></input>
      <input
        type="text"
        placeholder="닉네임"
        name="userNickname"
        value={userNickname}
        onChange={onChange}
      ></input>
      <button onClick={handleClick}>확인 </button>
    </div>
  );
};

export default Handler_function;

// App.js
import React from 'react';
import Handler_function from './Handler_function';
function App() {
  return <Handler_function />;
}
export default App;