June Dev Blog

Coding/React.js 2019. 11. 26. 16:58

velopert님의 리액트를 사용하는 기술 교재로부터 공부한 내용임을 밝힙니다😀

React 이벤트 처리

안녕하세요 😀

이번 포스팅에서는 리액트에서의 이벤트 처리에 대해 다뤄보겠습니다

리액트에서의 렌더링 부분은 HTML과 굉장히 유사한 부분이 많은데요. 리액트에서의 이벤트 처리 역시 HTML에서의 이벤트 처리와 비슷한 부분이 많지만, 조금씩 다른 부분이 있어 조심히 다뤄야 합니다.

우선 다음 두 코드를 볼까요!

HTML

<!Doctype html>
<html>
...
<body>
	<button onclick="alert("하이")">버튼</button>
</body>
</html>

React

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

두 코드는 같은 버튼을 생성하지만, 약간의 차이점이 느껴시나요?

1. onclick 전달 방식

우선, HTML의 경우, onclick에서 아예 alert 메시지 박스를 받는 함수를 작성하여 연결받을 수 있습니다.

하지만 리액트의 경우 함수가 {}로 감싸져 있는 것이 보이시나요?

리액트는 렌더링 할 것을 전달 할 때는 객체 형식으로 받아야만 한다고 지이난 포스팅에서 언급했던 적이 있습니다.

따라서, 한 줄의 코드로 작성된 함수를 사용하더라도, 미리 만들어 놓고 객체 형식의 함수로 전달을 해야 한다는 점이에요!

2. 카멜 표기법으로 작성한다

HTML -> onclick

React -> onClick

이렇듯 리액트에서의 이벤트 처리는 카멜 표기법으로 작성이 되어야 합니다.

3. DOM 요소에만 이벤트를 설정할 수 있다.

리액트는 항상 DOM 요소에 해당하는 컴포넌트에만 이벤트 처리가 가능합니다.

HTML의 경우 대부분의 컴포넌트에 onclick 같은 이벤트 처리 할당이 가능하지만, 리액트에서는 정해진 것만 가능합니다.

따라서, 만약에 DOM 요소에 해당하지 않는 onClick에 함수 형태의 객체를 전달해 봤자, 이벤트 처리가 되는 것이 아니라 그저

onClick이라는 props에 객체가 전달될 뿐입니다.

다음 포스팅에서는 이 이벤트 처리를 실제로 다루어 보도록 하겠습니다.