이 글은 Jake Trent의 Event handler naming in react를 번역한 내용입니다.

Jake(원작자)의 허락을 받은 후 작성되었으며, 이 글의 모든 저작권은 Jake에게 있습니다.
이해의 편의상 의역이 들어가 있습니다.

들어가기 전

React를 이용하여 작업 시, handler와 event 명명 규칙이 명확하지 않아서 코드가 쓸데없이 보기 힘들어지는 경우가 있습니다.
이에 대해 명확히 설명하는 공식 가이드가 마땅히 보이지 않아, 여러 글을 찾아봤고 Jake Trent의 포스트를 본 후 많은 도움이 되었습니다.
그렇기에 이 가이드를 준수하라는 내용이 아니며, 이러한 규칙에 대해서 생각하고 참고하시면 좋을 것 같습니다.

React의 이벤트 핸들러 네이밍 (Event handler naming in react)

Props의 경우 (For props)

Prop 이름을 정의할 때는 보통 onClick과 같이 on* 접두사를 지정합니다.
이것은 기본 제공되는 이벤트 핸들러 규칙과 일치합니다.
이를 통해 우리는 이런 props들이 비슷한 용도로 사용되는 이벤트 핸들러 기능을 수용할 것임을 선언합니다.

Function Names의 경우 (For Function Names)

이 경우에도 정확히 같은 패턴을 따릅니다.
하지만 on*을 handle*로 변경하여 handleClick과 같이 사용합니다.

위의 두 가지 경우를 함께 사용하면 아래와 같습니다.

<MyComponent onclick={this.handleClick} />

on 접두사가 붙은 경우, 이 Prop에 실제 이벤트가 연결되어 있다는 걸 뜻하고,
handle 접두사가 붙은 경우, 이벤트가 발생했을 때 호출되는 실제 Function을 의미합니다.

위에서 Click이라는 같은 동사를 사용한다는 것을 주목하세요.
예를 들면 클릭이 발생할 때 경고 대화상자가 닫히는 경우 handleClick 이 아닌 handleDismiss 또는 이와 유사한 이름의 함수로 호출할 수 있습니다.
하지만 onClick 그리고 handleClick 같이 동일한 Name의 Mapping을 함으로써, 종종 발생하는 의미에 대한 액션으로 인한 혼란을 줄여주고 식별을 쉽게 만들어 줍니다.

좀 더 복잡한 네이밍 (More Complicated Naming)

이벤트가 더 많고 핸들러가 더 많은 경우를 생각해보세요.

만약 Alert과 Form이 있다면, 다음과 같이 이름을 지정할 수 있습니다.

<MyComponent
  onAlertClick={this.handleAlertClick}
  onFormSubmit={this.handleFormSubmit}
/>

먼저, 명사를 맨 앞에 위치합니다.
그러고 나서 동사가 위치합니다.
그 후 이 개념을 중심으로 다른 이벤트가 추가될 경우, 알파벳 순으로 그룹화시킵니다.

<MyComponent
  onAlertClick={this.handleAlertClick}
  onAlertHover={this.handleAlertHover}
  onFormSubmit={this.handleFormSubmit}
/>

Component 분할 (Component Splitting)

Component의 분할은 많은 논의가 있는 주제이며, 이벤트 핸들러 네이밍과도 구체적으로 관련되어 있습니다.
그리고 Component에서 많은 이벤트 핸들러를 정의한 경우 추상화를 놓쳤기에 캡슐화가 필요할 가능성이 높습니다.
예를 들어 아래 Form.js Component를 살펴보겠습니다.

<Form
  onRegistrationSubmit={this.handleRegistrationSubmit}
  onLoginSubmit={this.handleLoginSubmit}
/>

Form Component를 두 개의 Component로 나누어 아래와 같이 이벤트 핸들러 이름을 간단하게 변경할 수 있습니다.

// RegistrationForm.js
<RegistrationForm onSubmit={this.handleRegistrationSubmit} />

// LoginForm.js
<LoginForm onSubmit={this.handleLoginSubmit} />

기본으로 제공되는 핸들러 이름 사용 (Using Built-in Handler Names)

React에는 여러 개의 기본 이벤트 핸들러가 내장되어 있습니다.
예를 들면 button의 onClick 그리고 form에 onSubmit 등이 있으며, 이들은 이벤트가 발생 될 때마다 실행됩니다.

하지만 당신이 이벤트 핸들러를 사용자 Component로 전달할 때, 이러한 이름 사용에 대해서 주의가 필요합니다.
문제를 야기하는 여러 가지 상황 중 한가지 예를 들어보자면, Props를 Spread operator로 사용했을 때입니다.

function MyComponent(props) {
  return <div {...props}><button onClick={props.onClick}>Button</button></div>
}

위처럼 Spread operator로 모든 Props를 div에 할당시켰을 때, 원치 않는 동작이 실행되게 됩니다.

위 코드의 경우 이벤트 버블링으로 인해 내부의 button의 onClick 이벤트가 먼저 실행된 후, div의 onClick 이벤트가 실행되게 됩니다.

마치며

명칭을 정할 때 항상 on과 handle 사용에 대해 혼란스러움이 조금 있었는데 이 포스트를 찾고 나서 어느 정도 정리가 되었습니다.
원글에서 유머나 이해하기 어려운 부분에 대해 제거하거나 의역된 부분이 있으므로 원글을 참고하시는 것도 좋을 듯합니다.
만약 다른 권하고 싶은 혹은 더 좋다고 생각하는 규칙이 있으시다면, 이 댓글이나 원글 주소의 댓글로 남겨주시면 감사드리겠습니다!

저작자표시