TRACK1 리팩토링 이야기, <label> 그리고 <input> 태그

label 태그

html에서 <label> 태그는 <input>태그의 도우미이다.

언뜻 보면 그냥 div, spna 태그와 같아보일 수 있지만, 하단에 작성된 코드처럼 input 창의 질문인 모국어의 인사말을 적어주세요. 라는 문구에도 input 태그의 작동을 돕는다. 즉, label 태그 안의 문구를 마우스로 클릭시 input 태그의 깜빡임을 유도한다.

  <label for="hello"> 모국어의 인사말을 적어주세요. </label>
  <input type="text" id="hello"></input>

이처럼 label for과 input의 id를 같게 함으로써, label이 input을 돕는 역할을 수행하는 것이다.

React에서는 <label htmlFor="">을 통해 작성해주면 같은 효과가 나타난다.

#### 그런데, label의 닫는 태그를 input 태그 다음으로 감싸준다면, 이 for와 id를 굳이 맞추어 작성하지 않더라도 동일하게 이용된다.

  <label> 모국어의 인사말을 적어주세요.
    <input type="text"></input>
  </label>

닫는 태그 위치 하나만 바꾸었을 뿐인데, 불필요한 코드 몇 단어를 줄인셈이다! 이런 사소한 지식이 쌓여 클린 코드를 만들어나가는게 아닌가 싶다.