[React] 컴포넌트 Event처리

컴포넌트 내 Event 지정

- JSX 상에서, "onClick={실행하고 싶은 함수명}"을 지정해주고, 컴포넌트 내에서 함수를 구현한다.
- onClick={ onIncrease }   // 맞는 문법 

- onClick={ onIncrease() } // 틀린 문법

- onChange= { onChange }

- const onChange = (e) => { setText(e.target.value); }; 처럼 event 객체를 받아서 Dom의 속성값에 접근 가능

import React, { useState } from 'react'; // react 패키지에서 useState 함수 불러옴 

function Counter() {
    const [val, setVal] = useState(0);   // 0은 변수 상태깂의 default 초기값
    const onIncrease = () = {
    	setVal(val + 1);
        // setVal(prevVal => prevVal + 1);
    }
    const onDecrease = () => {
    	setVal(val - 1);
        // setVal(prevVal => prevVal - 1);
    }
    
    const [text, setText] = useState("초기값입니다.");
    const onChange = (e) => {
    	setText(e.target.value); // e.target은 이벤트가 발생한 DOM을 가리킵니다.
    };
    const onReset = (e) => {
    	setText('');
    };
    return (
    	<div>
        	<h2> { val } </h2>
        	<button onClick={onIncrease}> +1 </button> // ★
            <button onClick={onDecrease}> -1 </button>
          
            // Input의 상태 저장이 필요할 경우
            <input onChange={onChange} value={text}/>  // ★
            
            <button onClick={onReset}> 초기화 </button>
        </div>
    );
}

- e.target은 이벤트가 발생한 DOM을 가리키고, e.target.value를 통해, 현재 input의 value값을 알 수 있다.