[React] 파일 업로드 기능 구현

React를 통해 파일 업로드 기능을 구현하기 위해 우리는 미리 알아야할 지식이 있다. 

• 첫 번째는 이미지와 비디오, 오디오 파일과 같은 파일이 어떻게 이루어져 있는 지를 알아야한다. 
• 두 번째는 input태그의 type이 file일 때 미리보기 기능의 경우 올린 파일의 URL객체의 createObjectURL메소드를 이용하는 것이다. 
• 세 번째는 React의 useRef훅을 사용해 직접적으로 HTML요소의 레퍼런스 값에 접근하는 법이다. 

1. BLOB이란?

우리가 웹에서 객체를 다룰 때 흔히 json이라는 형식의 key, value쌍으로 이루어진 형식으로 다루게 된다. 하지만 파일이나 영상 이미지와 같이 용량이 큰 파일은 어떻게 다룰 것인가?

우리는  웹에서 이렇게 멀티미디어 데이터를 다룰 때 Blob이라는 데이터 타입을 이용한다. 

Blob(Binary Large Object)에는 데이터의 size를 알아내거나 데이터 송 수신을 위해 더 작은 blob 객체로 나누는 등 다양한 범위에서 사용될 수 있다. 

우리가 이미지나 영상 자료를 다룰 때에는 이 Blob데이터타입을 이용한다. 

 

2.URL.createObjectURL

서비스에서 내가 올린 파일을 서버를 통해 DBMS로 전송하기 전 내가 올린 파일을 서비스내에서 확인하고 싶은 경우가 있다. 이 때 사용하는 것이 URL.createObjectURL메소드이다. 이 메소드를 이용하면 내가 업로드한 파일의 url을 만들어준다. 단 이 때 만들어진 url은 서버로 전송되는 것이 아니라 client단에서만 이용가능하다.

 

3.UseRef

리액트에서 제공하는 대표적인 훅 중 하나이다. input태그와 같이 사용자가 값을 직접입력하는 html태그에 직접적으로 접근하여 값을 가져오는 것을 가능하게 한다.  사용법은 아래에 코드를 보며 얘기해보겠다. 

 

4. 구현

 1. 파일 접근 

내가 만든 fileUpload 기능의 렌더링 부분이다. FileuploadForm이라는 form태그안에 input과 button이 들어가 있고 맨 위에는 {showImage}함수를 이용해 내가 업로드 한 파일을 미리볼 수 있도록 할 것이다. 

 

이 때 input태그 안에는 속성으로 type = file accept = image/jpg, image/jpeg, image/png를 주었다. 다음과 같은 형식의 파일만 올릴 수 있도록 하겠다는 뜻이다. 

또한 ref 속성을 주었는데 여기서 useRef의 사용법이 나온다. 사용법은 간단하다. 

 

컴포넌트 내부의 다음과 같이 useRef를 통해 사용할 변수를 하나 설정해주고 내가 참조하고 싶은 html요소에 ref속성으로 주면 된다. 

이렇게 되면 우리는 fileinputRef라는 변수를 통해 우리가 올린 파일 값에 접근할 수 있다. 

나는 이 input에 해당하는 값이 클릭될 때마다 파일을 업로드 할 수 있는 창을 띄울 것이다. 

 2. 파일 업로드 기능

우선 blob객체 중 이미지 파일은 다음과 같은 타입을 지닌다. 하지만 이 타입들도 웹에서 기본적으로 제공하는 Blob 객체의 많은 속성 중 내가 필요한 것만을 뽑은 것일 뿐 실제로는 더 많다. 

그럼 나는 이 타입을 이용해 form에서 input을 눌렀을 때 파일을 업로드하는 기능을 만드려고 한다. 

구현한 파일 업로드 기능은 다음과 같다. 우선 컴포넌트 내부에서 올린 파일을 저장할 수 있는 state를 하나 만들어준다. 나같은 경우 imageFile이라는 변수안에 setImageFile이라는 setter를 통해 저장해주기로 했다. 

그 후 form에서 input태그를 통해 파일이 업로드 될 때 마다 즉 업로드 된 파일이 바뀔 때 마다(ChangeEvent) 이벤트의 target의 files에 접근한다. 우리는 하나의 파일만을 올릴 것이기 때문에 fileList배열에는 [0]번째 인덱스에 해당하는 공간에만 파일이 존재할 것이다. 그 후 파일이 존재한다면 이미지 미리보기 기능을 위해 URL.createObjectURL메소드를 이용해서 url을 브라우저 상에서 만들어준다. 그 후 앞서 만들어 둔 imageFile 변수에 setter를 통해 저장해준다. 

 

 3. 업로드 된 이미지 파일 미리보기 

구현한 미리보기 기능은 다음과 같다. 앞서 업로드 될 때 마다 imageFile 변수에 다른 값이 저장되도록 구현해놓았는데 여기서는 조건문을 통해 imageFile이 존재하지 않다면 기본 이미지를 보여주고 만약 존재한다면 img태그를 리턴한다. 

이 때 src는 아까 우리가 imageFile에 저장한 thumbnail에 해당하고 alt는 string이면 상관없다. 

그 후 렌더링 되는 부분에 전달해주면 끝이난다. 

 

5. 결과

기본 이미지

처음 들어가면 다음과 같이 내가 설정해 둔 기본 이미지가 나온다. 

파일 업로드 버튼을 누르면 다음과 같이 파일을 올릴 수 있는 창이 나온다. 

파일을 선택해서 제출하면 다음과 같이 내가 제출한 이미지를 미리보기 할 수 있다.