이번엔 react 훅 중에 useReducer 훅에 대해 포스팅이다.
useReducer란??
- useState를 대체할 수 있는 함수.
- 보통 React에서 상태 관리를 위해 가장 많이쓰는 훅은 useState다.
- 하지만 더 복잡한 상태관리를 해야할 경우에는 useReducer 훅을 사용
useReducer의 구조
import React, { useReducer } from "react";
const [state, dispatch] = useReducer(reducer, initialState, init)
state : 컴포넌트에서 사용할 상태
dispatch 함수 : state 업데이트를 위한 요구
- 첫번째 인자인 reducer를 실행시키는 함수
- 컴포넌트 내에서 state의 업데이트를 일으키기 위해 사용
reducer 함수 : state를 업데이트 하는 역할
- 컴포넌트 외부에서 state를 업데이트 하는 함수
- 현재 state, action 객체를 인자로 받아,
기존의 state를 대체하여 새로운 state를 반환하는 함수
initialState : 초기 state
init : 초기 함수
dispatch 함수
- reducer 함수를 실행시킴
- action 객체를 인자로 받으며 action 객체는 어떤 행동인지를
나타내는 type 속성과 해당 행동과 관련된 데이터(payload)를 담고있음
- action을 이용하여 컴포넌트 내에서 state의 업데이트를 일으킴
이번 블로그에서 사용할 예제의 dispatch 함수는 다음과 같이 입력하였다.
ACTION_TYPES라는 객체에
각각 deposit, withdraw 키와 값을 주어 dispatch()함수에서
가져다가 쓸 수 있게 만들어주었다.
reducer 함수
- dispatch 함수에 의해 실행되며, 컴포넌트 외부에서 state를 업데이트하는 로직
- 함수의 인자로는 state와 action을 받게됨.
- state와 action을 활용하여 새로운 state 반환
switch문을 이용하여 action.type에 따라 case를 나누어서
새로운 상태와 데이터(payload)를 반환해준다.
마지막으로 컴포넌트 return값을 보면
페이지 결과
