리액트 상태 관리 라이브러리 직접 구현해보기

// Recoil
const counter = atom({ key: 'counter', default: 0 })
const todoList = useRecoilValue(counter)

// Jotai
const countAtom = atom(0)
const [count, setCount] = useAtom(countAtom)

// Zustand
const useStore = create((set) => ({
  count: 0,
  inc: () => set((state) => ({ count: state.count + 1 })),
  dec: () => set((state) => ({ count: state.count - 1 })),
}))
const count = useStore((state) => state.count)

// Valtio
const state = proxy({ count: 0 })
const snap = useSnapshot(state)
state.count++

function useCounter(initCount: number = 0) {
  const [counter, setCounter] = useState(initCount)

  // 카운터 증가 함수
  function inc() {
    setCounter((prev) => prev + 1)
  }

  return { counter, inc }
}

function Counter1() {
  const { counter, inc } = useCounter()

  return (
    <>
      <h3>Counter1: {counter}</h3>
      <button onClick={inc}>+</button>
    </>
  )
}

function Counter2() {
  const { counter, inc } = useCounter()

  return (
    <>
      <h3>Counter2: {counter}</h3>
      <button onClick={inc}>+</button>
    </>
  )
}

export type State = { counter: number }

let state: State = { counter: 0 }

// getter
export function get(): State {
  return state
}

// useState와 동일하게 게으른 초기화 함수나 값을 받는다.
type Initializer<T> = T extends any ? T | ((prev: T) => T) : never

// setter
export function set<T>(nextState: Initializer<T>) {
  state = typeof nextState === 'function' ? nextState(state) : nextState
}

function Counter1() {
  const state = get()

  function handleClick() {
    set((prev: State) => ({ counter: prev.counter + 1 }))
  }

  return (
    <>
      <h3>Counter1: {state.counter}</h3>
      <button onClick={handleClick}>+</button>
    </>
  )
}

function Counter2() {
  const state = get()

  function handleClick() {
    set((prev: State) => ({ counter: prev.counter + 1 }))
  }

  return (
    <>
      <h3>Counter2: {state.counter}</h3>
      <button onClick={handleClick}>+</button>
    </>
  )
}

type Initializer<T> = T extends any ? T | ((prev: T) => T) : never

type Store<State> = {
  get: () => State
  set: (action: Initializer<State>) => State
  subscribe: (callback: () => void) => void
}

export const createStore = <State extends unknown>(
  initialState: Initializer<State>
): Store<State> => {
  // 게으른 초기화 함수나 값을 받는다.
  // 클로저 내부의 state를 변경하기 위해 let으로 선언
  let state = typeof initialState === 'function' ? initialState() : initialState

  // 유일한 값만을 가지는 Set을 사용
  const callbacks = new Set<() => void>()

  const get = () => state
  const set = (nextState: State | ((prev: State) => State)) => {
    state =
      typeof nextState === 'function' ? (nextState as (prev: State) => State)(state) : nextState

    // 상태가 변경되면 모든 콜백을 실행한다.
    // 즉, 모든 구독자에게 알린다.
    callbacks.forEach((callback) => callback())

    return state
  }

  // 구독자를 추가하고, 구독을 취소할 수 있는 함수를 반환한다.
  const subscribe = (callback: () => void) => {
    callbacks.add(callback)

    return () => {
      callbacks.delete(callback)
    }
  }

  return { get, set, subscribe }
}

export const useStore = <State extends unknown>(store: Store<State>) => {
  const [state, setState] = useState(() => store.get())

  useEffect(() => {
    const unsubscribe = store.subscribe(() => {
      setState(store.get())
    })
    return unsubscribe
  }, [store])

  return [state, store.set] as const
}

const counterStore = createStore({ count: 0 })

function Counter1() {
  const [state, setState] = useStore(counterStore)

  function handleClick() {
    setState((prev) => ({ count: prev.count + 1 }))
  }

  return (
    <>
      <h3>Counter1: {state.count}</h3>
      <button onClick={handleClick}>+</button>
    </>
  )
}

function Counter2() {
  const [state, setState] = useStore(counterStore)

  function handleClick() {
    setState((prev) => ({ count: prev.count + 1 }))
  }

  return (
    <>
      <h3>Counter2: {state.count}</h3>
      <button onClick={handleClick}>+</button>
    </>
  )
}

export const useStore = <State extends unknown, Value extends unknown>(
  store: Store<State>,
  selector: (state: State) => Value // selector 함수를 추가로 받는다.
) => {
  // 초기값으로 selector 함수의 반환값을 할당한다.
  const [state, setState] = useState(() => selector(store.get()))

  useEffect(() => {
    const unsubscribe = store.subscribe(() => {
      const value = selector(store.get())
      setState(value)
    })

    return unsubscribe
  }, [store, selector])

  return state
}

// text 추가
const store = createStore({ count: 0, text: 'hi' })

export function Counter() {
  // 두 번째 인수로 selector 함수를 전달한다.
  // useCallback을 통해 값이 변하지 않는 함수를 만들어 전달한다.
  const counter = useStore(
    store,
    useCallback((state) => state.count, [])
  )

  function handleClick() {
    // 직접 store에 접근해 set 함수를 사용한다.
    store.set((prev) => ({ ...prev, count: prev.count + 1 }))
  }

  return (
    <>
      <h3>Counter: {counter}</h3>
      <button onClick={handleClick}>+</button>
    </>
  )
}

export function Input() {
  const name = useStore(
    store,
    useCallback((state) => state.text, [])
  )

  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    store.set({ ...store.get(), text: e.target.value })
  }

  return (
    <>
      <input
        type="text"
        value={name}
        onChange={handleChange}
        className="border-2 border-gray-500 p-2"
      />
    </>
  )
}

export const CounterStoreContext = createContext<Store<CounterStore>>(
  createStore<CounterStore>({ count: 0, text: 'hi' })
)

export const CounterStoreProvider = ({
  initialState,
  children,
}: PropsWithChildren<{ initialState: Initializer<CounterStore> }>) => {
  const storeRef = useRef<Store<CounterStore>>()

  if (!storeRef.current) {
    storeRef.current = createStore(initialState)
  }

  return (
    <CounterStoreContext.Provider value={storeRef.current}>{children}</CounterStoreContext.Provider>
  )
}

export const useCounterContextSelector = <State extends unknown>(
  selector: (store: CounterStore) => State
) => {
  const store = useContext(CounterStoreContext)
  const subscription = useStore(store, selector)

  return [subscription, store.set] as const
}

function Counter() {
  const [counter, setStore] = useCounterContextSelector(useCallback((state) => state.count, []))

  function handleClick() {
    setStore((prev) => ({ ...prev, count: prev.count + 1 }))
  }

  return (
    <>
      <h3>Counter: {counter}</h3>
      <button onClick={handleClick}>+</button>
    </>
  )
}