[React/리액트] 리액트로 .txt 파일 다운로드 예제

다운로드 버튼 클릭 시 사용자의 정보를 .txt 파일로 다운로드되게 해 달라는 요청을 받았다.
거두절미하고 바로 예제로 들어가보겠습니다

---

1) 컴포넌트

예제를 위해 간단한 버튼을 하나 생성하여 click 하면 exportTXT() 함수가 실행되게 작성했습니다

return  <button onClick={() => exportTxt()}>export</button>

2) 함수

  const exportTxt = useCallback(() => {
    let fileName = '파일이름.txt';
    let output = "string 타입의 데이터";
    const element = document.createElement('a');
    const file = new Blob([output], {
      type: 'text/plain',
    });
    element.href = URL.createObjectURL(file);
    element.download = fileName;
    document.body.appendChild(element); // FireFox
    element.click();
  },[])

여기서 핵심은 Blob object이다.
Blob 객체는 Binary Large Objects의 약자로 자바스크립트에서 텍스트뿐만 아니라 영상, 이미지 등 멀티 데이터를 담을 수 있다.

string 타입의 데이터를 Blob 객체에 담고
.txt파일에 텍스트를 담아 다운로드되게 할 예정이기 때문에 Blob객체의 옵션으로  { type: 'text/plain'}을 명시해주었다.

그다음 데이터가 담긴 Blob 객체의 URL을 URI.createObjectURL() 메서드를 사용해 DOMString으로 변환한다.
위 코드에서 URL.createObjectURL(file)을 콘솔에 찍어보면 아래와 같이 찍히는 것을 확인할 수 있다.

그리고 앞서 생성한 a 태그에 변환된 DOMString을 걸어주고 다운로드할 때 임의의 파일 이름도 지정해주었다.
예제를 위해 파일이름에 .txt 확장자까지 붙였다.

그다음 앞서 생성한 a태그에 클릭 이벤트를 걸어주면
버튼 클릭 시 파일이름.txt라는 이름으로 다운로드되는 것을 확인할 수 있다!

이건 간단예제입니다
각자 필요에 따라 수정해서 쓰면 될 듯.