(React) 파일을 다운로드하는 방법(TypeScript)

사진이나 동영상 파일 다운로드를 구현하는 방법을 생각해 보았는데, 이 기능은 아주 간단한 기능입니다.

블로그도 잘 정리되어 있고 익숙해지면 금세 할 수 있을 거에요!

1⃣클릭 이벤트 기능

const onClickImgLink = useCallback((srcUrl: string, name: string) => {
   fetch(srcUrl, { method: 'GET' }).then((res) => res.blob()).then((blob) => {
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = name;
      document.body.appendChild(a);
      a.click();
      setTimeout((_) => {
      window.URL.revokeObjectURL(url);
      }, 1000);
      a.remove();
   }).catch((err) => {
      console.error('err', err);
   });
}, ());

나는 그대로 사용하고 완벽하게 작동합니다.

백그라운드 데이터를 받을 때 사진이나 동영상을 문자열 주소로 받을 수 있어요!

props로 받은 이름은 본인의 코드에 맞게 수정하셔도 상관없습니다.

데이터가 여러 개라서 지도를 실행해서 사용했습니다.

노트 블로그:

https://velog.io/@chaeri93/React-%ED%8C%8C%EC%9D%BC-%EC%97%85%EB%A1%9C%EB%93%9C-%EB%B0% 8F-%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C-%EB%B2%84%ED%8A%BC%EC%9C%BC%EB%A1% 9C-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

(React) 파일 업로드, 다운로드 버튼 구현

먼저 버튼의 html은 다음과 같습니다.

파일 업로드 시 버튼의 색상을 초록색으로 채운 후 옆에 다운로드 버튼과 삭제 버튼이 생성됩니다.

삼항 연산자를 사용하여 구현

속도.io