[Next.js 14] 사용자 데이터 csv로 변환 및 파일로 다운로드

웹을 개발하다보면, 웹 관리자에게 필요한 기능을 추가해야 하는 경우가 있다.

이 포스팅 제목처럼 사용자 데이터를 csv 파일로 변환하고 다운로드하는 기능이 그 예시인데,

이 기능은 사용자 통계를 내거나 마케팅 메일 수신을 동의한 사용자에게 메일을 일괄 전송할 때 유용하다.

마케팅 팀에서 홍보 메일을 전송하기 위한 사용자 리스트를 요청했을 때,

다른 추가 작업 없이 관리자 모드에서 버튼 하나만 달칵 -> (수신 동의한) 메일 리스트가 나열된 csv 파일이 다운로드 된다면

엄청 편하지 않겠는가!

 

(물론 db에서 메일 리스트를 가져와 메일 수신 동의 여부로 필터링해서 보내주는 api가 사전에 구현되어 있어야 하긴 함)

 

암튼 서론이 길었는데, 코드를 보자.

const UserListDownloadButton = () => {
  const downloadCSV = () => {
    // 데이터 -> string 변환
    const dataString = "Name,Email\n" +
      user.map(user =>
        `"${user.firstName} ${user.lastName}",${user.email},`
      ).join("\n");
    // csv encoding format - utf-8로 설정
    const csvContent = "data:text/csv;charset=utf-8," + dataString;
    // url을 통해 다운로드할 수 있는 형태로 변환
    const encodedUri = encodeURI(csvContent);
    // 다운로드 링크 생성
    const link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", "user_list.csv");
    // 다운로드 링크 클릭
    document.body.appendChild(link);
    link.click();
    // 다운로드 링크 삭제
    link.remove()
  };

  return (
    <>
      <button onClick={downloadCSV}>CSV 다운로드</button>
    </>
  );
};

export default UserListDownloadButton;

 

사실 주석으로 다 적어둬서 설명할 것도 없다.

 

끗~