리액트 기초 ( 이벤트 핸들링 )

이벤트란?

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

주의사항

• 이벤트 이름은 카멜 표기법으로 작성합니다
  • onClick, onKeyUp 등
• 이벤트 실행은 함수를 전달합니다

  • const [messege,setMessege] = useState(""); 
    const Hi = () => { setMessege("안녕하세요") };
    <div>{messege}</div>
    <button onClick={Hi}></button>;

• DOM 요소에만 사용할 수 있습니다.

이벤트 종류

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

이벤트객체
이벤트객체는 발생한 이벤트의 정보를 담고있습니다.

<input type="text" name="txt"  onChange={(e)=>{console.log()}}></input>

또한, 브라우저의 네이티브 이벤트와 다르게 이벤트가 끝나고나면 초기화됩니다.

만약 비동기적으로 이벤트객체를 참조할 일이 있다면 e.persist() 함수를 알아보세요

클래스형, 함수형 이벤트 핸들링

클래스형 이벤트 핸들링

export class Event extends Component {
  state = {
    message: "초기값",
  };

  render() {
    return (
      <div>
        <input
          type="text"
          name="message"
          value={this.state.message}
          onChange={(e) => {
            this.setState({ message: e.target.value });
          }}
        ></input>
        <div>{this.state.message}</div>
      </div>
    );
  }
}

위와같은 방식은 코드가 지저분해보일 수 있습니다. 임의메서드로 변경해보겠습니다.

export class Event extends Component {
  state = {
    message: "초기값",
  };

  constructor(props) {
    super(props);
    this.saveMessage = this.saveMessage.bind(this); // 함수 바인딩작업
  }

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

  render() {
    return (
      <div>
        <input
          type="text"
          name="message"
          value={this.state.message}
          onChange={this.saveMessage}
        ></input>
        <div>{this.state.message}</div>
      </div>
    );
  }
}

this 는 함수 호출에 따라 바인딩이 결정되는데, 임의메서드가 특정 HTML 요소의 이벤트로 등록되는 과정에서 메서드와 this의 관계가 끊어져버립니다.

이때문에 this가 컴포넌트 자신을 가리키기위해 메서드를 this와 바인딩하는 작업이 필요합니다. 하지않으면 undefiend를 가리키게 됩니다.

위와같은 방법은 너무 번거롭습니다. 새로운 메서드를 만들때마다 생성자를 수정해야하기 때문이죠. 바벨의 transform-class-properties 문법을 사용하면 간단해집니다.

바벨 사용예시

	생성자 필요없음
	saveMessage = (e) => {
    	this.setState({
        	massage : e.target.value
        })
    }

input 여러 개 다루기

input이 여러 개 있다면, e.target.name 값을 이용하면 됩니다.

	this.state = {
    	message : "",
      	name : ""
    }	

	saveMessage = (e) => {
    	this.setState({
        	[e.target.name] : e.target.value
        })
    }
    
    <input type="text" name="message" onChange={this.saveMessage}/>
    <input type="text" name="name" onChange={this.saveMessage}/>

중요! 객체의 key 를 [ ] 로 감싸면 [ ] 안에 넣은 변수의 "값"이 key 로 사용됩니다.

	const ref = 'coffee';
	const obj = {[ref]:'맛있는 커피~'}
    console.log(obj)
	
	//{coffee:'맛있는 커피~}

함수형 이벤트 핸들링

const FnEvent = () => {
  //   const [username, setUserName] = useState("username");
  //   const [message, setMessage] = useState("message");

  const [form, setFrom] = useState({
    username: "username",
    message: "message",
  });

  const onChangeFrom = (e) => {
    const transferForm = { ...form, [e.target.name]: e.target.value };
    setFrom(transferForm);
    console.log(form);
  };

  return (
    <div>
      <input type="text" name="username" onChange={onChangeFrom}></input>
      <input type="text" name="message" onChange={onChangeFrom}></input>
    </div>
  );
};