리액트 엑셀 - 5. 데이터 필드 변경 (xlsx, file-saver)

원래 댓글로 문의가 들어온 header freeze 기능을 먼저 했어야 하지만,

 

귀차니즘과 아직 우리 PM이 freeze해달라는 말이 없어서 미루고 미루다가 결국 다른 주제를 하게 되었습니다 😂

 

6번째로 가게 될거같습니다 😂

 

서버팀에서는 isSuccess 라는 필드에 boolean을 넣어서 보내주고 있었는데,

 

PM이 isSuccess가 true면 Success를 false면 Failed라는 text로 엑셀에 뽑아달라고 하네요 😂

PM: Kevin.. can i kill you?..

물론 제 컴포넌트에선 그냥 data array를 map으로 looping해서 뽑아주는거라 그 안에서 바꾸기는 힘들거 같고, 새 객체를 생성해서 주는 방법이 최선일거 같아서 어떻게 했는지 공유하려고 합니다.

 

---

일단은 아래처럼 데이터를 주고 있었고,

배열 데이터는 그냥 저렇게 바로 때려넣고 있었습니다 (변수로 관리하는게 더 귀찮았음 😂)

<ExcelImporter
    fileName="mass fulfullment"
    header={["order#", "Status", "Details"]}
    cellSize={[{ wpx: 100 }, { wpx: 100 }, { wpx: 500 }]}
    tabName="data"
    btnTxt="Download Result (excel)"
    data={data}
    dataOrder={["orderNum", "isSuccess", "errorDetails"]}
/>

 

위의 isSucess 필드에는 true/false가 들어오고 있었기 때문에, 아래처럼 data를 map으로 한번 돌아서 새 필드인 status를 추가해 주었고,

  const transformedData = data.map((item) => ({
    ...item,
    status: item.isSuccess ? "success" : "failed",
  }));

아래처럼 추가된 데이터와 추가된 필드를 다시  엑셀 컴포넌트에 보내주었습니다.

  <ExcelImporter
    fileName="mass fulfullment"
    header={["order#", "Status", "Details"]}
    cellSize={[{ wpx: 100 }, { wpx: 100 }, { wpx: 500 }]}
    tabName="data"
    btnTxt="Download Result (excel)"
    data={transformedData}
    dataOrder={["orderNum", "status", "errorDetails"]}
  />

그 결과 잘 해결이 되었네요 😁

 

이게 벌써 두달전의 코드인데, 다시 읽어보니까 리팩토링을 더 하고싶은 마음이 들기도 하고.. freeze 기능도 headerFreeze 라는 boolean으로 보내서 해보고 싶기도 하지만,,,,,,,,,,,,, 다음에는 꼭 header freeze로 글을 써보겠습니다. 😁