[modern-react] 리액트 스터디 파일 추가

modern-react/my-react-ts/src/HookReducerUp.tsx

@@ -0,0 +1,56 @@
+import { useReducer } from 'react';
+
+// Props 유형 정의
+type HookReducerUpProps = {
+  init: number
+};
+
+// State 타입 정의
+type StateType = {
+  count: number;
+};
+
+// Action의 타입 정의
+type ActionType = {
+  type: 'update',
+  step: number
+} | {
+  type: 'reset',
+  init: number
+};
+
+// Reducer 유형 정의
+type CountReducerType = (state: StateType, action: ActionType) => StateType;
+
+export default function HookReducerUp({ init }: HookReducerUpProps) {
+  // Reducer 타입 정의
+  const [state, dispatch] = useReducer<CountReducerType>(
+    // Reducer의 실체
+    (state, action) => {
+      switch (action.type) {
+        case 'update':
+          return { count: state.count + action.step };
+        case 'reset' :
+          return { count: action.init };
+        default:
+          return state;
+      }
+    },
+    // State의 초깃값
+    {
+      count: init
+    }
+  );
+  const handleUp = () => dispatch({ type: 'update', step: 1 });
+  const handleDown = () => dispatch({ type: 'update', step: -1 });
+  const handleReset = () => dispatch({ type: 'reset', init: 0 });
+
+  return (
+    <>
+      <button onClick={handleUp}>카운트업</button>
+      <button onClick={handleDown}>카운트다운</button>
+      <button onClick={handleReset}>리셋</button>
+      <p>{state.count}번 클릭되었습니다.</p>
+    </>
+  );
+}