react-csv 사용해서 엑셀 다운로드 해보기

프로젝트에서 관리자 페이지 기능 중에서 사용자나 게시물 데이터를 엑셀로 받을 수 있는 기능을 구현해야했다. 

많이 알려진 라이브러리 중에서는 react-csv라는 라이브러리가 있어서 적용을 해봤다. 

 

React- csv

 

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

react-csv

 

last publish가 3년 전이라 좀 슬프지만 그래도 다운로드 횟수가 나름 높으니 괜찮을거다..

npm install react-csv --save


npm install react-csv --save @types/react-csv

 

일단 npm으로 csv를 설치, 타입스크립트를 사용하는 내 프로젝트의 경우 아래 명령어를 사용해 받았다. 

 

react-csv에는 기본적으로 2개의 컴포넌트를 지원한다. 

 

1. CSVLink

2. CSVDownload

 

CSVLink 는 해당 링크를 클릭하면 csv 파일을 다운 받을 수 있도록 하는 것

CSVDownload는 해당 컴포넌트가 마운트 될 때 다운로드가 트리거 되는 것 

 

나는 버튼을 클릭하면 엑셀파일을 받을 수 있도록 해야되기 때문에 CSVLink를 사용했다. 

import { CSVLink } from "react-csv";

const Csv = () => {
  return (
    <div className={styles.container}>
      <h1>액셀 다운로드</h1>
    </div>
  );
};

export default Csv;

 

 일단 react-csv 패키지에서 CSVLink를 import 해오자

 

CSVLink가 받을수 있는 props들이다 여기에 className도 사용 가능 !  

 

 

CSVLink를 import 했으면 다운로드 버튼을 만들어주자. 어차피 테스트니까 큼직큼직하게 만들어준 다음에 

import styles from "./csv.module.scss";
import { CSVLink } from "react-csv";

const Csv = () => {
  return (
    <div className={styles.container}>
      <CSVLink className={styles.csv}>액셀 다운로드</CSVLink>
    </div>
  );
};

export default Csv;

//css
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  .csv {
    padding: 100px;
    background: beige;
    font-size: 40px;
  }
}

 

 

CSVLink의 props중에서 엑셀 형식으로 받으려면 기본적으로 header와 data는 필수인 것 같다.

header에는 엑세 최상단 분류되는 항목 / data는 header 항목 아래도들어가는 데이터들, 표로 예를 들면

header ->	이름	나이	국가
data->	짱구	10	ko
data->	철수	20	us
data->	맹구	30	jp

이런식으로 들어가고 fileName prop은 다운로드 했을 때 받아지는 파일명으로 " poeple.csv" 이런식으로 할 수 있다.   

 

data에 들어가는 타입으로는 문자열, 2차원 배열, 객체배열 타입이 들어간다고 한다. 

api로 받아오는 json데이터의 경우 보통 객체배열 형식이 많으니 나는 객체배열 타입으로 데이터를 넣을 것!

 

const Csv = () => {
  const csvData = [
    {
      name: "짱구",
      age: 10,
      country: "ko",
    },
    {
      name: "철수",
      age: 20,
      country: "us",
    },
    {
      name: "맹구",
      age: 30,
      country: "jp",
    },
  ];

  return (
    <div className={styles.container}>
      <CSVLink className={styles.csv} data={csvData}>
        액셀 다운로드
      </CSVLink>
    </div>
  );
};

export default Csv;

 

csvData란 객체배열로 된 데이터를 만들고 CSVLink 컴포넌트의 data prop에 csvData를 넣어주고 이제 이 데이터들의 카테고리를 정하는 header를 만들어줘야한다. 

 

const Csv = () => {
  const csvData = [
    {
      name: "짱구",
      age: 10,
      country: "ko",
    },
    {
      name: "철수",
      age: 20,
      country: "us",
    },
    {
      name: "맹구",
      age: 30,
      country: "jp",
    },
  ];

  const headerData = [
    { label: "이름", key: "name" },
    { label: "나이", key: "age" },
    { label: "국가", key: "country" },
  ];

  return (
    <div className={styles.container}>
      <CSVLink className={styles.csv} 
      data={csvData} 
      headers={headerData}
      filename="userData.csv"
      >
        액셀 다운로드
      </CSVLink>
    </div>
  );
};

header는  이런식으로 label과 key를 사용하고  label이 카테고리?? 분류하는 이름이 되고 key는 data의 key와 맞춰서 작성해야한다.  그리고 headers prop에 header를 넣어주자. 추가로 filename도 같이 설정,

그리고 가운데 화면의 엑 다운로드를 누르면 

이렇게 csv파일이 잘 받아지고 엑셀로도 header, data로 나눠진 걸 확인할 수 있다.

 

 

만약 data에 header에 없는 key가 있으면 해당 key는 자동적으로 제외되고 파일이 받아진다.