Blob과 File,

• 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;

• 위의 코드는 텍스트가 변경될 때 새 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/en/docs/Web/API/Blob

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