[22.05.04] TIL

프리온보딩 선발 과제 리팩토링 과정에서 마주한 린터 문제를 적어보려한다.

no-static-element-interaction

div에 onClick 을 주면서 나온 에러.
정적 요소에 마우스 또는 키 이벤트리스너와 같이 상호 작용을 추가하려면 role value를 부여해야 한다.
그러나 이벤트 핸들러가 버블링된 이벤트 caputure 역할에만 이용하는 경우 규칙을 비활성화해야 한다. 규칙을 비활성화 하는 이유도 설명.

{/* The <div> element has a child <button> element that allows keyboard interaction */}
{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
<div onClick={this.handleButtonClick}>
  <button>Save</button>
  <button>Cancel</button>
</div>

원문: no-static-element-interaction

** 추가 내용

no-autofocus

autoFocus 속성을 이용한다는 것은 접근성을 낮추어 사용성에 문제를 일으킬 수 있다.
원문: no-autofocus

button 태그에 type 지정 (속성 없는 요소 사용 방지)

HTML 요소에 type 속성의 기본값은 원하는 동작이 아닐 수 있고, 예기치 않은 페이지 reload로 이어질 수 있다. explicit type attribute 적용
원문: react/button-has-type

prop-types

prop의 type을 정의해 수신된 데이터의 유효성을 검사여 재사용성이 향상된다.
PropTypes를 사용하거나 TypeScript를 사용
원문: react/prop-types
React - PropTypes와 함께 하는 타입 검사