문제상황
프로젝트에 들어갈 날짜 지정 기능을 위해 Datepicker를 만들어야 함.
React Datepicker를 사용하여 Datepicker를 적용함.
UI 기획상, Datepicker 안에 캘린더 아이콘이 필요하고, 해당 아이콘을 눌렀을 때도 Datepicker 영역 자체를 눌렀을 때와 동일하게 달력이 열려야 함.
onClick 이벤트는 <ReactDatepicker>에 걸렸고 캘린더 아이콘은 별도로 스타일링 됨.
이 때, 어떻게 하면 캘린더 아이콘을 클릭했을 때도 동일한 Datepicker 내장 onClick 함수를 호출할 수 있는가?
Datepicker UI
기존 코드 구조
<div> // datepicker wrapper
<i><img /></i> // calendar icon
<react-datepicker /> // react datepicker library component
</div>Stack overflow
label 태그로 아이콘과 Datepicker 컴포넌트를 감싸라
해결방안
<div>
<label> // label 태그 적용
<i><img /></i>
<react-datepicker />
</label>
</div>Deep Dive
보통 <label> 태그는 다음과 같이 for 속성을 활용해 id 값이 일치하는 input과 연결되어 해당 input이 클릭되거나 초점이 가도록 제어한다.
<label for="name">이름</label>
<input id="name" />그러나 <label> 태그 안에 <input> 태그를 중첩시키게 되면 for 속성 값과 id 값을 일치시키지 않아도 암시적으로 해당 태그들은 연관이 있다고 본다.
그러므로, 위와 같이 캘린더 아이콘을 위한 <i> 태그와 React Datepicker 라이브러리에서 제공하는 컴포넌트를 같은 <label> 태그 안에 감싸는 경우, 아이콘에 별도의 클릭 이벤트를 주지 않아도 같은 label을 클릭한 것으로 간주되어 React Datepicker 컴포넌트 내부의 input에 걸려있는 이벤트 핸들러가 동작한다.
