validate

validate 미들웨어는 상태 관리 시 데이터의 타입 안전성을 높이는 유용한 도구입니다. 이 미들웨어는 상태가 변경되기 전, 사전에 정의된 스키마를 기준으로 데이터의 유효성을 먼저 검사합니다. 이를 통해 유효하지 않은 데이터가 애플리케이션 상태에 반영되는 것을 방지하여 상태의 일관성과 안정성을 유지하는 데 도움을 줍니다. 만약 잘못된 상태 변경 시도가 발생하면, 해당 변경을 차단하고 즉시 콘솔에 자세한 오류 정보를 출력하여 디버깅을 용이하게 합니다.

const useStore = create(
  validate(initialState, Resolver<T>)
)

caro-kann의 validate 미들웨어는 내부적으로 @ilokesto/common-resolver를 활용하여, zod (v3, v4), yup, superstruct와 같이 널리 사용되는 다양한 유효성 검사 라이브러리와 쉽게 연동할 수 있습니다. 덕분에 개발자는 자신이 익숙하거나 프로젝트에 이미 적용된 검증 도구를 그대로 사용하여 상태 데이터의 무결성을 효과적으로 관리할 수 있다는 장점이 있습니다.

import { z } from "zod";
import * as yup from "yup";
import { object, number } from "superstruct";
import { zodResolver } from "@ilokesto/common-resolver/zod"
import { yupResolver } from "@ilokesto/common-resolver/yupResolver"
import { superstructResolver } from "@ilokesto/common-resolver/superstructResolver"

const zSchema = z.object({ count: z.number().min(0) });
const ySchema = yup.object({ count: yup.number().min(0).required() });
const sSchema = object({ count: number() });

const useStore = create(
  validate({ count: 0 }, zodResolver(zSchema))
  // validate({ count: 0 }, yupResolver(ySchema))
  // validate({ count: 0 }, superstructResolver(sSchema))
);

export default function Page() {
  const [count, setCount] = useStore(store => store.count)

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(store => ({ count: store.count + 1 }))}>Increment</button>
      <button onClick={() => setCount(store => ({ count: store.count - 1 }))}>Decrement</button>
    </div>
  )
}