💁 데이터 가공을 통한 차트 및 탭기능 구현

하나의 데이터와 두개의 기능들

구현한 기능은 위와 같은 도넛 차트!

그런데 데이터 구조는 어떻게 들어오며, 이를 어떻게 가공해서, 어떻게 분리해서 탭으로 나눌 수 있을까? 차트와 차트설명 부분만 생각해도 머리가 아픈데, 탭기능까지 구현하려니 머리가 아파왔다.

주어진 데이터는 아래와 같았다.

 "investStatus": {
      "totalInvest": 1485000,
      "complete": 1193824,
      "delay": 11531,
      "invest": 209781,
      "loss": 81395,
      "normal": 182446,
      "overdue": 4087,
      "nonperform": 11717
    }

이걸 어떻게 가공하지!?!??!?!

해결방법

일단 도넛차트 부터 만들어보자

일단 Props로 넘겨받을 데이터기에 구조분해 할당을 해준다.

// 구조분해할당
  const {
    totalInvest,
    complete,
    delay,
    invest,
    loss,
    normal,
    overdue,
    nonperform,
  } = investStatus;

그리고 1번 탭과 2번 탭에 들어갈 데이터를 분리해야했다.
일단 탭별로 묶일 데이터를 나눠 객체로 관리를 해준다.

//전체투자액와 투자중금액 데이터 나눠주기(탭으로 분리됨)
  const selectedData = {
    total: { invest, complete, loss },
    investing: { normal, delay, overdue, nonperform },
  };

다음으로 선택된 탭에 따른 데이터 변경을 위해 entries를 이용하여 배열을 만든다.

// 선택된 탭에 따른 데이터 변경(디벨롭 할 수 있을지 궁금...)
  const selectedDataList = currentData
    ? Object.entries(selectedData.total)
    : Object.entries(selectedData.investing);

각 단어는 구조분해할당을 해줬기때문에 사실 키와 밸류값으로 이루어져있는 객체이다. 따라서 entries를 사용하면 [키, 밸류] 형태의 배열로 반환이 된다.(나는 탭 클릭시 state값을 불리언값이 변경되는 형태로 함수를 짰기에 삼항연산자로 구현할 수 있었다.) 그 값은 아래의 형태와 같다.

//currentData가 total(true)일때
[
  [ 'invest', 209781 ],
  [ 'complete', 1193824 ],
  [ 'loss', 81395 ]
]
//currentData가 investing(false)일때
[
  [ 'normal', 182446 ],
  [ 'delay', 11531 ],
  [ 'overdue', 4087 ],
  [ 'nonperform', 11717 ]
]

entries가 이렇게나 유용하답니다.(후후)

신난다. 이제 맵으로 돌려서 데이터를 원하는 위치에 넣어주기만 하면된다.
그런데, 차트데이터는 보통 함수를 따로 다른 파일에 분리해서 관리하는게 더 좋기때문에 아래와 같은 함수를 다른 파일에 넣고 이를 임포트해와서 사용한다.

export const makeChartData = rawData => {
  const result = {
    datasets: [
      {
        labels: rawData.map(([name, value]) => name),
        data: rawData.map(([name, value]) => value),
      },
    ],
  };

  return result;
};

다시 원래 js파일에 돌아와 아래와 같이 적용한다.

// 차트 데이터 생성
  const chartData = makeChartData(selectedDataList);

그렇게 하면 짠!하고 도넛 차트가 완성이 되는 것을 볼 수 있다.(두근두근)

이제 차트 캡션을 만들어보자

위에 만들어둔 데이터를 그래도 쓸 수 없었던 것이... 과거의 내가 HTML구조를 이렇게 짰기 때문이다...

<ChartDesc>
      <DescContent>
        <Circle className="fas fa-circle"/>
        <ChartTitle>title</ChartTitle>
        <ChartValue>1,000,000원</ChartValue>
      </DescContent>
    ))}
</ChartDesc>

즉, 원, 데이터 키, 데이터 밸류를 맵으로 돌렸기에 또 다른 데이터를 가공했어야했다.

그러나 이대로 Map을 돌리면 원하는 바와 다르게 영어로 데이터가 표현될 것이다. 따라서 상수데이터를 만들어 이름을 바꿔 맵을 돌려야 한다.

const NAME_MATCH = {
  totalInvest: '누적 투자 원금',
  complete: '투자완료',
  delay: '상환지연',
  invest: '투자중',
  loss: '손실',
  normal: '정상',
  overdue: '연체',
  nonperform: '부실',
};

(몰랐는데 참고로 상수데이터는 보통 대문자로 변수명을 지정해준다고 한다.)

이렇게 상수명을 만들었으면 우리가 잘 하는 이름 바꿔주기를 하면된다. 이것도 맵을 통해서 가능하다.

const ConvertToChartData = selectedDataList.map(([name, value]) => [
    NAME_MATCH[name],
    value,
  ]);

그렇게 하면 그 결과값은 각각 아래와 같다.

[
  [ '투자중', 209781 ],
  [ '투자완료', 1193824 ],
  [ '손실', 81395 ]
],
[
  [ '정상', 182446 ],
  [ '상환지연', 11531 ],
  [ '연체', 4087 ],
  [ '부실', 11717 ]
]

자 그럼 맵을 신나게 돌려주면 끝난다!

<ChartDesc>
    {ConvertToChartData.map(([title, totalValue], idx) => (
      <DescContent key={title}>
        <Circle className="fas fa-circle" color={idx}></Circle>
        <ChartTitle>{title}</ChartTitle>
        <ChartValue>{totalValue.toLocaleString()}원</ChartValue>
      </DescContent>
    ))}
</ChartDesc>

느낀점

사실 탭을 어떻게 구현할지 정말 막막해서 무작정 멘토님을 찾아기도 했는데, 한번 방법을 알고나니 왜 도전하지 않았을까 싶었다! 항상 쫄지말고 용감하게 코딩하자고 마음먹었다. 그리고 언젠가 멘토님이 좋은 프론트엔드 엔지니어는 어떤 데이터가 와도 잘 가공할 줄 아는 사람이라고 말씀하셨는데, 그 말씀을 언제나 마음에 품고 가능한 데이터에 변동없이 그대로 가져와 신나게 가공하여 쓰는 연습을 해야겠다고 생각했다. 이번 기능구현은 그 연습을 하는데에 최적이었고, 정말 재미있게 구현한 것 같다. 왕뿌듯!!