[React] 이미지 업로드 후 등록 전 미리보기 띄우기

리액트로 혼자 프로젝트를 진행하던 도중 여러 텍스트나 이미지를 등록하는 기능을 만들기 위해 폼을 만들어야 했습니다.

그중 이미지를 등록하는 부분에서 고민이 생겼어요. 아래는 JSX의 일부를 가져온 것인데, 이를 로컬에서 실행해보니,

<div className="right_section">
	<p>이미지는 하나만 등록 가능해요.</p>
	<input type="file" name="image" id="input_file" accept="image/*"/>
	<p>등록된 이미지는 자동으로 대표사진으로 등록됩니다. :)</p>
</div>

위 HTML 코드의 실행 결과

위와 같이 파일 선택 버튼이 매우 안예쁘게(...) 출력이 됐습니다. 문제는 이를 바꿀 방법이 딱히 없다는 것이었죠. 업로드 버튼 스타일도 바꾸고 이왕이면 "선택된 파일 없음"이라는 텍스트도 없애버리고 싶었어요. 😂

 

문제 해결: <label>을 사용하자!✨

폼에서 input 태그에 빠짐없이 사용하던 <label>을 사용해보기로 했습니다. <label> 태그를 꾸미고 <input> 태그를 숨기는거죠!

<div className="right_section">
	<p>이미지는 하나만 등록 가능해요.</p>
	<label htmlFor="input_file">
		<div className="image_file">
			파일 업로드
   		</div>
	</label>
	<input type="file" name="image" id="input_file" accept="image/*" />
	<p>등록된 이미지는 자동으로 대표사진으로 등록됩니다. :)</p>
</div>

짠! css를 사용해 스타일을 <label>에 적용해주고 나니 이렇게 예쁜 업로드 박스가 완성되었어요. 이제 저 박스 전역을 클릭하면 이미지를 업로드할 수 있습니다. 사용자가 클릭하기도 쉬워지고 미관도 좋아졌어요.

 

이미지 미리보기 구현하기

그러나 파일을 업로드해도 업로드가 잘됐는지, 어떤 이미지가 업로드됐는지 전혀 알 수가 없어요. 이런 경우 사용자가 불편함을 느낄게 분명했습니다. 따라서 이미지가 업로드되면 저 박스 내에 업로드된 이미지를 채우는 미리보기를 구현해보겠습니다.

 

저 같은 경우는 앞서 작성했던 <label> 안에 이미지를 담을 영역을 추가해두고, 이를 display: none으로 숨겨둡니다. 그리고 이미지가 업로드되면 useRef()를 사용해서 이미지를 src 속성에 넣고, 해당 영역이 보이도록 스타일링했습니다.

 

<div className="right_section">
	<p>이미지는 하나만 등록 가능해요.</p>
	<label htmlFor="input_file">
		<div ref={image_input} className="image_file"> <!-- ref 추가 -->
			파일 업로드
   		</div>
        	<!-- 새로 추가된 영역 -->
    		<div ref={image_preview} className="image_file preview"> <!-- ref 추가 -->
    			<img src=""></img>
		</div>
	</label>
    	<!-- onChange 추가 -->
	<input type="file" name="image" id="input_file" accept="image/*" onChange={handleChange}/>
	<p>등록된 이미지는 자동으로 대표사진으로 등록됩니다. :)</p>
</div>

.image_file.preview {
	display: none;
}

위와 같이 영역을 추가한 후, 일단은 display: none으로 가려뒀습니다. 여기서 JSX에 추가된 코드들이 더 있어요. 바로 ref와 input의 onChange인데요, 이에 대한 코드는 아래와 같이 작성했습니다.

const image_preview = useRef();
const image_input = useRef();

function handleChange(e) {
        const { name, value } = e.target;
        if (name === 'image') {
            const imgURL = URL.createObjectURL(e.target.files[0]);
            image_input.current.setAttribute('style', 'display: none;');
            image_preview.current.setAttribute('style', 'display: flex');
            image_preview.current.children[0].setAttribute('src', imgURL);
        }
}

먼저 image_preview는 이미지가 업로드되면 이를 추가하고 보여줄 영역이고, image_input은 이미지가 업로드되면 감춰줄 영역이에요. 그리고 handleChange 함수는 해당 타겟이 변하면 그의 name과 value를 받아 모든 동작을 수행할 함수입니다. 저는 hadleChange 함수에서 setState도 함께 진행했지만 지금 포스팅에서는 이미지 미리보기 관련 코드만 집중적으로 다루기 위해 제외했어요. 

const imgURL = URL.createObjectURL(e.target.files[0]);

e.target.files[0]은 우리가 <input>에서 보내온 이미지 Blob 객체입니다. 이 Blob 객체를 url로 바꾸어 src 속성으로 적용하기 위해 URL.createObjectURL() 메소드를 사용했습니다. (주의: 이 url은 window 창을 닫는 즉시 사라집니다.)

image_input.current.setAttribute('style', 'display: none;');
image_preview.current.setAttribute('style', 'display: flex');
image_preview.current.children[0].setAttribute('src', imgURL);

url로 바꿨다면 이제 적용만 하면 됩니다. 앞서 useRef()로 지정해뒀던 image_input과 image_preview를 사용합니다.

먼저 이미지 입력을 유도했던 영역을 display: none으로 숨겨주고,

이미지를 넣을 영역을 display: flex로 보여줄게요.

마지막으로 image_preview의 자식 태그인 <img>를 가져오기 위해서 .children을 이용합니다. img는 첫번째 자식이니 .children[0]을 사용해줬어요. 마지막으로 변환한 url을 src 속성에 적용합니다.

div.preview {
	overflow: hidden
}
div.preview img {
	height: 100%;
}

끝으로 위와 같이 추가된 이미지가 박스를 꽉 채울 수 있도록 스타일 지정까지 해주면 완성입니다!

 

결과

완성!

예쁘게 이미지가 미리보기로 등록되는 것을 확인할 수 있습니다. :)

더 좋은 방법이 있을 것 같지만 일단 기능이 동작하게 만들었다는게 뿌듯하네요. 🥰