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

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

코드를 다 작성했다면, App에서 Counter를 다시 렌더링해 주고 브라우저에서 +1/-1 버튼을 눌러 보세요.

App

import React from 'react';
import Counter from './Counter';
 
const App = () => {
  return <Counter />;
};
 
export default App;

---

 

이전과 마찬가지로 잘 작동하나요?