React 이벤트 핸들러 네이밍(on vs handle)

on과 handle

일반적으로 함수 이름 앞에 붙은 접두사도 경우에 따라 다르게 붙인다.

• on 으로 시작하는 경우 : 이벤트가 발생할 때 호출되는 함수. 즉, 여기에 실제 이벤트가 연결되어 있는 경우에 붙임.
• handle 로 시작하는 경우 : 특정 동작을 수행하는 함수. 즉, 이벤트가 발생했을 때 호출되는 실제 함수를 의미한다.

예시

• handle을 쓰는 경우

  handle을 사용하는 경우가 우리가 더 자주 접하는 케이스라고 생각해서 먼저 이야기해보겠다.

  function Button(){
  	const handleClick = () => {
  		console.log(“Button clicked”);
  	}
  	
  	return <button onClick={handleClick}>클릭</button>
  }

  이 예시를 보면 handleClick 함수가 정의되어 있고, 버튼의 onClick 이벤트 핸들러로 이 함수를 할당했다. 버튼이 클릭되면 handleClick 함수가 실행된다.

• on을 쓰는 경우

  바로 위에서도 봤듯이 on은 특정 이벤트(ex. 클릭)가 발생했을 때 동작을 유발하는 함수를 가리킬 때 사용하게 된다. 그래서 Props로 이벤트 핸들러에 할당될 함수를 넘길 때에도 매개변수의 이름은 on을 접두사로 붙여서 사용하면 된다.

참고 자료

• https://medium.com/@master_43681/understanding-and-proper-usage-of-on-and-handle-prefixes-in-react-function-naming-119f0beea400
• https://ellie-dev.tistory.com/13
• https://blog.sonim1.com/220