label 사용하기
시작하기에 앞서
주의
해당 블로그의 모든 문서는 학습한 내용을 제 방식으로 정리하여 작성하고 있습니다.
순수 창작물도 아니고, 틀린 내용이 있을 수 있으므로 참고하고 읽어주시면 감사하겠습니다.
label 사용하기
for 속성 사용
function App() {
return (
<div>
<label for="email">이메일</label>
<input id="email" type="text" placeholder="이메일을 입력해 주세요..." />
</div>
);
}
리액트에서 <label>
태그를 사용할 때 for
속성을 사용하고 관리자 도구로 콘솔을
확인해 보면 에러가 발생합니다.
반복문의 for
문과 태그의 for
를 구분하지 못하기 때문이라고 생각합니다.
function App() {
return (
<div>
<label htmlFor="email">이메일</label> <br />
<input id="email" type="text" placeholder="이메일을 입력해 주세요..." />
</div>
);
}
그런 경우 for
를 htmlFor
로 변경해주면 에러가 발생하지 않습니다.