[React] Hooks : useReducer( )

📝 useReducer

useReducer는 useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용하는 Hook입니다.
Reducer는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 action 값을 전달받아 새로운 상태를 반환하는 함수입니다.
새로운 상태를 만들 때는 반드시 불변성을 지켜 주어야 합니다.

function reducer(state, action){
	return { ... } // 불변성을 지키면서 업데이트한 새로운 상태를 반환합니다.
}

📜 useReducer 활용

import { useReducer } from 'react';

function reducer(state, action){
	// action.type에 따라 다른 작업 수행
  	switch (action.type){
      case 'INCREMENT':
        return { value : state.value + 1 };
      case 'DECREMENT':
        return { value : state.value - 1 };
      default :
        //아무것도 해당되지 않을 때 기존 상태 반환
        return state;
    }
}

const Counter = () => {
	const [state, dispatch] = useReducer(reducer, { value: 0 });
  
  	return(
    	<div>
      		<p>{ state.value }</p>
      		<button onClick={() => dispatch({ type: 'INCREMENT' })}>+1</button>
			<button onClick={() => dispatch({ type: 'DECREMENT' })}>-1</button>
      	</div>
    )
}
export default Counter;

useReducer의 첫 번때 파라미터에는 리듀서 함수를 넣고, 두 번째 파라미터에는 해당 리듀서의 기본 값을 넣어 줍니다.

이 Hook을 사용하면 state 값과 dispatch 함수를 받아 오는데 여기서 state는 현재 가리키고 있는 상태이고, dispatch는 액션을 발생시키는 함수입니다. dispatch(action) 과 같은 형태로, 함수 안에 파라미터로 액션 값을 넣어 주면 리듀서 함수가 호출되는 구조입니다.

useReducer를 사용했을 때 가장 큰 장점은 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 빼낼 수 있다는 것입니다.