React - input 파일 업로드를 꾸며주자! 1탄 label 이용하기.

<input type="file> 로 지정하면 아래와 같은 아주...못생긴 녀석이 태어난다.

여기 못생긴 녀석...

파일을 업로드 해야하는 상황에서 이 못생긴 녀석을 가만히 둘 수 없기에 꾸며주는 방법을 알아보고자 한다.

먼저 label 태그를 활용하는 방법이다.

label태그 사용하여 Input을 꾸며주자.

<input type="file" id="inputTag"/>
<label htmlFor="inputTag">이미지 선택하기</label>

위와 같이 작성해주면 input태그를 label에 쓴 이미지 선택하기로 보일 수 있다.
(단, 함수나 이벤트는 Input 태그 안에 써주자. label은 그저 보여주는 것이라고 생각하기!)

기억하자! input태그의 css도 추가해서 가려주자!

display : none;

위와 같이 css를 input 태그에 적용시켜 원래 있던 모양의 Input은 지워주자!