React Event

리액트의 이벤트 처리 방식은 아래 몇 가지 차이를 제외하고는 DOM의 이벤트 처리 방식과 유사하다.

• React에서 이벤트는 소문자 대신 카멜케이스(camelCase)를 사용한다.
• JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수를 전달한다.

리액트 이벤트 예시 
<button onClick={handleEvent}>Event</button>

🚫 주의 🚫
onClick={handleEvent()} 함수를 실행하는 형식으로 넣어주면 렌더링되는 시점에서 함수가 호출되버리기 때문에 이와 같이 사용하지 않도록 주의해야한다.

onChange

onChange 이벤트는 변화가 일어났을 때 발생하는 이벤트이다. 보통은<input> <textarea> <select> 같은 폼(Form) 엘리먼트는 사용자의 입력값을 제어하는 데 사용한다. React 에서는 이러한 변경될 수 있는 입력값을 일반적으로 컴포넌트의 state 로 관리하고 업데이트합니다.

onClick

onClick 이벤트는 말 그대로 사용자가 클릭이라는 행동을 하였을 때 발생하는 이벤트이다. 보통 <button>이나 <a> 태그를 통한 링크 이동 등에 사용한다.

버튼을 누르면 숫자가 바뀌는 Counter 컴포넌트를 예를 들면 <button> 태그에 onClick을 사용하고 onIncrease ,onDecrease함수를 연결했다.

import React from 'react';

function Counter() {
 const onIncrease = () => {
   console.log('+1')
 }
 const onDecrease = () => {
   console.log('-1');
 }
 return (
   <div>
     <h1>0</h1>
     <button onClick={onIncrease}>+1</button>
     <button onClick={onDecrease}>-1</button>
   </div>
 );
}

export default Counter;

함수형 업데이트

업데이트 하고 싶은 새로운 값을 파라미터로 넣어주는 방법이 아닌 , 기존 값을 어떻게 업데이트 할 지에 대한 함수를 등록하는 방식으로도 값을 업데이트 할 수 있다.

// 새로운 값을 파라미터로 넣어주는 방법
function Counter() {
  const [number, setNumber] = useState(0);

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

  const onDecrease = () => {
    setNumber(number - 1);
  }
}


// 함수형 업데이트 
function Counter() {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(prevNumber => prevNumber + 1);
  }

  const onDecrease = () => {
    setNumber(prevNumber => prevNumber - 1);
  }