label과 input 태그를 같이 사용해야할 때가 종종 있다.
본인의 선택이긴하지만, 잘 사용하지 않느다고해서 아예 모르는 것보다는 나으니
짧게나마 정리하고자 한다.
또한 React에서는 어떻게 속성값이 달라지는지도 짧게 살펴보자.

일반적인 사용법

<form>
  <label for="user_id">아이디</label>
  <input id="user_id" placeholder="아이디를 입력하세요" />
</form>

보통 input을 클릭해야 내용을 작성할 수 있는데,
label 태그를 input 태그에 연결해주면,
label을 클릭하는 것으로도 input에 접근할 수 있다.

핵심은 label 태그의 for 속성값과
input 태그의 id 속성값을 같게 해줘야한다는 것이다.

React에서는?

많이들 사용하는 React에서는 사용법이 약간 다르다.
다르다고해도 속성을 표시하는 것만 달라지는거지만.

<form>
  <label htmlFor="user_id">아이디</label>
  <input id="user_id" placeholder="아이디를 입력하세요" />
</form>

무엇이 달라졌는지 눈치 채셨나요?
그렇습니다. for 였던 속성이 htmlFor로 바뀌었다!
이 부분만 조심하면 된다. 매우 간단하다.
심지어 React를 사용하면 이 부분은 React에서 직접 알려주기도 하니까 너무 걱정하지말자.