useReducer

useReducer는 state를 생성하고 관리하는 도구이다.

 

그렇다면 state와 차이는 무엇일까?

{
	teacher: 'James',
    students: ['Kim', 'Ann', 'John'].
    count: 3,
    location: [
    	{count: 'Korea', name: 'A'}
    	{count: 'Australia', name: 'B'}
    ]
}

여러개 하위값을 포함하는 복잡한 state를 다뤄야 할 때 사용한다.

 

구성요소

• Reducer: Action의 내용대로 변경된 state를 업데이트를 해주는 역할을 한다.
• Dispatch: state를 변경하기 위해 Action을 요구하는것을 말한다.
• Action: Dispatch의 요구 내용을 말한다.

Dispatch(Action) → Reducer(State, Action)

디스패치 함수에 액션을 넣어서 리듀서에 전달하고 리듀서가 스테이트를 액션안 내용대로 업데이트를 시켜준다.

 

// 컴포넌트 바깥에 사용한다.
const reducer = [state, action] => {
	console.log('dispatch 함수 사용')]
    return state + payload
};

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


<p>{money}</p>

useReducer의 인자는 첫번째로 reducer와 money state에 들어갈 초기값이다.

reducer 함수는 현재 state와 action을 인자로 받는다. state는 reducer함수가 불리는 시점에 money state에 들어가 있는 값을 갖게 된다. reducer에게 state를 변경해 달라고 요구할 때 요구에 대한 내용이다.

 

useReducer를 통해 money라는 state를 만들었다. reducer를 통해서만 수정이 가능하다. 수정하고 싶을 때 마다 dispatch를 불러야 한다. dispatch는 useReducer가 만든 함수이다.

 

리듀서가 return 하는 값이 새로 업데이트 된 state이다.

하지만 리듀서는 한가지 액션만 하는게 아니다. 타입에 따라 다르게 액션을 수행한다.

 

이때 switch를 사용한다.

const reducer = [state, action] => {
	console.log('dispatch 함수 사용')]
    switch (action.type) {
    	case 'deposit':
        	return state + action.payload;
        case 'withdraw':
        	return state - action.payload;
        default:
        	return state;
    }
};

 

default를 넣어 지정한 type이 아닐경우 state를 반환하여 아무일도 일어나지 않는다.

 

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

const reducer = [state, action] => {
	console.log('dispatch 함수 사용')]
    switch (action.type) {
    	case ACTION_TYPES.deposit:
        	return state + action.payload;
        case ACTION_TYPES.withdraw:
        	return state - action.payload;
        default:
        	return state;
    }
};

<button onClick={() => {
	dispatch({ type: ACTION_TYPES.deposit, payload: number });
}}>예금</button>

객체를 만들어서 정리도 가능하다.

<button onClick={() => {
	dispatch();
}}>예금</button>

버튼 클릭시 디스패치를 호출하면 리듀서 함수가 실행이 된다.

state는 0, action은 undefined라고 뜬다.

<button onClick={() => {
	dispatch({ type: 'deposit', payload: number });
}}>예금</button>

액션은 오브젝트 형태이고, type을 넣고 리듀서에게 요구하고 싶은 내용을 넣는다. 이 때 action은 {type: 'deposit'}이 된다.