이벤트 핸들러 네이밍 on vs handle

이번 글에서는 이벤트 핸들러 이름을 지을 때 어떤 규칙이 있는지 정리해보았다.
어떤 경우에 handle* 을 쓰고 on* 을 쓰는지 알아보자.

리액트 이벤트 핸들러 네이밍

Prop Names

prop 이름을 정할 때 보통 onClick과 같이 on* 접두사를 사용한다. 리액트 빌트인 이벤트 핸들러 규칙과 같다.

Function Names

function name은 handleClick과 같이 handle* 로 사용한다.

이 두 가지를 다음과 같이 사용할 수 있다.

<MyComponent onClick={handleClick} />

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

click 동사는 클릭했을 때 어떤 일이 일어나는지에 따라 달라질 수 있다.
클릭이 발생했을 때, alert 창을 닫는 이벤트가 발생한다면, handleDismiss 같은 함수 이름을 사용할 수 있다.

더 복잡한 네이밍

예를 들어, alert와 form이 있으면, 네이밍을 다음과 같이 할 수 있다.

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

명사(Alert) + 동사(Click) 순으로 쓸 수 있다.

그 후 이 개념을 중심으로 다른 이벤트가 추가될 경우, 알파벳 순으로 그룹화할 수 있다.

<MyComponent
 onAlertClick={handleAlertClick}
 onAlertHover={handleAlerHover}
 onFormSubmit={handleFormSubmit}
/>

컴포넌트 분할

한 모듈에 많은 이벤트 핸들러가 정의되어 있다면, 분할해야 하는건 아닌지 확인할 필요가 있다.

예를 들어 아래와 같이 form.js 파일에 두 개의 핸들러가 정의 되어 있다고 한다면,

function App() {
    const handleRegistrationSubmit = () => {}
    const handleLoginSubmit = () => {}
     return (
        <Form 
            onRegistrationSubmit={handleRegistrationSubmit}
            onLoginSubmit={handleLoginSubmit}
        />    
    )
}

이를 두 개의 파일로 쪼갤 수 있다.

function App() {
    const handleRegistrationSubmit = () => {}
    const handleLoginSubmit = () => {}
     return (
        <RegistrationForm 
          onSubmit={handleRegistrationSubmit}
        />
        <LoginForm
          onSubmit={handleLoginSubmit}
        />
    )
}

이렇게 컴포넌트를 쪼개게 되면,

수정, 재사용이 용이하고 서로 관련있는 것들끼리만 모여 있기 때문에 응집력을 높일 수 있고, 컴포넌트 간의 낮은 결합 형태를 가질 수 있다.

BUILT-IN Handler Names

리액트의 내장된 이벤트 핸들러를 사용할 때 주의해야 할 점이 있다.

다음 예시를 보면,

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

전개 연산자로 모든 prop을 div에 전달하게 되면 의도치 않게 동작한다.

button 클릭 시 이벤트가 버블링되어 div에 할당한 이벤트 핸들러가 실행된다.

이런 경우에는 div에 전달할 prop만 정의해서 사용할 수 있다.

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

마치며

handleClick, onClick 아무 생각 없이 쓰다가 똑같은 이유로 두 번 리뷰를 받았다. 정신 차려라 ~~ 🤛

참고 자료

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