Blob과 File, FileReader 사용하여 파일(.txt) 읽고 쓰기

blob은 전에도 사용한 적이 있지만, 이번에 다시 사용하며 사용한 내용을 정리하기로 하였다.

• Blob은 JavaScript 네이티브 형태가 아닌 데이터또한 표현할 수 있다. 
• File이 Blob에 기반한 인터페이스로, 사용자 시스템의 파일을 지원하기 위해 Blob 인터페이스를 상속해 기능을 확장한 것이다.
• Blob과 File은 생성자를 통해서 인스턴스를 만든다.

import { useState, useEffect } from "react";

const IoComponent = ({setTexts, texts}) => {
    const [url, setUrl] = useState("");

    useEffect(() => {
        const blob = new Blob([texts], {type: "text/plain"});
        const file = new File([blob], "your_text.txt");
        const url = URL.createObjectURL(file);
        setUrl(url);
    }, [texts]);

    return (
      <div>
          <a href={url} download="your_text.txt" >다운로드</a>
      </div>
    );
}

export default IoComponent;

• 위의 코드는 text가 변할 때 마다 File 객체를 새로 생성하고 다운로드 링크를 생성한다.
• 다운로드 버튼을 클릭하면, 해당 파일(.txt)을 내려받을 수 있다.

import { useState } from "react";

const IoComponent = ({setTexts, texts}) => {
    const [url, setUrl] = useState("");

    const inputFileHandler = (e) => {
        const file = e.target.files[0];

        const fileReader = new FileReader();
        fileReader.readAsText(file);
        
        fileReader.onload = () => {
            // 기존 텍스트에 읽은 파일의 텍스트 추가
            setTexts(texts + "\n" + fileReader.result);             
        };        
    }

    return (
      <div>
          <input type="file" onChange={inputFileHandler}/>
      </div>
    );
}

export default IoComponent;

• 위의 코드는 input 태그가 있는데 파일을 받을 수 있다.
• 제공받은 파일(.txt)을 FileReader 객체로 읽은 뒤 기존의 텍스트 뒤에 이어붙인다.

https://developer.mozilla.org/ko/docs/Web/API/Blob

Blob - Web API | MDN

https://developer.mozilla.org/ko/docs/Web/API/File

File - Web API | MDN