이 글은 Jake Trent의 Event handler naming in react(https://jaketrent.com/post/naming-event-handlers-react/)를 번역한 내용입니다. React를 이용하여 작업 시, handler와 event 명명 규칙이 명확하지 않아서 코드가 쓸데없이 보기 힘들어지는 경우가 있습니다. 이에 대해 명확히 설명하는 공식 가이드가 마땅히 보이지 않아, 여러 글을 찾아봤고 Jake Trent의 포스트를 본 후 많은 도움이 되었습니다. 그렇기에 이 가이드를 준수하라는 내용이 아니며, 이러한 규칙에 대해서 생각하고 참고하시면 좋을 것 같습니다. - Props의 경우 (For props) Prop 이름을 정의할 때는 보통 onClick과 같이 on* 접두사를 지정합니다. - Function Names의 경우 (For Function Names) 이 경우에도 정확히 같은 패턴을 따릅니다. 하지만 on*을 handle*로 변경하여 handleClick과 같이 사용합니다. - 좀 더 복잡한 네이밍 (More Complicated Naming) 먼저, 명사를 맨 앞에 위치합니다.그러고 나서 동사가 위치합니다. 그 후 이 개념을 중심으로 다른 이벤트가 추가될 경우, 알파벳 순으로 그룹화시킵니다. ``` <MyComponent onAlertClick={this.handleAlertClick} onAlertHover={this.handleAlertHover} onFormSubmit={this.handleFormSubmit} /> ``` - Component 분할 (Component Splitting) 예를 들어 아래 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 이벤트가 실행되게 됩니다.