React-csv로 csv 파일 다운로드하기

khy__·2021년 12월 9일

React csv react-csv

React

목록 보기

7/23

리액트 프로젝트에서 csv 파일 다운로드 하는 방법을 정리해보았다. react-csv 패키지를 사용하였고, 사용방법도 쉬워서 예제 코드만 봐도 쉽게 이해할 수 있다.

React-csv

react-csv 는 csv 파일을 다운로드 받을수 있는 패키지이다. 주간 다운로드 수도 많고 마지막 업데이트도 2020년 4월로 오래되지 않아서 괜찮은 패키지인것 같아 사용했다.

yarn 링크: https://yarnpkg.com/package/react-csv
github 링크: https://github.com/react-csv/react-csv

예시)

data props에 배열 데이터를 주면, 해당 데이터를 csv 형태로 다운로드 받을 수 있다. 코드 예시는 아래와 같다:

import { CSVLink, CSVDownload } from "react-csv";

const csvData = [
  ["firstname", "lastname", "email"],
  ["Ahmed", "Tomi", "ah@smthing.co.com"],
  ["Raed", "Labes", "rl@smthing.co.com"],
  ["Yezzi", "Min l3b", "ymin@cocococo.com"]
];
<CSVLink data={csvData}>Download me</CSVLink>;
// or
<CSVDownload data={csvData} target="_blank" />;

*참고: csv는 엑셀과 달리 raw 데이터이므로 포매팅이나 스타일을 입힐 수 없다. 스타일을 입히고 싶다면 sheetjs나 xlsx와 같은 패키지 사용을 추천한다.

0. 컴포넌트

react-csv는 CSVLink 와 CSVDownload 두 가지 컴포넌트를 제공한다.

CSVLink: 엑셀 파일을 다운로드 할 수 있는 링크 컴포넌트 이다. 해당 링크를 클릭했을 때에만 csv 파일을 다운받을 수 있다.
CSVDownload: 해당 컴포넌트가 마운트 될 때 자동으로 csv를 다운로드할 수 있는 컴포넌트이다.

나는 사용자가 클릭시에만 csv를 다운로드 하는 기능 구현을 위해 CSVLink 를 사용했다.

컴포넌트와 props

CSVLink 컴포넌트에서는 여러가지 props 를 사용할 수 있다.

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

아래는 props를 사용한 예제이다.

예시)

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

예제 프로젝트에서 csv 다운로드 링크를 클릭 시 특정 주문 데이터(배송 전)를 다운 받을 수 있도록 구현해보았다.

우선 header를 선언하고 주문 데이터를 react-query로 가져온 후, 주문 데이터를 헤더에 맞게 mapping 하였다. 또한, onClick props를 주어 엑셀 다운받기 전, confirm() 메서드로 사용자의 확인을 받아 '예'를 클릭했을 때만 다운로드 받을 수 있게 제한을 걸었다.

1. 설치

yarn, npm 혹은 cdn으로 설치가 가능하다.

yarn

yarn add react-csv

npm install react-csv --save;

<script src="https://cdn.rawgit.com/abdennour/react-csv/6424b500/cdn/react-csv-latest.min.js" type="text/javascript"></script>

2. 헤더 선언, 주문 데이터 가져오기

우선 CSVLink 헤더에 들어갈 header 변수를 선언하고, 주문 데이터를 react-query로 가져왔다.

// header 선언
const headers = [
    { label: 'Order ID', key: 'orderId' },
    { label: 'Item ID', key: 'itemId' },
    { label: 'Language', key: 'language' },
    { label: 'Created At', key: 'createdAt' },
  ];

// react-query로 (ready) 배송준비 상태의 주문 데이터 가져오기
// 최대 100개 까지만 가져올 수 있도록 함
  const {
    status,
    error,
    data: { objects: orders } = {},
  } = useQuery<Objects<Order>, Error>(
    ['orders', 'created_at desc'],
    getObjects({
      model_name: 'order',
      q: { s: 'created_at desc', status_eq: 'ready'},
      per: '100',
    }),
    {
      enabled: !!currentUser,
    },
  );

타입스크립트 적용을 위해 orderData의 인터페이스를 선언해주고,

// 인터페이스 선언
interface tableProps {
  orderId?: string;
  itemId?: string;
  language?: 'ko' | 'en';
  createdAt?: string;
}

// 2 에서 가져온 order 데이터를 헤더에 맞게 매핑
  const orderData =
    orders &&
    orders.map((order) => {
      const data: tableProps = {};

      container.orderId = order?.id;
      container.itemId = order?.item?.id;
      container.language = order?.language;
      container.createdAt = order?.created_at;

      return data;
    });

리턴된 orderData는 여러 객체의 배열 형식이다. 헤더에 들어가는 key를 기준으로 정렬하였다:

예시: orderData = [
	{orderId: 1, itemId: 2, language: 'ko', createdAt: 20210903}, 
     	{orderId: 2, itemId: 6, language: 'ko', createdAt: 20211011},
        {orderId: 2, itemId: 6, language: 'ko', createdAt: 20211011},
      ...
     ]

4. `CSVLink` 컴포넌트 적용

앞서 선언한 data, header를 CSVLink 컴포넌트에 적용해주고, 추가로 onClick과 filenameprops도 같이 선언해주었다.

onClick 의 경우, confirm 창에서 '확인'을 누르면 true 가 리턴되어 csv 파일이 다운로드 되며, '취로'를 누르면 false 가 리턴되어 다음 작업이 수행되지 않는다.

filename 는 moment 라이브러리를 사용해 현재 날짜에 맞는 이름으로 다운로드 받을 수 있도록 설정해주었다.

// data, headers, onClick, filename 설정
  <CSVLink
      data={orderData}
      headers={headers}
    	// confirm 창에서 '확인'을 눌렀을 때만 csv 파일 다운로드
      onClick={() => {
        if (confirm('csv파일을 다운로드 받겠습니까?')) {
          return true;
        } else {
          return false;
        }
      }}
      filename={`배송 준비 주문_${moment().format('YYYYMMDD')}`}
      >
    엑셀 다운로드
</CSVLink>

5. 결과

주문 데이터를 최대 100개 까지 가져와, 주문 id / 상품 id / 언어 / 생성일을 다운로드할 수 있는 기능을 구현하였다. '엑셀 다운로드' 버튼을 클릭하면 엑셀을 다운 받을 것이냐는 confirm 창이 뜨고, '확인'을 눌렀을 때 해당 csv 파일이 다운로드 된다.

프로젝트 예시 사진은 아래와 같다.

1) 엑셀 다운로드 버튼 레이아웃