변수명 어려워~handle 0편~

개시하다

변수명 어려워요?
내가 코드를 쓸 때, 혹은 다른 사람의 코드를 평론할 때 항상 이렇게 생각한다.
모두들 어떤 생각과 생각을 가지고 있는지, 실제 업무에서 건드린 전선은 매우 원활하지 않은 인상을 준다.🙀
의사를 전달하면 OK, 명명 규칙 등 규칙을 명기하고 통일해서 많이 봤는데 어느 정도까지 관철되었을까!?

handle 30편

버튼 등 이벤트에서 동작에 불을 붙이려는 경우의 명칭 규칙을 소개하고 싶습니다.
예제

export const HogePresenter: FC<HogeTypes> = (props) => {
  const { start } = props
  return (
    <>
      <div>Welcome to Hoge</div>
      <button onClick={start}>start</button>
    </>
  )
}

이 경우start의 동작(컨테이너 측 디스패치 처리가 신선도가 유지되는 함수)은 버튼을 누르면 불이 날 것으로 상상할 수 있다.
start 이외의 함수도 함께 점화하고 싶은 경우 어떻게 처리합니까?

export const HogePresenter: FC<HogeTypes> = (props) => {
  const { start, opneModal } = props
  return (
    <>
      <div>Welcome to Hoge</div>
      <button
        onClick={() => { start(); opneModal(); }}
      >
        start
      </button>
    </>
  )
}

온클릭을 나무라시겠어요?
아니면handle00 같은 함수를 만듭니까?handleClick,handleStart,handleButton 등)

역시 알기 쉬운 게 좋아.

나는 이 명명 규칙을 추천한다!!

handle + Event + 対象

이 규칙의 장점은 何(対象)를 의미하는지 쉽게 알 수 있다는 것이다どんなイベント(Event).
알다

export const HogePresenter: FC<HogeTypes> = (props) => {
  const { start, openModal } = props
  // handle + Event名(今回はClick) + 対象(StartButton)
  const handleClickStartButton = () => {
    start();
    openModal();
  }
  
  return (
    <>
      <div>Welcome to Hoge</div>
      <button onClick={handleClickStartButton}>作成</button>
    </>
  )
}

handleClickStartButton가 시작 버튼의 클릭 이벤트를 처리하고 있습니다.
그렇지!
버튼과 다양한 이벤트에 불을 붙이려는 움직임이 많아지면 난잡하게 읽기가 어려워지고 유지하기도 어려워진다.
이런 부채 상황을 조성하기 위해, 이 명명 규칙은 매우 유용하다!!

말하기 시작하다

프리젠터 쪽에서 함수를 조합했지만 정확한 책임 분리인가요?

start 자체는 오픈모드의 책임이 있어야 합니다!
잠깐만...다른 질문들도 볼 수 있어요.😅
나는 이러한 구성 요소의 디자인에 따라 함수의 책임은 각양각색의 변화가 있을 것이라고 생각한다.

최후

나는 변수명과 디자인 사상이 매우 큰 관계가 있다고 생각한다. Container와Presenter의 책임을 어떻게 구분해야 할지 여러 가지 고려가 있다.
그중 100% 완벽한 것은 어렵지만 앞으로의 부채가 되지 않도록 코드를 읽고 의도를 알 수 있는 변수명을 붙이는 것이 중요하다.