HTML 에서 label - input 연동을 위해서는 2가지 방법이 있습니다.
<label>
<input />
</label>
형태로 표현하는 방식과
<label for="customId" />
<input id="customId" />
이와 같은 방식이 있습니다.
개인적으로는 label 태그 안에 input 태그를 넣어서 감싸는 것을 좋아합니다.
불필요하게 id 값이 과다하게 늘어나면 유지보수하기 힘들어진다고 생각합니다.
React 에서는 중복되는 속성을 피하기 위해
label 태그에 htmlFor 속성과 input 태그의 id 속성을 이용해 연동을 시킵니다.
하지만 저는 의문점이 생겼습니다.
React가 탄생하게 된 배경 자체가 직접 DOM을 핸들링 하는 것은 꽤 무겁기 때문에
가상 DOM 이라는 Map (자료구조) 객체를 두고 이전 상태와 비교하여
갱신하는 형태인데 id 값을 직접 조작하면 DOM을 핸들링하는 것이기 때문입니다.
그래서 저는 useRef 훅을 이용하여 ref 를 만들어서 focus 이벤트를 걸었더니 동일하게 동작을 하였습니다.
그렇다면 어떤 방법이 좋을까요.
사실 이에 대한 명확한 답은 없는 것 같습니다.
리액트 공식 문서에서는 스크린 리더에게도 보여질 수 있도록 htmlFor 속성을 내부적으로 제공을 하고 있다고 합니다.
ref를 이용해서 focus 하는 방식도 나와 있습니다.
개인적으로 스크린 리더기까지 고려해야 하는 상황이거나 성능적으로 이슈가 많이 되지 않으면
label의 htmlFor 속성을 이용하는 것이 괜찮아 보입니다.
단지 여러 방식과 원리를 이해하고 있으면 언제 어디서든지 필요할 때 활용할 수 있을 것 같습니다.
댓글