input[type="file"] 커스터마이징하기 (React-Typescript)

input을 통해 이미지 파일을 전송해야 하는 상황.

        <input
          type="file"
          name="file"
          onChange={handleFileChange}
        />

file 타입의 input은 브라우저 내에서 디자인이 고정으로 적용되어 있기 때문에, css로 별도의 스타일링을 할 수 없게 되는 문제가 발생한다.

이는 button을 하나 만들어주고, useRef훅을 이용해서 button과 input을 연결해주는 것으로 아주 간단하게 해결해 줄 수 있다.

코드를 보자.

// input에 연결해주기 위한 useRef 훅 사용
const imageInputRef = useRef<HTMLInputElement | null>(null);

// 버튼 클릭 시 호출하는 함수 (클릭 이벤트) 
const onCickImageUploadHandler = (): void => {
  imageInputRef.current?.click();
};


return (
        <button
          onClick={() => {
            onCickImageUploadHandler();
          }}
        >
          이미지 찾기
        </button>
        <input
          // input의 ref 속성을 이용해 버튼 클릭 이벤트를 input과 연결
          ref={imageInputRef}
          type="file"
          name="file"
          onChange={handleFileChange}
        />
)

1. button을 클릭한다.

2. onCickImageUploadHandler 함수가 호출되어 imageInputRef가 클릭 된다.

3. imageInputRef는 input의 ref 속성으로 들어가 있기 때문에 input이 클릭 된다.

버튼을 클릭하면 input이 클릭 되는 기능을 구현한 것이다.

이제 button이 input의 기능을 대체할 수 있기 때문에input은 더 이상 브라우저 창에서 보여질 필요가 없다. input에 display: none;을 적용하고 button태그를 스타일링 해주자.

주의!! 타입스크립트를 사용하고 있다면 useRef에 항상 알맞는 타입을 명시해주는 것을 잊지 말자.