프로젝트를 진행하며 이름을 너무 막 지었다...
handle과 on에 대해서 정확한 개념을 몰라서 였다
규칙에 대해서 다시 정리해보고 꼭 지켜보자
Props
Prop 이름을 정의할 때는 on* 접두사를 붙인다 ex) onClick
이것은 기본 제공되는 이벤트 핸들러 규칙과 같다
on 접두사가 붙은 경우, 이 Prop에 실제 이벤트가 연결되어 있다는 것을 의미한다
FUNCTION NAMES
on을 handle로 변경하여 handleClick과 같이 사용한다
on 접두사가 붙은 경우, 이 Prop에 실제 이벤트가 연결되어 있다는 걸 뜻하고,
handle 접두사가 붙은 경우, 이벤트가 발생했을 때 호출되는 실제 Function을 의미한다
<MyComponent onClick={handleClick} />MORE COMPLICATED NAMING
handle 고정 + 명사(Alert) + 동사(Click)
<MyComponent
onAlertClick={handleAlertClick}
onFormSubmit={handleFormSubmit}
/>COMPONENT SPLITTING
하나의 모듈에서 많은 이벤트 핸들러가 있는 경우 추상화를 놓쳤기에 캡슐화가 필요할 가능성이 높다
예를 들어, form.js라는 파일에
onRegistrationSubmit, onLoginSubmit 두개가 있다면
더 간단한 이름을 가진 두 개의 파일로 분할할 수 있다
<Form
onRegistrationSubmit={handleRegistrationSubmit}
onLoginSubmit={handleLoginSubmit}
/>분할
// RegistrationForm.js
<RegistrationForm onSubmit={handleRegistrationSubmit} />
// LoginForm.js
<LoginForm onSubmit={handleLoginSubmit} />추상화란?
불필요한 정보를 제거하고 문제 해결에 필요한 정보만 남기는 작업으로
많은 컴포넌트에서 로직을 공유할 수 있게 함
캡슐화란?
독립되어있는 컴포넌트
:)