[React] 이미지 업로드 미리보기 기능 구현하기

단순히 input type="file"만 사용하여 파일 업로드 기능을 구현하는 것은 사용자 경험 측면에서 한계가 있다. 파일을 선택할 수는 있지만, 어떤 이미지가 업로드되었는지 바로 확인할 수 없고 잘못된 파일을 선택한 경우에 대한 처리도 별도로 필요하기 때문이다.

이미지 업로드

이를 해결하기 위해 이미지 업로드 기능을 개선해보았다. 우선 기본 파일 input은 숨기고, label을 이용해 버튼처럼 동작하도록 구성했다. 이렇게 하면 디자인을 자유롭게 커스터마이징하면서도 기존 input 기능은 그대로 사용할 수 있다.

<FileInputLabel htmlFor="file">
	이미지 업로드
</FileInputLabel>
<ImageUploadInput type="file" id="file" accept="image/*"/>

/* CSS */
const FileInputLabel = styled.label`
    cursor: pointer;
`;

const ImageUploadInput = styled.input`
    display: none;
`;

업로드 이미지 미리보기

이미지를 선택한 뒤에는 바로 화면에 보여주고 싶었기 때문에, FileReader를 사용해 파일을 읽고, 이를 상태로 관리하도록 했다. 파일을 data URL 형태로 변환한 뒤 img 태그의 src로 넣어주면 서버에 업로드하지 않아도 즉시 미리보기가 가능해진다.

const [imgFile, setImgFile] = useState("");
const imgRef = useRef();

// 이미지 업로드 input의 onChange
const saveImgFile = () => {
	const file = imgRef.current.files[0];
	const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend = () => {
        setImgFile(reader.result);
   	};
};

// 업로드 된 이미지 미리보기
<img
	src={imgFile ? imgFile :`/images/icon/user.png`}
	alt="프로필 이미지"
/>

// 이미지 업로드 input
<input
    type="file"
    accept="image/*"
    id="profileImg"
    onChange={saveImgFile}
    ref={imgRef}
/>

적용 결과

Reference

input file 버튼 커스터마이징하기
[React] 이미지 업로드하고 미리보기