useReducer?

useReducer는 React에서 제공하는 Hook 중 하나로, 복잡한 상태 로직을 관리하는 데 사용됩니다. useState와 비슷하지만, useReducer는 보통 두 개의 인자를 받아 상태와 디스패치 메서드를 제공합니다.

useReducer 개념

1 ) reduce : state를 업데이트 해주는 역할

useReducer의 첫 번째 인자로는 reducer 함수를 받고, 두 번째 인자로는 상태의 초기 값을 받습니다. 상태 값과 dispath 함수를 반환함

const [money, dispatch] = useReducer(reducer, 0);

2 ) dispath : state 업데이트 요구 사항, 액션을 발생시키는 함수

dispath에는 action의 type과 payload가 들어갑니다. type은 어떤 액션인지 나타내주며, payload는 해당 행동과 관련된 데이터입니다.

dispath({type:"deposit", payload:number});

3 ) action : state 업데이트 내용

action은 dispath의 인자 reducer에 인자로 전달됩니다.

4 ) action type

action type은 코드를 더 깔끔하게 작성하기 위해서 작성하며, 보통 대문자로 작성하는 것이 관례입니다.

const ACTION_TYPES = {
  deposit: "deposit",
  withdraw: "withdraw",
};