[리액트/React] 이벤트 처리

[리액트/React] 이벤트 처리

 이번 게시글에서는 리액트에서의 이벤트 처리에 대한 간단히 정리해볼 것입니다.

 

 저는 리액트에서 이벤트 처리는 HTML DOM에 기본적으로 내장된 리스너를 사용한다고 이해했습니다.

 

버튼 클릭 예제

예를 들어 버튼 클릭 시 로그를 띄우는 기능을 구현할 때, 버튼 태그에 onClick 속성을 추가하여 이 기능을 구현할 수 있습니다.

 

<button onClick={()=>{}}> 버튼 </button>

위 코드는 클릭했을 시 동작을 화살표 함수를 이용하여 나타내었습니다.

 

이 대신 함수를 정의하고 함수의 이름을 지정하여 사용도 가능합니다.

const CustomComponent = (props) => {
	const clickHandler = () => {
		console.log('클릭됨');
	};

	return (
		<button onClick={clickHandler}> 버튼 </button>
	);
}

 

버튼을 클릭하면 아래와 같이 로그가 찍히는 걸 확인할 수 있습니다.

 

이때 주의할 점은 onClick에 함수명만 지정해야 하지 ()를 포함하여 함수명()과 같이 지정하면 안 된다는 것입니다.

 

onClick에 함수명()이 아닌 함수명만 지정하는 이유

onclick = {clickHandler()} 와 같이 작성한다면, 페이지가 로딩될 때 함수가 호출되고 클릭 시에는 호출되지 않아 클릭하더라도 로그가 찍히지 않습니다.

 

 

버튼 클릭 시 버튼 내용 변경

버튼 클릭 시 버튼의 내용을 클릭됨!이라는 내용으로 변경하고 싶습니다.

 

현재 ‘버튼’이라는 내용을 let 변수로 저장한 뒤 버튼이 클릭되면 이 변수의 값을 변경하여 버튼 내용을 변경하도록 코드를 수정하였습니다.

 

const CustomComponent = (props) => {
	let buttonContent = '버튼';
	const clickHandler = () => {
		buttonContent = '클릭됨!';
	};

	return (
		<button onClick={clickHandler}> {buttonContent} </button>
	);
}

 

하지만 버튼을 클릭하더라도 버튼의 내용은 변경되지 않습니다. buttonContent의 값이 변경되지 않는 것일까요?

이를 console.log 함수를 이용하여 확인해 보겠습니다.

 

const CustomComponent = (props) => {
	let buttonContent = '버튼';
	const clickHandler = () => {
		buttonContent = '클릭됨!';
		console.log(buttonContent);
	};

	return (
		<button onClick={clickHandler}> {buttonContent} </button>
	);
}

 

 

 

이럴 수가! buttonContent는 정상적으로 변경되는 것을 확인할 수 있습니다.

 

왜 이런 일이 일어날까요? 다음 포스팅에서 알아보도록 하겠습니다.

 

참고

https://ko.reactjs.org/

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리