[React] 이벤트 핸들러 네이밍 on vs handle

 

 

---

 

목차

on과 handle의 차이

실제 코드 예시로 이해하기

패턴 요약 및 정리

마무리 - 팀 컨벤션으로 정착시키기

 

---

리액트를 사용하면서 onClick과 handleClick의 이름의 함수나 props를 사용하게 된다.

처음에는 '줄 다 클릭 이벤트니까 이 코드에서 뭔지만 알면 되겠지?' 정도로만 생각했다.

코드 리뷰를 받으면서 handle과 on의 코드 컨벤션이 있다는 것을 알게 되어 기록을 하게 되었다.

 

---

[on과 handle의 차이]

리액트에서 이벤트 핸들러를 사용할 때 두 가지 경우로 사용한다.

1. on + EventName = 외부로부터 전달받는 이벤트
2. handle + EventName = 내부에서 정의된 구현 함수

 

<on + EventName = 외부로부터 전달받는 이벤트>

• props 이름이나 JSX/TSX이벤트 속성을 표현할 때 사용
• 버튼이 클릭되었을 때 실행할 동작을 외부에서 넘겨주기

function Button({ onClick }) {
  return <button onClick={onClick}>클릭</button>;
}

 

<handle + EventName = 내부에서 정의된 구현 함수>

• 컴포넌트 내부에서 정의한 함수
• 이벤트가 발생했을 때 실제 로직 처리

function HomePage() {
  const handleClick = () => {
    alert("버튼이 눌렸습니다!");
  }

  return <Button onClick={handleClick} />;
}

• handleClick : HomePage 컴포넌트가 가진 구현 함수
• Button 컴포넌트의 onClick prop으로 넘겨준다.

 

 

---

[실제 코드 예시로 이해하기]

function Button({ onClick }) {
  return <button onClick={onClick}>클릭</button>;
}

function HomePage() {
  const handleClick = () => {
    alert("버튼이 눌렸습니다!");
  }

  return <Button onClick={handleClick} />;
}

• Button 컴포넌트 : onClick = 나는 onClick이라는 prop을 받을 거야 클릭되면 그걸 실행할게
• HomePage : handleClick = 버튼 클릭 시 실행할 구체적인 로직

 

---

[패턴 요약 및 정리]

패턴	의미	예시
on + EventName	외부에서 이벤트 콜백을 "받는 자리"	onClick, onChange, onSubmit
handle + EventName	내부에서 이벤트를 "처리하는 함수"	handleClick, handleChange, handleSubmit

• 상위에서는 handleSubmit → 이벤트 처리 로직
• 하위에서는 onSubmit →이벤트를 전달받는 prop

 

코드가 커질수록 이벤트 핸들러 네이밍은 통일하는 것이 중요하다.

이벤트 위임과 실제 처리 로직을 쉽게 구분할 수 있다.

다른 개발자가 코드를 봐도 바로 이해가 가능하다.

이벤트 처리 로직을 컴포넌트 내/외부로 유연하게 분리가 가능하다.

이 패턴을 지키면 역할이 명확해져 협업 시 혼란이 줄어든다.

 

 

 

 

 

 

---

잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊

댓글과 좋아요는 큰 힘이 됩니다!

 

[ 참고자료 ]