[JavaScript] FileReader 객체에 대해 알아보자

FileReader란 무엇인가?

 

 

[ FileReader란? ]

FileReader란 type이 file인 input 태그 또는 API 요청과 같은 인터페이스를 통해 File 또는 Blob 객체를 편리하게 처리할 수 있는 방법을 제공하는 객체이다.

 

abort, load, error와 같은 이벤트에서 발생한 프로세스를 처리하는데 주로 사용되며, File 또는 Blob 객체를 읽어서 result 속성에 저장한다. 개발자는 result 속성을 통해 데이터에 접근할 수 있다.

 

 

---

 

[ 비동기 동작 ]

JavaScript에서 setTimeout() 함수, AJAX 요청(API 요청)처럼 잠재적으로 시간이 소모되는 작업은 HTML 페이지 렌더링에 영향을 줄 수 있으므로 동기가 아닌 비동기로 동작한다. 비동기로 동작하면 HTML 페이지 렌더링 차단을 피할 수 있어, HTML 페이지 렌더링에 영향을 주지 않는다. 

 

FileReader도 마찬가지로 비동기로 동작한다.

 

type이 file인 input 태그에서 대용량 파일을 선택하고 파일 정보를 result 속성에 저장하는 과정이 동기식이라면,

파일 정보를 result 속성에 저장할 때까지 HTML 렌더링에 영향을 줄 수 있다. 

그렇기 때문에 FileReader도 비동기 방식으로 작동한다. 

 

 

 

---

 

[ FileReader 사용 방법 ]

new 연산자를 사용하여 FileReader 객체를 생성한다.

 

let fileReader = new FileReader();

 

FileReader 객체 생성 후 FileReader의 아래 네 가지 함수 중 하나를 호출하여 File 또는 Blob를 읽어서 result 속성에 저장한다. 네 가지 함수의 인수는 File 또는 Blob 객체이다.

 

• readAsText(): 파일 객체의 내용을 텍스트로 읽고, 파일의 내용인 result 속성에는 문자열 값으로 들어간다.
• readAsDataURL(): 파일 객체를 읽은 후 데이터 URL 표현으로 변환한다.
• readAsArrayBuffer(): 파일 객체의 내용을 배열 버퍼로 읽는다.
• readAsBinaryString(): 파일 객체의 내용일 비트 문자열로 읽는다. 

 

---

 

[ 결과 확인 및 처리 ]

주로 load, abort, error, progress 이벤트에서 FileReader 객체를 사용하여 결과를 확인하거나 처리할 수 있다.

 

• load: 파일 읽기 작업이 완료되면 작동한다.
• error: 에러로 인해 파일을 읽을 수 없을 때 동작한다.
• abort: abort() 함수를 호출하여 파일 읽기 작업이 취소될 때 동작한다.
• progress: 파일을 읽는 동안 일정한 간격으로 동작한다.

 

---

 

[ FileReader 객체의 주요 속성 ]

FileReader 객체는 여러 가지 속성이 있지만, 가장 핵심적인 속성은 세 가지이다.

 

• result: 파일 읽은 결과를 가지고 있거나 null 값을 가진다.
• error: 읽기 작업에서 발생한 오류를 설명하는 Error 객체를 가지거나 null 값을 가진다.
• readyState: 객체의 상태를 숫자로 관리한다.  

      [ readyState ]

      1. 0은 비어있음(Empty)으로 FileReader 객체에서 읽기 작업이 수행되지 않았음을 의미한다.

      2. 1은 로딩 중(Loading)으로 파일을 읽는 중을 의미한다.

      3. 2는 파일 읽기 작업이 완료(Done)되었음을 의미한다.