[React/버튼] button 태그로 만든 버튼이 아닌, div 태그로 a 태그(anchor)를 감싼 형태의 button에 대한 이벤트 바인딩 삽질기

환경

• React 18.2.0
• Typescript 4.6.3
• eslint 8.16.0

common.ts

/**
 * onKeyDown 이벤트핸들러에서 엔터키로 함수 실행하기
 */
export const onKeyDownCall = (e: React.KeyboardEvent, func: (ev: React.SyntheticEvent) => void) => {
  // 'keypress' event misbehaves on mobile so we track 'Enter' key via 'keydown' event
  if (e.key === 'Enter') {
    e.preventDefault();
    e.stopPropagation();
    func(e);
  }
};

test.tsx

// 최종적으로 handleSubmitTest 라는 함수를 실행한다는 가정

// 텍스트 입력 input
<input type='text'
  onKeyDown={(e) => onKeyDownCall(e, handleSubmitTest)} // (3) input 에서 엔터키로 실행
/>
<div onClick={handleSubmitTest}>{/* (1) div > a 형태의 버튼을 클릭하여 실행 */}
  <a href='' onKeyDown={(e) => onKeyDownCall(e, handleSubmitTest)}>{/* (2) 버튼에 커서가 있는 상태에서(e.g. 탭 이동) 엔터키로 실행 */}
    Submit
  </a>
</div>

.eslintrc 예외처리

  "rules": {
     ...
    "jsx-a11y/anchor-is-valid": 0,
    "jsx-a11y/no-static-element-interactions": 0,
    "jsx-a11y/click-events-have-key-events": 0
  }

이슈 기록

• 아무래도 button 태그가 아니다 보니 버튼처럼 운용하는 데 이슈들이 있었음.
• a 태그 내 href의 존재여부에 따라 작동하지 않거나 tab키 누를 때 포커스가 가지 않는 등의 영향이 있었다.
• 그렇다고 href를 넣으니 a 태그의 onClick이벤트가 호출되지 않는 문제도 있었음.
• 결국 이런 저런 오작동 사례를 다 피해서 (1), (2), (3)을 모두 만족시키는 것은 위와 같은 형태가 되었음. 더 좋은 방법이 있으면 알고 싶으네 -_-/~