이번 편에서는 HTML에서 이벤트를 작성하는 방법을 잠시 살펴본 후, React에서 이벤트를 작성하는 방법을 알아보겠습니다.

HTML에서의 이벤트

<button onclick="console.log('clicked!')">click!</button>

HTML에서는 이벤트를 위와 같은 형태로 작성합니다. 특징으로는 이벤트의 이름은 항상 소문자만 있습니다.

해당 태그를 클릭하면 발동하는 onclick 이벤트 외에 onmouseenter, onmouseleave 등 무수히 많은 다양한 이벤트가 있으며, input 태그는 onchange, onfocus, onblur 등 텍스트 입력와 관련한 이벤트를 추가적으로 사용할 수 있습니다.

이러한 이벤트는 유저와 상호작용하는 웹페이지, 더 나아가서는 웹앱을 구현할 때에 굉장히 중요하므로 필수적인 기능이자 개념이라 할 수 있습니다.

React에서의 이벤트

import React from 'react'

const App = () => (
  <button onClick={event => console.log('clicked!')}>click!</button>
)

React에서의 이벤트는 앞서 알아본 HTML에서의 이벤트와 비슷한 형태로 작성할 수 있습니다.

HTML에서의 이벤트와 크게 다른 부분은 onClick , onMouseEnter , onMouseLeave , onChange 등과 같이 단어의 첫부분은 대문자이고, 함수 를 전달해야 한다는 것입니다.

Chrome에서 버튼을 클릭하면 clicked! 라는 메시지가의 DevTools의 콘솔console창에 나타나는 것을 볼 수 있습니다.

위 코드에서는 event라는 파라미터는 사용하지 않았지만, 이벤트가 발동하면 받을 수 있는 파라미터입니다. 해당 이벤트에 대한 데이터를 가지고 있는 객체입니다.

import React from 'react'

const App = () => (
  <input type='text' onChange={event => console.log(event.target.value)} />
)

위 예시처럼 input 태그의 onChange 이벤트에 함수를 전달하면 유저가 텍스트를 입력할 때 마다 바뀐 텍스트를 받을 수 있습니다.

작성 가이드

import React from 'react'

const App = () => (
  <input type='text' onChange={event => {
    const nickname = event.target.value
    console.log(nickname)
    console.log('nickname length: ', nickname.length)
  }} />
)

이벤트에 직접 함수를 작성하면 그 당시에는 편하지만, 다른 사람과 협업을 하거나 나중에 다시 읽을 때에는 의미를 이해하기 어렵다는 이슈가 있습니다. 무엇인가 나은 방법이 필요합니다.

import React from 'react'

const App = () => {
  const logNickname = event => {
    const nickname = event.target.value
    console.log(nickname)
    console.log('nickname length: ', nickname.length)
  }

  return (
    <input type='text' onChange={logNickname} />
  )
}

이 예시처럼 함수에 이름을 지어 이벤트에 전달하면 구현부를 보지 않아도 어떤 역할을 하는지 가늠할 수 있습니다.

못다한 이야기

1. 이번 편에서 살펴본 이벤트는 사실 DOM Event이며, 디자인 패턴 중 일부인 Event와는 다른 부분이 있습니다. 조금 더 자세히 이해하고 싶다면 DOM에 대해 조금 더 알아보는 것을 권장합니다.

2. onClick, onMouseEnter와 같이 단어의 첫글자를 대문자로 표기하는 방식을 camelCase 표기법이라고 합니다. 낙타 등의 혹이 솟은 것과 비슷하다고 해서 붙은 이름입니다.