[React] React Event

React Event

• 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하여 사용방법이 유사함

---

이벤트 사용시 유의사항

• 이벤트 이름 : CamelCase 표기법 사용
• 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아닌, 함수 형태의 값을 전달해줌

// 1. 외부에서 함수 생성 후 호출
const Func=()=> {}

<button onCick={Func}></button>

// 2. 태그 내에서 함수를 만들어 사용
	<button onCick={()=>{console.log(1);
			}}></button>

• DOM요소에만 이벤트를 설정할 수 있고, 직접 만든 컴포넌트 요소에는 이벤트를 자체적으로 설정할 수 없음

	// 직접 사용 불가
      <Color onClick={func}/>
// 전달받은 props를 컴포넌트 내부의 DOM 이벤트로 설정 가능
	<div onClick={this.props.onClick}></div>

---

 Sources

• 클래스 컴포넌트 활용 input 입력 출력
  

  import { Component } from 'react';
  
  class EventFunc extends Component {
    state = {
      name: '',
      message: '',
    };
  
    mChange = (e) => {
      this.setState({ [e.target.name]: e.target.value });
    };
    mPress = (e) => {
      e.key === 'Enter' ? console.log('enter') : console.log('press');
    };
    render() {
      return (
        <>
          <p>{this.state.message}</p>
          {/* this를 컴포넌트자신을 가리킬 수 있도록 메서드와 바인딩 필요 */}
          <input type='text' name='message' value={this.state.msg} onChange={this.mChange} onKeyDown={this.mPress} />
          <button>Press</button>
        </>
      );
    }
  }
  
  export default EventFunc;

• 함수형 컴포넌트 input 입력 출력
  

  import { useState } from 'react';
  
  const EventFunc = () => {
    const [txt, setTxt] = useState({
      name: '',
      msg: '',
    });
    const { name, msg } = txt;
  
    const mChange = (e) => {
      const undateTxt = {
        ...txt,
        [e.target.name]: e.target.value,
      };
      setTxt(undateTxt);
    };
    return (
      <>
        <p>
          {name} / {msg}
        </p>
        <input type='text' name='name' value={name} onChange={mChange} />
        <input type='text' name='msg' value={msg} onChange={mChange} />
      </>
    );
  };
  
  export default EventFunc;​