React Hook 정리 - useReducer

 

useState와 같이 상태 관리하기 위한 또다른 Hook

여러개의 하위값을 포함하는 복잡한 state를 관리할때 useReducer를 사용하면 코드 관리가 용이하다.

 

useReducer는 아래 3가지 요소로 이루어져있다.

 

1. Reducer

- State를 update해주는 역할. Component의 state는 반드시 Reducer를 통해 update해야한다.

 

2. Dispatch

- 사용자가 Reducer에게 요청하는 행위. 

 

3. Action

- Dispatch를 통해 요청하는 내용.

 

Dispatch (Action) ---------> Reducer(State, Action) -> Update State

 

/*
* userRecuder는 배열을 반환한다. like useState
* 반환되는 배열 요소는 상태값인 state와 useReducer가 만들어준 dispatch 함수이다.
*
* useReducer에 들어갈 인자는 1.reducer(아래 참조), 2.상기 state의 초기값이다.
*
* 아래 예시코드를 기준으로 보면 mystate 변수를 수정할 때마다 dispatch를 호출하여 reducer를 통해 이루어진다.
* reducer는 useReducer의 인자로 전달된다.
* dispatch의 인자는 action이다.
*/


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

/*
* reducer 함수는 두 가지 인자를 받는다. 1.현재state, 2.action
* state안에는 reducer함수가 불리는 시점의 mystate값이 들어가게된다.
* dispatch를 부르면 이 reducer가 호출된다.
*/

const reducer = (state, action) => {};

 

disptach 인자에 action을 전달할 때는 보통 object로 전달한다.

ex) dispatch({ type: "deposit", payload: number }); // type과 payload는 임의의 이름이다.
 
일반적인 경우, reducer함수 내에서 위 type 등의 정보를 기반으로 분기를 태워서 여러 변수를 관리할 수 있다. 

 

<내용 출처 - 별코딩 Hooks 강좌>

https://www.youtube.com/watch?v=tdORpiegLg0&t=227s&ab_channel=%EB%B3%84%EC%BD%94%EB%94%A9