안녕하세요 1. 가독성 맥락줄이기 - B 구현 상세 추상화하기 코드 질문있습니다.

[jungsikjeong]

고민

아래 코드는 블로그에 있는 코드를 긁어왔습니다.
버튼에 클릭핸들러를 달은 상태인 코드입니다.

궁금한것은, 저렇게 버튼에 바로 이벤트핸들러를 달아주는것이 좋은것인지
아니면, 따로 const onClick =()=>{} 이런식으로 지정후, 버튼에 바인딩해주는것이 좋은것인지 잘 모르겠습니다.

• 지금의 코드예시는 말그대로 예시이기때문에 저렇게 작성된 것인가요?

• 아니면 상황에 따라서 다르게 작성해주시나요?

• 이것도 아니면 nextjs나 react에따라서 작성해주시나요?

코드

function InviteButton({ name }) {
  return (
    <Button
      onClick={async () => {
        const canInvite = await overlay.openAsync(({ isOpen, close }) => (
          <ConfirmDialog
            title={`${data.name}님에게 공유해요`}
            cancelButton={
              <ConfirmDialog.CancelButton onClick={() => close(false)}>
                닫기
              </ConfirmDialog.CancelButton>
            }
            confirmButton={
              <ConfirmDialog.ConfirmButton onClick={() => close(true)}>
                확인
              </ConfirmDialog.ConfirmButton>
            }
            /* 중략 */
          />
        ));

        if (canInvite) {
          await sendPush();
        }
      }}
    >
      초대하기
    </Button>
  );
}

참고 자료

• 스크린샷:
• 다이어그램:
• 링크 (ex. 피그마, 노션 등):