{TIL} 0208

 

 

HTML <input - label

• label은 form 양식에 이름을 붙이는 태그로, 주요 속성은 for 입니다.
• 이 때 form의 값과 form양식의 id값이 같으면 서로 연결됩니다.
  • 아래 예시 코드에선 "same_here"이 같은 값으로 두 태그(label과 input)을 이어줍니다.
• label 태그를 클릭하면, 연결된 form 양식과 연동됨을 UI에서 확인할 수 있습니다.

<label for = "same_here" > Input Text Here </label>
<input type = "text" id = "same_here" />

 

 

React

render()부에서 html요소를 넣었을 때 rendering이 제대로 되지 않을 때가 있습니다.

html 양식을 JSX로 변환 시켜주지 않아서 rendering이 제대로 되지 않는 경우일 수 있습니다.

 

React의 render()부는 JSX문법을 지켜줘야 함으로 아래 Html to JSX compiler 사이트를 활용하면 rendering이 제대로 돌아갈 수 있습니다.

 

magic.reactjs.net/htmltojsx.htm