React-Core-Learn · Seoin02 · Dec 15, 2024 · Dec 16, 2024 · Dec 16, 2024 · Dec 16, 2024
diff --git a/index.html b/index.html
@@ -1,10 +1,10 @@
-<!doctype html>
-<html lang="en">
+<!DOCTYPE html>
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + TS</title>
+    <title>Store 적용</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/App.ts b/src/App.ts
@@ -0,0 +1,40 @@
+import Component from './core/Component';
+import { store, setA, setB } from './store';
+
+const InputA = () => `
+<input id="stateA" type="number" value="${store.getState().a}" size="5"/>
+`;
+
+const InputB = () => `
+<input id="stateB" type="number" value="${store.getState().b}" size="5"/>
+`;
+
+const Calculator = () => `
+<p>a + b = ${store.getState().a + store.getState().b}</p>
+`;
+
+export class App extends Component {
+  template(): string {
+    return `
+    ${InputA()}
+    ${InputB()}
+    ${Calculator()}
+    `;
+  }
+
+  setEvent(): void {
+    const { $el } = this;
+
+    $el.querySelector('#stateA')?.addEventListener('change', ({ target }) => {
+      if (target && target instanceof HTMLInputElement) {
+        store.dispatch(setA(Number(target.value)));
+      }
+    });
+
+    $el.querySelector('#stateB')?.addEventListener('change', ({ target }) => {
+      if (target && target instanceof HTMLInputElement) {
+        store.dispatch(setB(Number(target.value)));
+      }
+    });
+  }
+}
diff --git a/src/core/Component.ts b/src/core/Component.ts
@@ -0,0 +1,43 @@
+import { observable, observe } from './observer';
+
+export type TComponentData = Record<string, any>;
+
+export interface IState {
+  [key: string]: number;
+}
+
+export default class Component<
+  State extends TComponentData = IState,
+  Props = TComponentData,
+> {
+  state!: State;
+  props: Props;
+  $el: HTMLElement;
+
+  constructor($el: HTMLElement, props: Props) {
+    this.$el = $el;
+    this.props = props;
+    this.setup();
+  }
+
+  setup() {
+    this.state = observable(this.initState()) as State;
+    observe(() => {
+      this.render();
+      this.setEvent();
+      this.mounted();
+    });
+  }
+
+  initState() {
+    return {};
+  }
+  template() {
+    return '';
+  }
+  render() {
+    this.$el.innerHTML = this.template();
+  }
+  setEvent() {}
+  mounted() {}
+}
diff --git a/src/core/ReduxStore.ts b/src/core/ReduxStore.ts
@@ -0,0 +1,46 @@
+import { TAction } from '../store';
+import { observable } from './observer';
+
+interface IStateA {
+  a: number;
+  b: number;
+}
+
+interface IStateB {
+  b: any;
+  a: number;
+}
+
+type IReducerState =
+  | (IStateA & { [key: string]: any })
+  | (IStateB & { [key: string]: any });
+
+interface IReducer {
+  (state?: IReducerState, action?: TAction): IReducerState;
+}
+
+export const createStore = (reducer: IReducer) => {
+  const initialState: IReducerState = reducer();
+  const state = observable(initialState);
+
+  const frozenState: { [key: string]: any } = {};
+  Object.keys(state).forEach((key) => {
+    Object.defineProperty(frozenState, key, {
+      get: () => state[key],
+    });
+  });
+
+  const dispatch = (action: TAction) => {
+    const newState = reducer(state, action);
+
+    for (const [key, value] of Object.entries(newState)) {
+      if (key in state) {
+        state[key] = value;
+      }
+    }
+  };
+
+  const getState = () => frozenState;
+
+  return { getState, dispatch };
+};
diff --git a/src/core/observer.ts b/src/core/observer.ts
@@ -0,0 +1,29 @@
+type TObserver = () => void;
+
+let currentObserver: TObserver | null = null;
+
+export const observe = (fn: TObserver): void => {
+  currentObserver = fn;
+  fn();
+  currentObserver = null;
+};
+export const observable = <T extends Record<string, any>>(obj: T): T => {
+  Object.keys(obj).forEach((key) => {
+    let _value = obj[key];
+    const observers: Set<TObserver> = new Set();
+
+    Object.defineProperty(obj, key, {
+      get() {
+        if (currentObserver) observers.add(currentObserver);
+        return _value;
+      },
+
+      set(value) {
+        _value = value;
+        observers.forEach((fn) => fn());
+      },
+    });
+  });
+
+  return obj;
+};
diff --git a/src/main.ts b/src/main.ts
@@ -1 +1,14 @@
-// your code
+import { App } from './App';
+
+class Main {
+  constructor() {
+    const $app: Element | null = document.querySelector('#app');
+    if ($app instanceof HTMLElement) {
+      new App($app, {});
+    } else {
+      console.error('Element with ID "app" not found.');
+    }
+  }
+}
+
+new Main();
diff --git a/src/store.ts b/src/store.ts
@@ -0,0 +1,28 @@
+import { createStore } from './core/ReduxStore';
+
+export type TAction = {
+  type?: string;
+  payload?: any;
+};
+
+const initState = {
+  a: 10,
+  b: 20,
+};
+
+export const SET_A = 'SET_A';
+export const SET_B = 'SET_B';
+
+export const store = createStore((state = initState, action: TAction = {}) => {
+  switch (action.type) {
+    case 'SET_A':
+      return { ...state, a: action.payload };
+    case 'SET_B':
+      return { ...state, b: action.payload };
+    default:
+      return state;
+  }
+});
+
+export const setA = (payload: number) => ({ type: SET_A, payload });
+export const setB = (payload: number) => ({ type: SET_B, payload });
diff --git a/tsconfig.json b/tsconfig.json
@@ -17,8 +17,7 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noFallthroughCasesInSwitch": true
   },
   "include": ["src"]
 }