[React] 이벤트 핸들러 함수 네이밍 컨벤션

 

 

on vs handle

이벤트 핸들러 함수를 props로 넘길때, 언제 on을 쓰고 언제 handle을 붙일까?

 

handle은 함수를 정의할때 사용
on은 이벤트핸들러 함수를 prop으로 받는 component 쪽에서 prop 이름으로 사용

 

export default function App(){
	function handleSelect(){
		console.log('Selected!')
	}
	
	return (
		<TabButton onSelect={handleSelect}>Component</TabButton>
	)
}

export default function TabButton({children, onSelect}){
	return (
		<button onClick={onSelect}>{children}</button>
	)
}