diff --git a/package-lock.json b/package-lock.json index e31dea5..beb9a17 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,8 @@ "react-markdown": "^9.0.1", "react-query": "^3.39.3", "react-toastify": "^10.0.5", - "remark-gfm": "^4.0.0" + "remark-gfm": "^4.0.0", + "zustand": "^4.5.2" }, "devDependencies": { "@tailwindcss/typography": "^0.5.13", @@ -6087,6 +6088,14 @@ "punycode": "^2.1.0" } }, + "node_modules/use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -6352,6 +6361,33 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/zustand": { + "version": "4.5.2", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.2.tgz", + "integrity": "sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==", + "dependencies": { + "use-sync-external-store": "1.2.0" + }, + "engines": { + "node": ">=12.7.0" + }, + "peerDependencies": { + "@types/react": ">=16.8", + "immer": ">=9.0.6", + "react": ">=16.8" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "immer": { + "optional": true + }, + "react": { + "optional": true + } + } + }, "node_modules/zwitch": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz", diff --git a/package.json b/package.json index 749e8e7..5168927 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,8 @@ "react-markdown": "^9.0.1", "react-query": "^3.39.3", "react-toastify": "^10.0.5", - "remark-gfm": "^4.0.0" + "remark-gfm": "^4.0.0", + "zustand": "^4.5.2" }, "devDependencies": { "@tailwindcss/typography": "^0.5.13", diff --git a/src/store/example.store.ts b/src/store/example.store.ts new file mode 100644 index 0000000..b12a3f9 --- /dev/null +++ b/src/store/example.store.ts @@ -0,0 +1,22 @@ +import { create } from 'zustand'; +import { devtools, persist } from 'zustand/middleware'; + +//기본 사용법 타입 에러는 일단 무시 + +let userStore = (set) => ({ + user: null, + setUser: (payload) => + set((state) => ({ + user: payload.data + })) +}); + +// redux devtools처럼 chrome 확장자 앱 사용해서 사용가능 +userStore = devtools(userStore); + +// persist 새로고침시 데이터 유지 +userStore = persist(userStore, { + name: 'userStore' +}); + +export const userStore = create(userStore);