[React] 이벤트 핸들러 네이밍

EVENT HANDLER NAMING IN REACT

 

리액트 공부를 하면서, 이름을 짓는 건 너무나 어려운 문제다. 앞으로는 고민할 일이 없도록 정리해야겠다는 생각이 들었다.

 

Props

props 이름을 정의할 때에는 on* 접두사를 붙여서 작성한다. 예를들면, onClick 이다.

기본적으로 제공되는 event handler naming 규칙과 일치하며, on* 은 어떠한 이벤트가 연결된다는 것을 의미한다.

 

 

Function

handle* 로 작성한다. 예를들면, handleClick 이다. 

handle* 는 이벤트가 발생했을 때 어떤 것이 호출되는지를 의미한다. 

<MyComponent onClick={handleClick} />

 

복잡한 경우의 네이밍

위의 경우보다 좀더 복잡한 경우에 네이밍(naming) 을 하는 경우에는 접두사 + 명사 + 동사 순서로 작성한다. 

앞에 handle 이 붙는 건 고정이다. 

handleChangeButton, handleAlertClick, handleFormSubmit 처럼 작성한다. 

 

 

컴포넌트 분할

컴포넌트 분할은 하나의 모듈에 이벤트 핸들러가 많이 등록된 경우, 컴포넌트 분할에 대해 생각해봐야 한다. 

예를 들어, form.js 라는 파일에 onRegistrationSubmit, onLoginSubmit 이 있다면, 2개의 컴포넌트 파일로 분할할 수 있다. 

Registration-form.js 와 login-form.js 로 말이다. 

 

 

Built-in 핸들러 이름 사용 

React 에는 onClicke 과 onSubmit 과 같은 여러 이벤트 핸들러가 내장되어 있다. 기본 내장 핸들러가 props 로 전달할 경우, button 컴포넌트를 클릭했을 때, <div> 컴포넌트도 클릭되는 이벤트가 발생할 수 있다. 

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

 

출처

jaketrent.com/post/naming-event-handlers-react