Skip to content

React:htmlFor

htmlFor는 React에서 HTML의 for 속성을 대체하는 JSX 속성이다.

왜 htmlFor를 쓰냐면

HTML에서 <label for="input-id"> 이렇게 쓰는데, JSX에서는 for가 JavaScript의 예약어(for 루프)라서 그대로 쓸 수 없다. 그래서 React가 htmlFor로 이름을 바꾼 것이다.

HTML: 

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

JSX (React): 

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

역할

label과 input을 연결해줘서:

  • 라벨 클릭 시 해당 input에 포커스 이동
  • 스크린 리더 접근성 향상

비슷한 이유로 class → className도 마찬가지 케이스다.

See also