리액트 공부 - reduce를 활용하여 chart Data 재가공 하기

Reduce 함수란?

배열의 각 요소를 순회하며 callback함수의 실행 값을 누적하여 하나의 결과값을 반환하는 함수

arr.reduce(callback[, initialValue])

Reduce 매개변수

callback - 배열의 각 요소에 대한 실행함수

총 4가지의 인수를 받는다.

1. accumulato

• 콜백의 반환값을 누적함
• 콜백의 첫 번째 호출이면 initialValue를 제공한 경우에는 initialValue의 값

2. currentValue

• 처리할 현재 요소

3. currentIndex [옵션]

• 처리할 현재 요소의 인덱스
  initialValue를 제공한 경우 0, 아닌경우 1부터 시작

4. array [옵션]

• reduce()를 호출한 배열

5. initialValue [옵션]

• callback의 최초 호출에서 첫 번째 인수에 제공하는값.
• 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용
• 빈배열에서 초기값 없이 reduce()를 사용하면 오류 발생

const chartData = [
        { label: "Red", value: 12 },
        { label: "Blue", value: 19 },
        { label: "Yellow", value: 3 },
        { label: "Green", value: 5 },
        { label: "Purple", value: 2 },
        { label: "Orange", value: 3 },
  ];
const initalData = { names: [] as string[], prices: [] as number[] };
const { names, prices } = chartData.reduce((result, item) => {
        result.names.push(item.label);
        result.prices.push(item.value);
        return result;
    }, initalData);
    
    console.log(names , prices)

결과값 :

• names = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']
• prices = [12, 19, 3, 5, 2, 3]

코드 설명

1. initialData 객체를 생성하여 names와 prices라는 빈 배열을 명시적으로 타입을 지정하여 생성.

2. chartData 배열을 reduce 함수를 사용하여 가공하고, 그 결과를 구조분해(Destructuring)하여 names와 prices 변수에 할당.

• reduce 함수가 chartData 배열의
  result 객체의 names 배열에 item.label 추가
  result 객체의 prices 배열에 item.value 추가
  변경된 result 객체를 반환 하며 순회하여 같은 작업 수행

reduce 함수가 동작하여 initialData 객체가 초기값으로 사용되고, 해당 객체의 names와 prices 배열에 chartData의 각 항목의 label과 value가 추가.

names와 prices에는 chartData의 각 항목의 label과 value가 배열로 저장하여 가공된 데이터를 차트사용

data={{
  labels: names, // 
  datasets: [{ data: prices,

그려진 차트