[포스코x코딩온] React 03 Event Handling

이미 나도 모르게 쓰고 있었다. 생각보다 별 거 없으니 쫄지 말 것.

Synthetic Event는 이벤트가 너무 많아서 찾아보면서 사용하고, 익혀야 할 것 같다. 

Event Handling

html Event : <button onclick="activeEvent();">

react event : <button onClick={activeEvent}>

• 괄호x
• 카멜케이스
• 함수 이름 자체 전달. 기본 dom 요소에만 이벤트 설정 가능
• synthetic Event : 웹브라우저에서 사용하는 기본 이벤트를 감싸는 새로운 기능, =리액트 고유 이벤트 객체 

 

Synthetic Event

이벤트 핸들러는 모든 브라우저에서 이벤트를 동일하게 처리하기 위해 이벤드 래퍼 SyntheticEvent 객체를 전달 받는다. 

=리액트 고유 이벤트 객체 

import { useState } from 'react';

function SyntheticEvent2() {
  const [text, setText] = useState('');

  function printInputValue(e) {
    console.log(e.target.value);
    setText(e.target.value);
  }

  return (
    <div>
        {/* onChange 사용 */}
      <input type="text" placeholder="아무거나 입력!" onChange={printInputValue}/>
      <h3>{text}</h3>
    </div>
  );
}

export default SyntheticEvent2;

https://ko.legacy.reactjs.org/docs/events.html

 

클래스 컴포넌트 코드 

• this 사용 (=state, props 동일)

import React from 'react';

class Handler extends React.Component {
  constructor() {
    super();
    //state 오브젝트
    this.state = {
      text: 'Feel',
    };
  }

  good = () => {
    // setState에 함수 넣어서 값 변경
    this.setState({ text: 'Good' });
  };

  render() {
    // 객체 구조 분해 할당
    const { text } = this.state;

    return (
      <>
        <h3>{text}</h3>
        <button onClick={this.good}>👍</button>
        // 화살표 함수 사용
        <button onClick={() => this.setState({ text: 'Bad' })}>👎</button>
      </>
    );
  }
}

export default Handler;

 

함수 컴포넌트 코드

• 함수형 컴포넌트에서의 이벤트
  • 함수에 인자가 있는 경우
  • 함수에 인자가 없는 경우

import { useState } from 'react';

const Counter = () => {
  const [number, setNumber] = useState(0);

  const increase = () => {
    setNumber(number + 1);
  };

  const alertMsg =(msg)=>{
    alert(`${msg} 현재 숫자는 ${number}입니다!`);
  }

  const consoleMsg = (e, msg)=>{
    console.log(e.target);
    console.log(`${msg} 현재 숫자는 ${number}입니다`)
  }

  return (
    <>
      <div>숫자 카운터</div>
      <h1>{number}</h1>

      {/* 함수형 컴포넌트에서 이벤트 */}
      {/* 1. 인자가 없는 경우, 함수 이름만 전달 */}
      <button onClick={increase}>더하기</button>
      
      {/* 2. 인자가 있는 경우 : 함수를 익명 화살표 함수로 감싸서 처리  */}
      <button onClick={()=> alertMsg('hello')}>alert 띄우기</button>
      
      {/* 3. */}
      <button onClick={(e)=> consoleMsg(e,'hello')}>console 출력</button>

      
    </>
  );
};
export default Counter;