useReducer

 

function reducer (state, action) {
  if (action.type == "INCREMENT")  // action에 따라 분기
      return state + 1;
  else if (action.type == "DECREMENT")
      return state - 1;
  return state;  // 새로운 상태를 리턴
}

function App() {
  const [result, dispatch] = useReducer(reducer, 0); 
  dispatch(result, "INCREMENT");
  return (
    <div>{result}</div> // <div>1</div>
  )
}

useReducer 함수는 useState 대신에 쓸 수 있는 함수이다.

useReducer는 useState의 setState와 다르게 컴포넌트 바깥에 정의할 수 있어서, '컴포넌트 바깥에서 state 업데이트가 가능'은 물론 다른 파일에서도 가능하다는 장점이 있다. 

정확히는 컴포넌트 바깥에 있는 reducer 함수에서 state 업데이트가 가능하다고 말할 수 있다.

useReducer의 사용법은 아래와 같다.

 

const [ state명, 업데이트함수를 호출할 함수명] = useReducer(업데이트함수명, 초기값);

 

state명에는 변수 state의 이름을 넣어준다.

업데이트함수를 호출할 함수명은 이전에 정의해놓은 것을 여기에 넣으라는 게 아니다. useReducer의 파라미터로 업데이트할 함수를 적어주면 리턴값으로 그 업데이트함수를 호출할 함수를 리턴해주는데 이것의 이름을 새로 지어 넣는다.

useReducer의 파라미터로는 '업데이트할 함수명'과 '초기값'을 넣는다.

 

초기값이 0인 상태 a가 있는데 이것을 업데이트할 함수명이 reducer라고 치면 아래와 같이 된다.

const [a, callReducer] = useReducer(reducer, 0);

 

그리고 이렇게 정의한 callReducer는 상태를 업데이트할 부분에서 callReducer(액션객체)와 같이 사용한다.

액션객체는 무엇일까? 내가 내린 정의로는 자기가 if문에 넣을 플래그 등을 담은 커스텀 객체이다.

type이 INCREMENT면 +1을 하고 싶으면 이 액션객체에 type을 INCREMENT라고 명시해서 보내면 되는데

callReducer({type: 'INCREMENT'}) 와 같이 사용하면 된다.

 

그리고 callReducer로 호출된 reducer 함수에서는 새로운 상태를 반환하도록 하게 하면 된다.