useReducer()

Array.prototype.reduce

reduce() 함수는 배열의 모든 요소를 하나의 값으로 축소하는데 사용된다.

reduce(콜백함수, 초기값)

reduce 메서드의 동작 원리

reduce 메서드는 자신을 호출한 배열을 모든 요소를 순회하며 인수로 전달받은 콜백 함수를 반복 호출한다. 그리고 콜백 함수의 반환값을 다음 순회 시에 콜백함수의 첫번째 인수로 전달하면서 콜백함수를 호출하여 하나의 결과값을 만들어 반환한다. 이때 원본 배열은 변경되지 않는다.

const num = [1, 2, 3, 4];

const sum = num.reduce((accumulator, currentValue) => acc + cur, 0);

console.log(sum);// 10

accumulator = 현재까지 누적된 값(let total=0 의 역할을 해주는 것과 유사 → 초기값은 reduce의 두번째 인자로 넣어준다.)

• 반환값은 다시 accumulator로 간다.

currentValue = 현재 처리 중인 요소(첫번째 요소가 실행중이면 currentValue는 1이 되고, 두번째 요소가 실행중이면 2가 된다.

 

 

useReducer

• useState와 비슷함. → 상태 관리를 더욱 효과적으로 해줌
• useReducer를 사용하면 함수 구현 자체에만 집중할 수 있다. 상태를 따로 빼서 관리하고 싶을때 사용하는 메서드이기 때문이다. 다른 컴포넌트를 뒤지지 않고, 상태 변경 로직을 확인할 수 있으니 편하다.

Reducer

• state를 업데이트 하는 역할

Dispatch

• state 업데이트를 위한 요구

Action

• 요구의 내용

기본 API

const reducer = (state, action) => {
  console.log("reducer가 동작합니다.");
};
function App() {
	const [money, dispatch] = useReducer(reducer, 0);
	
	...//
	
	
	      <button
        onClick={() => {
          dispatch({ type: "deposit" });
        }}
      >