리액트 오류 [DOM] Input elements should have autocomplete attributes

 

 

오류메시지 : [DOM] Input elements should have autocomplete attributes (suggested: "new-password")

 

Google Chrome과 같은 최신 브라우저에서 권장되는 사항중 하나는 바로 바로! 비밀번호 자동완성 입니다!

 

코드를 다 작성하고 돌려보면 저런 warning이 생기곤 하는데, 절때 저런 warning을 노출 시키고 납품할 순 없죠?

 

input 태그를 사용하시고 비밀번호를 인풋 값으로 받으신다~ 하시면 필수로  autocomplete 속성을 넣어주시면

warning 이 사라집니다!

 

Material-UI(MUI) 또는 다른 UI 라이브러리를 사용할 때 기본적으로 autocomplete="off"가 설정되거나, 생략될 수 있기 떄문에 확인 해주시면 됩니다!

 

저 또한 mui 로 활용을 했기 때문에 저런 warning 이 발생하게 된것이죠!

 

아주 간단하니까 고쳐주시고 warning 없는 깨끗한 콘솔 유지하자구요~!

 

비밀번호랑 당연히 비밀번호 확인 란에도 추가 해주시고~

 

 	<TextField
              label={`Password (${t("account:enterForPasswordChange")})`}
              type="password"
              value={password}
              size="small"
              onChange={(e) => setPassword(e.target.value)}
              error={password !== "" && !checkPasswordValid(password)}
              fullWidth
              autoComplete="new-password"
	/>

 

요렇게 기존 코드 밑에 autoComplete="new-password" 추가 해주시면 오류가 사라집니다!

 

그리고 다 된줄 알았는데, User Name 사용자 이름까지도 오류가 나길래

 

 	<TextField
              label="User Name"
              value={userName}
              size="small"
              onChange={(e) => setUserName(e.target.value)}
              fullWidth
              autoComplete="username"
	/>

 

autoComplete="username" 추가 해줬습니다~

 

간단하고 깨끗한 콘솔창 유지합시다!