한 입 크기로 잘라먹는 리액트Table Of Contents
이벤트란 웹 페이지에서 일어나는 사용자의 행위입니다. 버튼 클릭, 페이지 스크롤, 새로고침 등이 이런 행위에 해당합니다. 따라서 사용자가 버튼을 클릭하면 버튼 클릭 이벤트, 텍스트를 입력하면 텍스트 변경 이벤트가 발생했다고 표현합니다.
이번 절에서는 리액트에서 어떻게 이벤트를 처리하는지 살펴보겠습니다.
이벤트 핸들링과 이벤트핸들러
이벤트 핸들링은 이벤트가 발생하면 특정 코드가 동작하도록 만드는 작업입니다. 버튼을 클릭했을 때 경고 대화상자를 브라우저에 표시하는 동작이 이벤트 핸들링의 대표적인 예입니다.
다음은 리액트를 사용하지 않고 HTML과 자바스크립트만으로 이벤트를 핸들링하는 예입니다.
코드를 불러오는 중 입니다 ...① 페이지의 버튼 요소를 클릭하는 이벤트가 발생하면, 함수 handleOnClick을 실행합니다.
이 코드는 페이지의 버튼을 클릭하는 이벤트가 발생하면, 함수handleOnClick을 실행해 경고 대화상자를 페이지에 표시합니다. 이때 함수 handleOnClick을 이벤트를 처리하는 함수라는 의미에서 ‘이벤트 핸들러’라고 합니다.
리액트의 이벤트 핸들링
리액트에서는 어떻게 이벤트를 핸들링하는지 살펴보겠습니다. Body 컴포넌트에 버튼을 하나 만들고, 버튼을 클릭하는 이벤트가 발생하면 실행되는 이벤트 핸들러를 만들겠습니다.
Body 컴포넌트를 다음과 같이 수정합니다.
코드를 불러오는 중 입니다 ...① 함수 handleOnClick을 선언합니다. 이 함수는 이벤트 핸들러로서 “버튼을 클릭하셨군요!”라는 메시지를 담은 대화상자를 띄워 이벤트를 처리합니다. ② 버튼을 하나 생성합니다. 이 버튼을 클릭하면 클릭 이벤트를 처리하는 이벤트 핸들러 함수 handleOnClick을 호출합니다.
저장한 다음, 페이지에서 버튼을 클릭합니다.
“버튼을 클릭하셨군요!”라는 메시지 대화상자가 나타납니다.
리액트의 이벤트 핸들링은 HTML의 이벤트 핸들링과 흡사하지만, 차이점이 몇 가지 있습니다. 먼저 이벤트 핸들러 표기에서 HTML은 onclick이지만 리액트는 카멜 케이스 문법에 따라 onClick으로 표기합니다.
그리고 Props로 전달할 값을 지정할 때처럼 onClick={} 문법으로 이벤트 핸들러를 설정합니다. 또한 이벤트 핸들러를 설정할 때는 함수 호출의 결괏값을 전달하는 것이 아니라 콜백 함수처럼 함수 그 자체를 전달합니다.
코드를 불러오는 중 입니다 ...HTML, 자바스크립트에서는 이벤트 핸들러를 설정할 때 함수를 호출 하듯 소괄호를 붙여 주었습니다. 그러나 리액트에서는 Props의 값을 설정할 때처럼 소괄호 없이 함수 이름만 명시합니다.
이벤트 객체 사용하기
리액트에서는 이벤트가 발생하면 이벤트 핸들러에게 이벤트 객체를 매개변수로 전달합니다. 이벤트 객체에는 이벤트가 어떤 요소에서 어떻게 발생했는지에 관한 정보가 상세히 담겨 있습니다.
이번에는 Body 컴포넌트에 2개의 버튼을 만들고, 이벤트가 발생하면 클릭한 버튼의 이름을 콘솔에 출력하겠습니다. Body 컴포넌트를 다음과 같이 수정합니다.
코드를 불러오는 중 입니다 ...① 버튼 이벤트 핸들러 handleOnClick을 생성합니다. 이 함수는 이벤트 객체(e)를 매개변수에 저장 하고, 해당 객체의 target.name 프로퍼티 값을 콘솔에 출력합니다. ② A 버튼을 만듭니다. 이 버튼의 name 속성은 A버튼입니다. 클릭 이벤트 핸들러로 handleOnClick 을 설정합니다. ② B 버튼을 만듭니다. 이 버튼의 name 속성은 B버튼입니다. 클릭 이벤트 핸들러로 handleOnClick 을 설정합니다.
이벤트 객체의 target 프로퍼티에는 이벤트가 발생한 페이지의 요소(여기서는 버튼)가 저장됩니다. 따라서 A 버튼을 클릭하면 e.target에는 A 버튼이 저장되고, B 버튼을 클릭하면 e.target에는 B 버튼이 저장됩니다. 따라서 함수 handleOnClick에서 e.target.name을 콘솔에 출력하면 현재 이벤트가 발생한 요소의 name 속성값을 출력하게 됩니다.
저장하고 페이지에서 A 버튼과 B 버튼을 번갈아 한 번씩 클릭합니다.
버튼을 클릭하면 클릭한 버튼의 이름이 콘솔에 출력됩니다.
이벤트 객체는 이벤트를 처리하는 데 필요한 많은 정보를 담고 있습니다. 이벤트 객체에 정확히 어떤 값들이 저장되어 있는지 알아보기 위해 Body 컴포넌트에서 작성한 함수 handleOnClick을 다음과 같이 수정합니다.
코드를 불러오는 중 입니다 ...① 함수 handleOnClick을 실행했을 때 매개변수에 저장되는 이벤트 객체 e를 콘솔에 출력합니다.
페이지에서 A 버튼을 클릭하고 콘솔에 출력되는 이벤트 객체를 확인합니다.
콘솔에 출력된 이벤트 객체를 살펴보면 상당히 많은 프로퍼티가 저장되어 있음을 알 수 있습니다. 그러나 아주 복잡한 이벤트 처리가 아니라면 실무에서는 대체로 1~2개의 값만 활용하므로 이 값들을 모두 상세히 알 필요는 없습니다.