input으로 파일 업로드 구현

기존 input의 문제점

<input type="file>

위 코드로도 파일 업로드를 구현할 수 있다.

하지만 사진처럼 디자인이 이쁘지 않다.

해결 방법

위 문제점처럼 디자인적인 문제가 있기 때문에 "이미지 업로드"라는 버튼을 예쁘게 만들어 놓고 이미지를 업로드 할 수 있게하면 좋을 것이다. 

const imageInput = useRef();
const onClickImageUpload = useCallback(() => {
imageInput.current?.click();
}, [imageInput.current]);

return(
    <div>	
    	<input type="file" multiple hidden ref={imageInput} />
    	<Button onClick={onClickImageUpload}>이미지 업로드</Button>
    </div>
   );

위 코드처럼 input에 hidden 속성을 줘서 숨겨두고 ref를 둔다. 참고로 multiple 속성은 파일을 2개 이상 두지 못하게 하는 속성이다.

그리고 만들어놓은 button에 onClick 함수에 (input과 연결한 ref).current?.click()를 해두면 파일을 올리 수 있다.