useReducer, React-hooks(3)

8-3 useReducer

useState와 useReducer는 컴포넌트의 상태를 관리하는 hook이다.
useReducer는 컴포넌트와 상태 업데이트 로직을 분리하여 컴포넌트 외부에서도 상태관리를 할 수 있다
useReducer를 사용하면 컴포넌트 바깥에서도 작성할 수 있고, 다른 파일에 작성하여 불러와서 사용할 수도 있다.

 

1. 컴포넌트 외부에 상태 업데이트 로직의 reducer함수 작성
기본형태 : function reducer(state, action) { ... }

function reducer (state, action) {
  switch (action.type){
    case 'INCREMENT' :
      return {value : state.value+1}
    case 'DECREMENT':
      return {value : state.value-1}
    default : 
      return state
  }
}

 

2. useReducer함수 사용
기본형태 : const [state, dispatch] = useReducer(reducer,initialState)

state : 현재상태
dispatch : action발생 함수 : diaptch({type:'INCREMENT})
reducer : 상태업데이트 로직을 담은 함수
initialState : 초기값

const ReducerEx=()=>{
  const [state, dispatch] = useReducer(reducer, {value : 0});
  // 현재상태값 : state의 이름을 주고, 액션발생 함수 dispatch를 가져온다
  // useReducer의 첫번째 파라미터로 reducer함수(컴포넌트 밖에 작성한)를 넣어주고 
  // 초기값은 0으로 설정한다

  return (
    <>
      <p>현재카운터 값은 <b>{state.value}</b> 입니다</p>
      <button onClick={()=> dispatch({type:'INCREMENT'})}> +1 </button>
      <button onClick={()=> dispatch({type:'DECREMENT'})}> -1 </button>
    </>
  )
  // 버튼을 클릭했을 때, dispatch 함수를 호출해서 type이 담긴 객체를 넣어준다.
  // type을 INCREMENT로 전달해주면 reducer함수는 현재 상태에 +1을 해준다.
}