React event handler 함수 네이밍 현명하게 하기

react에서 event handler 함수를 다룰때 많은 코드에서 handle..뭐시기 on..뭐시기로 설정된 것을 많이 보았을 것이다.

이런것의 차이는 handle의 경우에는 이벤트나 props로 전달하는 함수 역할로 생각하면 되고 on 같은 경우는 이벤트를 받는 입장, props에서 이벤트를 받는 역할로 생각하면 된다.

const ParentComponent = ()=>{
	const handleBtnClick = () => {
    	console.log('버튼이 클릭되었다!!!');
    };
	return (<div>
    <ChildrenComponent onClick={handleBtnClick} />
    </div>);
}
const ChildrenComponent = ({onClick})=>{
	const handleBtnClick = () => {
    	onClick();
        console.log('추가적인 일들');
    };
	return <button onClick={handleBtnClick} />;
}

이러한 예시코드를 보면 이해가 쉬울것이다.

그리고 함수명 정할때 많이 쓰는 공식은
접두어(handle, on ...) + 명사 (ex: btn, input) + 동사 (ex: click, change) 이런식으로 쓰면된다한다.

아니면 본인만의 명확한 규칙을 세우던지, 명확한 규칙을 세워 가독성만 높이면 상관없다.

이러한 이벤트 핸들러 네이밍하는법 잘 기억해두자. 이러한것 하나하나가 코드 가독성에 영향을 준다.