리액트(React) 스터디일지5 : 이벤트

 

1. 리액트에서는 카멜 표기를 원칙으로 합니다. 하이픈(-)이 들어가는 요소자리를 카멜 표기로 대체합니다.

back-ground (x)
backGround(o)

font-size(x)
fontSize(o)

 

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

onclick(x)
onClick(o)

onkeyup(x)
onKeyUp(o)

 

3. 이벤트에 실행할 코드를 전달하는 것이 아니라 함수 형태의 값을 전달합니다.

 

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

DOM요소(div, input, span)등의 요소에는 이벤트를 설정할 수 있지만 우리가 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없습니다.

 

자세한 이벤트는 공식문서를 통해서 확인하실 수 있습니다. 

import React, { Component } from 'react';

class EventPractice extends Component {
  state = {
    message: '',
  };

  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  handleChange(e) {
    this.setState({
      message: e.target.value,
    });
  }

  handleClick(e) {
    console.log(this.state.message);
    this.setState({
      message: '',
    });
  }

  render() {
    return (
      <div>
        <h1>이벤트 연습</h1>
        <input
          type="text"
          name="message"
          placeholder="아무거나 입력"
          value={this.state.message}
          onChange={this.handleChange}
        />
        <button onClick={this.handleClick}>확인</button>
      </div>
    );
  }
}

export default EventPractice;

메서드를 만들어서 이벤트를 전달도 가능하며 함수가 호출될 때 this는 호출부에 따라 결정되어집니다. 

클래스의 임의 메서드가 특정 html요소의 이벤트로 등록되는 과정에서 메서드와 this의 관계는 끊어져 버리기 때문에 this를 컴포넌트 자신으로 제대로 가리키기 위해서는 메서드를 this와 바인딩하는 작업이 필요합니다. 

 

바인딩을  하지 않는다면 this는 undefined를 호출합니다.

import React, { useState } from 'react';

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

  const { username, message } = form;

  const onChange = (e) => {
    const nextForm = {
      ...form, // 기존의 form 내용을 복사
      [e.target.name]: e.target.value, // 원하는 값으로 Update
    };
    setForm(nextForm);
  };

  const onClick = () => {
    console.log(username + message);
    setForm({
      username: '',
      message: '',
    });
  };

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

  return (
    <div>
      <h1>이벤트 연습</h1>
      <input
        type="text"
        name="username"
        placeholder="사용자명"
        value={username}
        onChange={onChange}
      />
      <input
        type="text"
        name="message"
        placeholder="아무거나 입력"
        value={message}
        onChange={onChange}
        onKeyPress={onKeyPress}
      />
      <button onClick={onClick}>확인</button>
    </div>
  );
};

export default EventPractice;