Merge pull request #23 from brgndyy/feat/#22

buildContext 함수 수정 (issue #22)

packages/react/react/src/utils/buildContext.md

@@ -12,16 +12,13 @@ Context를 정의할때 발생하는 보일러플레이트를 줄여주는 함
 
 ```tsx
 import { buildContext } from './buildContext';
-import React from 'react';
 
 interface CountContextProps {
   count: number;
-  setCount: (newCount: number) => void;
 }
 
-const [CountProvider, useCount] = buildContext<CountContextProps>('Count', {
+const [CountProvider, useCountContext] = buildContext<CountContextProps>('Count', {
   count: 0,
-  setCount: () => {},
 });
 
 export default function App() {
@@ -33,16 +30,16 @@ export default function App() {
 }
 
 const Inner = () => {
-  const { count, setCount } = useCount();
+  const { count, updateContext } = useCountContext();
 
-  const incrementCount = () => {
-    setCount(count + 1);
+  const handleIncrementCount = () => {
+    updateContext({ count: count + 1 });
   };
 
   return (
     <>
       <div>Count: {count}</div>
-      <button onClick={incrementCount}>Increment</button>
+      <button onClick={handleIncrementCount}>Increment</button>
     </>
   );
 };

packages/react/react/src/utils/buildContext.tsx

@@ -1,39 +1,40 @@
+// buildContext.tsx
 import { createContext, useContext, useState, useMemo, ReactNode } from 'react';
 
 type ProviderProps<T> = {
   children: ReactNode;
   value?: Partial<T>;
 };
 
-export function buildContext<T extends object>(contextName: string, defaultContext: T) {
-  type ContextWithUpdate = T & { updateContext: (updates: Partial<T>) => void };
-
-  const Context = createContext<ContextWithUpdate | null>(null);
+export function buildContext<T>(contextName: string, defaultContext: T) {
+  const Context = createContext<(T & { updateContext: (updates: Partial<T>) => void }) | null>(
+    null,
+  );
 
   function Provider({ children, value }: ProviderProps<T>) {
     const [state, setState] = useState<T>(() => ({
       ...defaultContext,
       ...value,
     }));
 
-    const contextValue = useMemo(() => {
-      const updateContext = (updates: Partial<T>) => {
-        setState((prevState) => ({ ...prevState, ...updates }));
-      };
+    const updateContext = (updates: Partial<T>) => {
+      setState((prevState) => ({
+        ...prevState,
+        ...updates,
+      }));
+    };
 
-      return {
-        ...state,
-        updateContext,
-      };
-    }, [state]);
+    const contextValue = useMemo(() => ({ ...state, updateContext }), [state]);
 
     return <Context.Provider value={contextValue}>{children}</Context.Provider>;
   }
 
-  function useContextHook(): ContextWithUpdate {
+  function useContextHook(): T & {
+    updateContext: (updates: Partial<T>) => void;
+  } {
     const context = useContext(Context);
 
-    if (context === null || context === undefined) {
+    if (!context) {
       throw new Error(`use${contextName} must be used within a ${contextName}Provider`);
     }