React에서 label 태그 사용

본 게시글은 정확한 정보를 담고있지 않을 수 있으므로 다른 자료도 참고하시길 바랍니다.
만약, 본 게시글이 잘못된 정보를 가지고 있다면 피드백 부탁드립니다. 감사합니다.

코드

<label for='file'>파일 찾기</label>
<input type='file' />

1차 문제 상황

브라우저 콘솔창에 for 대신 htmlFor를 사용하라는 경고 문구

해결

<label htmlFor='file'>파일 찾기</label>
<input type='file' />

React 에서는 for 대신 htmlFor를 사용하고 있다.
왜 그런 것인지는 의문인데.. 아직 찾지 못했다

2차 문제 상황

<label htmlFor='file'>파일 찾기</label>
<input type='file' />

htmlFor로 프로퍼티를 변경해줬음에도 여전히 label을 눌렀을때 input file이 트리거되지 않는다.

해결

<label htmlFor='file'>파일 찾기</label>
<input type='file' id='file' />

id='file'을 추가해줬더니 input file이 트리거 된다. 즉, label 태그의 for 값은 연결될 input태그의 id 값과 같아야한다! for={input id값}