2024.08.12 <label>

오늘 일하다가 실수로 label tag 안에 label tag를 넣는 실수를 하였다.

그런데 그것도 문제였지만, label tag의 쓰임새를 모르고 단순히 요소 이름을 붙이는것으로만 사용하고 있었다..

 

label을 클릭하면 그 안에 들어가 있는 children (보통은 input)이 반응하는 것을 모르고 있었다.

 

label tag는 2가지 방식으로 사용 가능하다.

 

1. 명시적

<label for="name">이름</label>

<input type="text" id="name">

 

2. 암시적

<label>

  이름

  <input type="text" id="name">

</label>

 

이렇게 써야되는지도 모르고 label과 input을 분리해서 컴포넌트를 만들어 버렸다...

(어쩐지 reactAria에서 TextField에 label이 없다고 경고를 띄웠는데 이유가 있었구나)

 

label tag안에 interactive한 tag (a, button 같은)를 넣으면 label tag와 관련된 control 요소에 접근하는 것에 방해가 되기 때문에 넣으면 안된다.

 

나는 그것을 모르고 button tag를 넣어서 삭제하는 기능을 넣었더니 해당 button이 아닌 다른(label이 속한 영역) 영역을 클릭 해도 삭제되는 버그를 만들었다.

 

label에 브라우저의 기본 동작을 막는 preventDefault와 버블링을 막는 stopPropagation 쓰면 전파는 막을 수는 있지만 근본적인 해결책은 아닌 것 같다.

 

분리를 해야겠다.

 

 

- 참고 링크

https://react-spectrum.adobe.com/react-spectrum/TextField.html#textfield

https://developer.mozilla.org/ko/docs/Web/API/Event/stopPropagation

https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault