이벤트 처리하기

onClick

React에서는 JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다.

<button onClick={() => alert('hello')}>Submit</button>

위의 코드는 onClick의 객체로 lambda함수를 넣어서 Submit 버튼을 클릭했을 때 'hello'라는 문자가 뜨도록 하는 코드입니다.

주의!

<button onClick={alert('hello')}>Submit</button>

만약 위의 코드처럼 onClick 객체에 함수가 아니라 javascript코드를 바로 쓰게되면 처음에 렌더링이 될 때 버튼을 누르지 않아도 바로 alert함수가 바로 실행되고, 나중에 Submit 버튼을 눌렀을 때 alert 함수가 실행되지 않기 때문에 주의해야 합니다. 항상 함수가 들어갈 수 있도록 코드를 작성해야 합니다.

const onSubmit = () => {
	alert('submitted');
};

return (
	<button onClick={onSubmit}>Submit</button>
)

다른 방법으로는 위의 코드처럼 onSubmit이라는 함수를 따로 만들어 준 후 onClick의 객체 부분에 넣어줘도 이벤트 처리가 잘 수행됩니다.

onKeyUp

onKeyUp은 키보드를 누르고 나서 키보드가 올라올 때 지정한 함수가 실행되는 이벤트 입니다.

const onKeyUp = () => {
	console.log('key up');
};

return (
	<input onKeyUp={onKeyUp}/>
}

키보드를 누를 때마다 'key up'이라는 문구가 console 창에 뜨도록 이벤트를 설정하면, 다음과 같이 hello를 타이핑 했을 때 console 창에 5번의 'key up' 로그가 기록됩니다.

• 엔터를 이용해 submitted 알림 띄우기

function App() {
  
  const onSubmit = () => {
    alert('submitted');
  };

  const onKeyUp = (event) => {
    // 'enter'키의 keycode는 13
    if (event.keyCode === 13) {
      onSubmit();
    }
  };

  return (
    <div className="App">
      <input onKeyUp={onKeyUp} />
      <button onClick={onSubmit}>Submit</button>
    </div>
  );
}

'enter'의 keycode가 13임을 이용하여, 엔터키가 눌렸을 때 onSubmit 함수가 실행되도록 합니다.