React-csv 패키지 사용법

설치

npm install react-csv --save;
yarn add react-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" />;

CSVLink는 엑셀 파일을 다운로드 할 수 있는 링크 입니다. 해당 링크를 클릭했을 때에만 csv 파일을 다운받을 수 있으며, CSVLink 대신 button 태그를 사용하여 대체 할 수도 있습니다.

CSVDownload: 해당 컴포넌트가 마운트 될 때 자동으로 csv를 다운로드 해줍니다.

 

CSVLink props

<CSVLink
  data={data}
  filename={"my-file.csv"}
  className="btn btn-primary"
  target="_blank"
>
  Download me
</CSVLink>;

 

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

 

주의: CSVLink를 링크를 통해 다운로드 시 데이터가 생성되는 시점의 데이터만 가져오기 때문에 데이터가 생성된 이후에도 데이터를 가져와야 하는 상황이라면 꼭 onClick 핸들러를 사용하여 비동기 처리를 해야합니다. 

 

const getRecordExcelData = async () => {
    await setChangeExcelData(listExcelData.map((value) => {
      return value
    }))
    csvLink?.current?.link.click()
  }

<Button type="primary" style={{width: "16%"}} onClick={getReportExcelData} >
  성적표 Excel Download
</Button>
<CSVLink 
  data={changeExcelData} 
  ref={csvLink}
  filename={`toeic_exam_${id}_scoreboard`}
></CSVLink>