작업 상태
- 리액트에서 로그인 페이지 작업중 디자인 코드를 붙인 후에 발생했습니다.
에러 메시지
Warning: Invalid DOM property `for`. Did you mean `htmlFor`?
원인
- React에서 JSX 코드를 작성할 때 발생하는 것으로, for와 같은 일부 DOM 속성은 JSX에서 사용할 때 이름이 다릅니다.
<label className="block" for="email">Email</label>
<input
type="email"
name="email"
처리
- 속성을 JSX에서 올바른 이름으로 작성하면 해결됩니다.
<label className="block" htmlFor="email">Email</label>
<input
type="email"
name="email"
참고
| html | jsx |
| for | htmlFor |
| tabindex | tabIndex |
| ondblclick | onDoubleClick |
| onchange | onChange |
| class | className |
이 외에도 다양한 DOM 속성들이 있으며, JSX에서 사용할 때 이름이 다를 수 있습니다. 이러한 속성들의 이름은 일반적으로 camelCase로 작성됩니다.