리액트가 전반적으로 사용자의 UI와 밀접한 관계를 갖고 있기 때문에 당연히 이벤트 핸들링과도 깊은 연관이 있습니다. 그렇기에 다음 단계로 넘어가기 전에 간단하게 리액트의 이벤트 처리를 알아보고 넘어가겠습니다.

이벤트

이벤트는 브라우저 내에서 일어나는 모든 행동들 입니다. 클릭하거나, 스크롤하거나, 드래그하거나, 접속하거나, 페이지가 로딩되는 것도 이벤트입니다. 좀 더 전문적으로 이야기 하자면 사용자가 DOM과 상호 작용하게되는 행동들을 이벤트라고 합니다.

리액트도 사용자 UI의 View를 담당하는 만큼 사용자와의 상호작용이 가장 먼저, 많이 일어나게 됩니다. 리액트가 지원하는 이벤트로는 Focus, Keyboard, Mouse, Touch, Wheel, Media, Image 등 수많은 이벤트가 있으며 리액트 이벤트의 종류는 공식 문서에서 더 많은 것을 확인할 수 있습니다.

리액트 이벤트 작성의 주의사항

리액트의 이벤트 작성은 html에서 이벤트를 주는 것과 유사합니다. 하지만 다른점이 몇가지 있기에 그 점을 주의해야합니다.

이벤트 이름은 camelCase를 이용한다.

html에서는 이벤트를 등록할 때 다음과 같이 작성했었습니다.

<button onclick = ""></button>

하지만 리액트에서 이벤트는 onClick, onKeyDown과 같은 형태로 camelCase의 형태를 따라서 전달해줍니다.

이벤트에 자바스크립트 코드가 아닌 함수 형태로 값을 전달한다.

html에서 이벤트를 전달할 때 큰 따옴표에 자바스크립트 코드를 넣어서 전달했지만 리액트에서는 함수 형태로된 객체를 전달해서 이벤트를 처리합니다.

<button onClick={onClick} />
{/* 중괄호 내부의 onClick은 전달하는 객체의 이름입니다./*}

DOM 요소에만 이벤트를 넣을 수 있다.

DOM 요소에만 이벤트를 전달할 수 있습니다. 이 뜻은 우리가 직접 만들어낸 컴포넌트에는 이벤트를 따로 설정할 수 없다는 것입니다. 하지만 컴포넌트에 이벤트를 직접 할당할 수 없다는 뜻이지, 컴포넌트에 props로 이벤트를 전달해서 컴포넌트 내부에서 처리하는 방식으로 이벤트를 처리할 수 있습니다.