[React] #6 이벤트 처리(Event Handling) - onClick, onChange

리액트에서 이벤트를 처리하는 방식

• 미리 함수를 만들어두고, 전달하면 된다

버튼 2개를 만들어서,
이름을 보여주는 함수와
console창에 나이를 출력하는 함수를 만들어보려한다.

onClick 예시

export default function Hello() {
  function showName() {
    console.log("Mike");
  }
  function showAge(age) {
    console.log(age);
  }
  
  return(
    <div>
    	<h1>Hello</h1>
    	// 방법1 
    	<button onClick={showName}>Show name</button>
		// 방법2 : 내부에 함수 직접 작성 
		// 장점 : 매개변수 전달하기가 쉽다
    	<button
			onClick={() => {
              showAge(10);
            }}
            >Show age</button>
	</div>
    );
}

onClick={showName} : 함수명만 적어준다. 문자열이 아니기 때문에 {}로 묶어주는 것

• 괄호를 넣으면 {showName()} 은 '함수가 반환한 값'이 되니, 이 예시에서는 undefined가 되어 원하는 결과가 나오지 않는다.

onChange 예시

// Hello.js
// .. 생략
function showText(event) {
  console.log(event.target.value);
}

return(
// .. 생략
  // 한 글자씩 작성할 때마다 log가 찍힌다
<input type="text" onChange={showText} />

);
                

target은 input 태그를,
value는 input에 작성한 값을 의미한다.

onClick과 onChange의 차이

input 안의 값이 바뀔 때마다 이를 반영해야하므로 onChange를 사용한다

• (추가예시) 버튼을 누를 때마다 1씩 증가하거나, on/off를 반복하는 경우에 onChange를 사용할 수 있다.

onChange 다른 방식

방법1

// .. 생략
// 함수를 생략해도 된다
// function showText(e) {
//   console.log(e.tartget.value);
//}

return (
  // .. 생략
  // onChange를 내부에 구현하는 방법
  <input type="text"
  onChange={(e) => {
  	console.log(e.target.value)
}} />
	// .. 생략
  );

방법2

// .. 생략
// txt 매개변수로 출력
 function showText(txt) {
   console.log(txt);
}

return (
  // .. 생략
  // onChange를 내부에 구현하고
  // 함수에 txt 매개변수를 전달
  <input type="text"
  onChange=(e => {
  	const txt = e.tartget.value;
  	showText(txt);
}} />
	// .. 생략
  );