관리자단 필수 기능 react-csv 활용한 CSV 파일 다운로드

react-csv

 

 

 

🤷‍♂️ react-csv란?

---

리액트로 관리자단 프로젝트를 진행하다 보면 엑셀 파일, CSV 파일 등등 파일을 다운로드 해주는 기능이 필요합니다.

 

project

 

위와 같이 기간별, 유형별로 통계한 데이터들을 CSV 파일로 다운로드 해주는 기능입니다.

 

 

 

🤷‍♂️ react-csv 라이브러리 선택한 이유

---

보통은 서버에서 데이터를 처리해 파일을 만들어 프론트에서 다운로드 받는 방식이 많이 사용됩니다.

 

그러나 저는 서버에서 파일을 처리하기보다 프론트에서 직접 CSV 파일을 다운로드하는 것이 더 효율적이라고 판단하여 react-csv 라이브러리를 사용해 기능을 구현했습니다.

 

이 라이브러리를 선택한 이유중에 하나는 주간 다운로드 횟수도 375,547 이며 가장 최근 까지 git활동이 원활했습니다.

 

recat-csv 공식 사이트

https://www.npmjs.com/package/react-csv

react-csv

 

types/react-csv

https://www.npmjs.com/package/@types/react-csv

@types/react-csv

 

🤷‍♂️ react-csv 다운로드

---

react-csv 다운로드는 간단합니다.

// npm 
npm i react-csv --save

// pnpm 
pnpm i react-csv 

// yarn
yarn add react-csv

// typescript
npm i --save @types/react-csv

 

프로젝트에 맞는 패키지로 다운로드 받으면 됩니다.

 

🤷‍♂️ react-csv 기능

---

react-csv 라이브러리는 2가지 기능을 제공합니다.

1. CSVLink: 이 기능은 클릭을 하면 엑셀 파일을 다운로드 받을 수 있는 기능입니다.
2. CSVDownload: 이 기능은 마운트 될때 자동으로 파일이 다운로드 되는 기능입니다. (마운트 될때 필수적으로 파일을 다운로드 받아야되는게 아니라면 권장되지 않습니다.)

 

 

🤷‍♂️ CSVLink 기능 옵션

---

• data: csv 파일에서 데이터가 들어가는 부분이며 데이터는 이중배열, 객체 배열 혹은 문자열 형식으로 사용할 수 있습니다..
• header: csv 파일에서 필드를 지정할 수 있으며 label과 key값을 줄 수 있습니다.
• filename: 다운로드 받는 csv 파일 이름을 지정할 수 있습니다.
• onClick: 링크를 클릭할 때 동기 / 비동기적으로 여러 작업을 수행하고자 할 때 사용할 수 있습니다.

사용법 예제

const headers = [
  { label: "First Name", key: "firstname" },
  { label: "Last Name", key: "lastname" },
  { label: "Email", key: "email" }
];

const data = [
  { firstname: "Ahmed", lastname: "Tomi", email: "ah@smthing.co.com" },
  { firstname: "Raed", lastname: "Labes", email: "rl@smthing.co.com" },
  { firstname: "Yezzi", lastname: "Min l3b", email: "ymin@cocococo.com" }
];

<CSVLink 
  data={data} 
  headers={headers} 
  filename={'CSV 데이터'}
  onClick={() => {
    console.log("링크 클릭함");
  }}
  >
  Download me
</CSVLink>;

 

코드에서 보는 것처럼 header에 필드를 셋팅할 수 있고 데이터를 객체 배열로 셋팅할 해서 원하는 데이터를 볼수 있도록 CSV 파일을 만들수 있습니다.

 

CSVLink onClick 예제

const headers = [
  { label: "First Name", key: "firstname" },
  { label: "Last Name", key: "lastname" },
  { label: "Email", key: "email" }
];

const data = [
  { firstname: "Ahmed", lastname: "Tomi", email: "ah@smthing.co.com" },
  { firstname: "Raed", lastname: "Labes", email: "rl@smthing.co.com" },
  { firstname: "Yezzi", lastname: "Min l3b", email: "ymin@cocococo.com" }
];

<CSVLink 
  data={data} 
  headers={headers} 
  filename={'CSV 데이터'}
  onClick={() => {
        if (confirm('csv파일을 다운로드 받겠습니까?')) {
          return true;
        } else {
          return false;
        }
   }}
  >
  Download me
</CSVLink>;

 

다운로드 전에 확인 창을 띄워, 확인을 누르면 true, 취소를 누르면 false를 반환하도록 설정할 수 있습니다.

 

alert

 

react-csv 파일 다운로드 받은 파일

excel

 

🤷‍♂️ 마지막으로

---

react-csv 라이브러리를 사용해 프론트엔드에서 파일 다운로드 기능을 구현했습니다.

 

이 라이브러리는 두 가지 주요 기능을 제공하며, 상황에 맞게 선택해 사용할 수 있습니다.

 

특히 CSVLink는 다양한 옵션을 제공하여 파일 다운로드를 쉽게 커스터마이징할 수 있어 간편하게 엑셀 파일 다운로드 기능을 구현할 수 있습니다.

 

 

---

 

재밌는 오늘의 띠별 운세 보고 가세요! 

 

 

https://cometruedream.tistory.com/247

[React] Tailwind 한줄, 두줄, 세줄 효과 className 커스텀

 

 

https://cometruedream.tistory.com/243

NestJS Lifecycle (생명주기) 개념

 

 

https://cometruedream.tistory.com/242

리액트 Vite Proxy 활용한 CORS 오류 해결

 

 

https://cometruedream.tistory.com/241

React 폴더구조 FSD 기능 분활 설계 아키텍처

 

 

https://cometruedream.tistory.com/244

쉽게 이해하고 사용할수 있는 Prisma 명령어 정리