[React] Event 처리하는 방법

React에서 onClick 이벤트를 처리하는 방법이다.

Javascript 처럼 데이터를 가져와서 하는 방법도 있지만 아래와 같이 사용 할 수도 있다.

 

function App() {
	const noArgs = (e) => {
		e.target.innerText = 'noname';
	};

	//인수로 원하는 텍스트를 전달해서 변경 가능 하도록 코드 개선
	const handleClick = (e, txt) => {
		e.target.innerText = txt;
	};

	return (
		<div className='wrap'>
			{/* 첫번째 버튼 클릭 시 클릭한 버튼의 글자값을 '버튼'으로 텍스트 변경 */}
			<button id='button1' onClick={noArgs}>
				button1
			</button>

			{/* 인수를 전달해야되는 함수를 이벤트 연결 할때는 wrapping 함수로 아래처럼 호출 */}
			<button onClick={(e) => handleClick(e, 'Hello')}>button2</button>
		</div>
	);
}