🌟 <input type="file" /> 모양 바꾸기

<input type="file" />의 모양은 각 브라우저 별로 정해져 있어서 바꿀 수가 없다.
이럴 때 label 태그를 사용하여 약간의 꼼수아닌 꼼수를 부려볼 수 있다.

1. css에서 hidden 클래스를 만든다.

.hidden {
  display: none;
}

2. input에 label과 연결할 id를 주고 class명에 hidden을 입력한다.

<input
  name="file"
  type="file"
  accept="image/*"
  onChange={onFileChange}
  ref={fileInput}
  id="files"
  className="hidden"
  />

3. label의 for에 연결하고자하는 input의 id를 작성하고, value에 원하는 이미지를 넣는다.

<label for="files">
  <FontAwesomeIcon icon={faImage} size="2x" />
</label>

🌟 완성! 🌟