이번 편에서는 HTML에서 이벤트를 작성하는 방법을 잠시 살펴본 후, React에서 이벤트를 작성하는 방법을 알아보겠습니다.
<button onclick="console.log('clicked!')">click!</button>
HTML에서는 이벤트를 위와 같은 형태로 작성합니다. 특징으로는 이벤트의 이름은 항상 소문자만 있습니다.
해당 태그를 클릭하면 발동하는 onclick 이벤트 외에 onmouseenter, onmouseleave 등 무수히 많은 다양한 이벤트가 있으며, input 태그는 onchange, onfocus, onblur 등 텍스트 입력와 관련한 이벤트를 추가적으로 사용할 수 있습니다.
이러한 이벤트는 유저와 상호작용하는 웹페이지, 더 나아가서는 웹앱을 구현할 때에 굉장히 중요하므로 필수적인 기능이자 개념이라 할 수 있습니다.
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} />
)
}
이 예시처럼 함수에 이름을 지어 이벤트에 전달하면 구현부를 보지 않아도 어떤 역할을 하는지 가늠할 수 있습니다.
이번 편에서 살펴본 이벤트는 사실 DOM Event이며, 디자인 패턴 중 일부인 Event와는 다른 부분이 있습니다. 조금 더 자세히 이해하고 싶다면 DOM에 대해 조금 더 알아보는 것을 권장합니다.
onClick, onMouseEnter와 같이 단어의 첫글자를 대문자로 표기하는 방식을 camelCase 표기법이라고 합니다. 낙타 등의 혹이 솟은 것과 비슷하다고 해서 붙은 이름입니다.
좋아요와 댓글 감사합니다.
오탈자, 질문 등은 언제든지 댓글로 달아주세요!