[React] Input elements should have autocomplete attributes (suggested: "current-password") Error 해결 방법

Intro

안녕하세요. React에서 MUI의 TextField를 사용하던 도중 아래와 같은 에러가 발생하였습니다.  

 

Input elements should have autocomplete attributes (suggested: "current-password")

 

  <TextField
    value={value}
    onBlur={onBlur}
    label='사용자 계정(아이디)'
    placeholder='아이디를 입력해 주세요'
    onChange={onChange}
    error={Boolean(errors.userId)}
    type={'text'}
    color='secondary'
    variant='standard'
    autoComplete='on'
  />

 

How to solve problem

해당 에러가 발생한 이유는 autocomplete 속성을 명시하지 않아서입니다.  autoComplete 속성이란  폼 필드에 브라우저의 자동 완성 기능을 사용할지 여부를 지정합니다.

 

브라우저는 종종 사용자가 이전에 입력한 데이터를 기억하고, 유사한 입력 필드가 나타날 때 이를 자동으로 완성합니다. 예를 들어, 사용자가 이전에 입력한 이메일 주소나 사용자 이름을 기억하여 다음에 해당 필드에 다시 입력할 때 브라우저가 자동으로 제안할 수 있습니다.

 

autoComplete 속성은 다음과 같은 값들을 가질 수 있습니다:

• on: 브라우저의 자동 완성 기능을 활성화합니다.
• off: 브라우저의 자동 완성 기능을 비활성화합니다.

**autoComplete="off"**을 설정하면 해당 폼 필드에 대한 자동 완성이 비활성화됩니다. 이는 보안상의 이유로 비밀번호 입력 필드와 같이 민감한 정보를 입력받는 경우에 사용될 수 있습니다. 사용자의 입력을 완전히 비활성화하고자 할 때에도 사용될 수 있습니다. autoComplete 속성은 폼 필드마다 개별적으로 설정할 수 있으며, 일반적으로 민감한 정보나 사용자의 입력을 제어하고자 할 때 사용됩니다.

 

  <TextField
    value={value}
    onBlur={onBlur}
    label='사용자 계정(아이디)'
    placeholder='아이디를 입력해 주세요'
    onChange={onChange}
    error={Boolean(errors.userId)}
    type={'text'}
    color='secondary'
    variant='standard'
    autoComplete='on'
  />

 

다음과 같이 TextFeild 태그에 autoComplete 속성을 추가해주면 에러가 사라지게 됩니다. 

---

https://bobbyhadz.com/blog/input-elements-should-have-autocomplete-attributes