감소란 무엇인가

배열과 함께 사용할 수 있는 for..each 및 map와 같은 JavaScript의 ES5 메서드입니다.

차이점은 다음과 같습니다.

이름에서 알 수 있듯이 배열의 값 수를 하나로 줄입니다.

배열의 현재 값 및 인덱스와 별개로 배열의 이전 값에 액세스할 수 있습니다.

누산기의 시작 값을 콜백 함수로 보냅니다. 따라서 처음 시작할 때 이전 값은 누산기의 시작 값

과 동일합니다.

reduce 사용의 간단한 예

reduce를 사용하여 배열의 합계를 계산하는 간단한 예를 살펴보겠습니다.
어레이가 있다고 상상해 보십시오: [98,45,33,47,100,80]다음 코드를 작성하여 reduce 메서드를 사용하여 이 배열의 값을 합산할 수 있습니다.

const scores = [98,45,33,47,100,80];
const totalScores = scores.reduce(
(previousScore, currentScore, index)=>previousScore+currentScore, 
0);
console.log(totalScores); //returns 403

코드에서 일어나는 일은 다음과 같습니다.

배열 reduce에서 scores 메서드를 호출합니다.

메서드는 배열의 previous 값, current 값 및 index 에 액세스할 수 있습니다.
*이 예에서는 index를 사용하지 않습니다.

우리는 accumulator 의 초기 값으로 0을 보냅니다.

메서드가 처음 실행될 때(여기서 currentScore는 98), previousScore는 콜백 함수로 전송된 값이 0이라고 가정합니다.

totalScores의 결과는 403입니다.

accumulator의 초기 값을 100으로 변경하면 totalScores의 값이 503으로 변경됩니다.

const scores = [98,45,33,47,100,80];
const totalScores = scores.reduce(
(previousScore, currentScore, index)=>previousScore+currentScore, 
100);
console.log(totalScores); //returns 503

리액트에서 리듀스 사용하기

App 구성 요소에 다음과 같은 데이터 구조가 있다고 가정합니다.

  const course = {
    name: 'Half Stack application development',
    parts: [
      {
        name: 'Fundamentals of React',
        exercises: 10,
        id: 1
      },
      {
        name: 'Using props to pass data',
        exercises: 7,
        id: 2
      },
      {
        name: 'State of a component',
        exercises: 14,
        id: 3
      }
    ]
  }

Total 구성 요소에 총 운동 수를 표시하려면:
App에서

parts에 소품으로 Total 보내기:

Total 의

에서 reduce 의 parts 메서드를 호출합니다.

parts에는 name , exercises 및 id 여러 값이 포함되어 있습니다.

따라서 계산에 사용하려는 값으로 exercises를 명시적으로 지정합니다.

App.js :

import React, { useState } from "react";
import ReactDOM from "react-dom";
import Total from "./components/Total";

const App = () => {
  const course = {
    name: "Half Stack application development",
    parts: [
      {
        name: "Fundamentals of React",
        exercises: 10,
        id: 1
      },
      {
        name: "Using props to pass data",
        exercises: 7,
        id: 2
      },
      {
        name: "State of a component",
        exercises: 14,
        id: 3
      }
    ]
  };

  return (
    <div>
      <Total parts={course.parts} />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

Total.js :

import React from "react";

const Total = props => {
  const total = props.parts.reduce(
    (prevValue, currentValue) => prevValue + currentValue.exercises,
    0
  );
  return <p>Totalzzz: {total}</p>;
};

export default Total;

결과:

도움이 되었기를 바랍니다!