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

항상 리액트 이벤트 핸들러 네이밍에 대한 고민이 있었다. 작성하면서도 이렇게 작성하는게 맞나...?하는 의문이 있었는데, 찾아보니 좋은 블로그 글이 있어 이를 중심으로 간단하게 핵심만 정리해보고자 한다.

props

on* 접두사를 붙여서 작성한다. 예시) onClick

기본으로 제공되는 이벤트핸들러 네이밍 규칙과 일치하며, on*는 어떤 이벤트가 연결될지 의미한다.

function

handle*로 작성한다. 예시) handleClick

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

위의 두 네이밍을 예시로 컴포넌트를 만든다면 아래와 같다.

 

좀 더 복잡한 경우

접두사 + 명사 + 동사의 순서로 작성한다.

handleClickBock, handleClickList, handleClickButton보다는 handleBlockClick, handleListClick, handleButtonClick으로 작성한다. 이유는 이벤트 타겟에 다른 이벤트가 추가 될 경우 그룹화시키가 편하다.

 

컴포넌트 분할

한 모듈에 많은 이벤트 핸들러가 등록 되어있는 경우, 컴포넌트 분할을 고려해야하는 것은 아닌지 생각해봐야한다.

만약 하나의 form.js파일에 onRegistrationSubmit과 onLoginSubmit의 이벤트가 있다면, registration-form.js와 login-form.js로 나눠서 onSubmit이벤트로 처리해야하는 것은 아닌지 생각해보아야한다는 것이다.

 

Built-in 핸들러 이름 사용

React에는 button컴포넌트의 onClick이나 form컴포넌트의 onSubmit과 같은 여러 기본 내장 핸들러가 있다. 이러한 기본 내장 핸들러를 아래 코드 처럼 props로 전달할 경우, 이벤트 버블링이 발생해서 button컴포넌트를 클릭했을 때 div 컴포넌트도 클릭되는 원치 않는 이벤트가 실행될 수 있다.

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

정리하고나니 어느정도 가이드라인이 잡힌느낌이다.

 

참고 링크

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