eslint Error: A form label must be associated with a control.

에러 메시지

A form label must be associated with a control. eslint (jsx-a11y/label-has-associated-control)
-> label은 input과 연관되어야 한다

 

에러 코드

<label htmlFor="email">이메일</label>
<input type="email" />

 

에러 원인

htmlFor과 id로 연결해도 에러 발생 -> React에서는 컴포넌트 재상요으로 인해 id의 유일성 보장하기 못하기 때문

(map()으로 리스트를 만들 때 key값에 index를 넣었을 때도 비슷한 문제가 발생했었다)

 

해결 방법 2가지

[1] .eslint.json에 아래 내용 추가

{
  "rules": {
    "jsx-a11y/label-has-associated-control": [
      2,
      {
        "labelAttributes": ["htmlFor"]
      }
    ]
  }
}

[2] Quick Fix를 통해 최상단 혹은 해당 코드 바로 윗줄에 아래 내용 입력

/* eslint-disable jsx-a11y/label-has-associated-control */

 

참고

https://leo-xee.github.io/Error/eslint-label/