가장 간단한 방법으로 지금 바로 Zustand를 배워보세요!-JS 튜토리얼-php.cn

가장 간단한 방법으로 지금 바로 Zustand를 배워보세요!

Barbara Streisand

풀어 주다： 2024-12-15 15:46:25

원래의

693명이 탐색했습니다.

React의 상태 관리가 이렇게 간단하고 가벼웠던 적은 없었습니다! 개발자로서의 삶을 훨씬 쉽게 만들어줄 작지만 강력한 상태 관리 라이브러리 Zustand를 만나보세요. Redux의 상용구 또는 Context API의 제한 사항에 지쳤더라도 Zustand가 문제를 해결해 드립니다.

이번 게시물에서는 Zustand를 소개하고 제가 구축한 스타터 프로젝트를 GitHub에서 공유하겠습니다. 몇 단계만 거치면 Next.js 프로젝트에서 Zustand를 시작할 수 있습니다! ?

주스탠드란 무엇인가요? ?

Zustand(독일어로 "상태")는 React를 위한 최소한의 상태 관리 라이브러리입니다. 다음을 제공합니다:

매우 간단한 API입니다.
불필요한 재렌더링이 없는 고성능.
이해하기 쉬운 구문.
내장 미들웨어 지원(예: 지속 상태용)

이제 Next.js 프로젝트에서 이를 설정하는 방법을 살펴보겠습니다!

Next.js 프로젝트에서 Zustand를 설정하는 방법

다음의 간단한 단계에 따라 Zustand를 Next.js 앱에 통합하세요.

1. Zusstand 설치

Zustand를 설치하려면 다음 명령을 실행하세요.

npm i zustand

로그인 후 복사

2. 저장소 폴더 생성

src 폴더 안에 store라는 새 폴더를 만듭니다. 여기에는 모든 Zustand 상태 파일이 보관됩니다.

src/
  store/
    index.ts
    userStore.ts

로그인 후 복사

3. 매장 추가

userStore.ts

이 스토어에서는 사용자 관련 데이터를 처리합니다.

import { create } from "zustand";

interface User {
  id: string;
  name: string;
  email: string;
}

interface UserStore {
  user: User | null;
  setUser: (user: User | null) => void;
}

export const useUserStore = create<UserStore>((set) => ({
  user: null,
  setUser: (user: User | null) => set({ user }),
}));

로그인 후 복사

counterStore.ts(지속성 포함)

이 저장소는 카운터 상태를 처리하고 이를 localStorage에 유지합니다.

"use client";

import { create } from "zustand";
import { persist, createJSONStorage } from "zustand/middleware";

interface ICounterStore {
  counter: number;
  increment : ()=> void;
  decrement : ()=> void;
  reset : ()=> void;
  getLatestCountDivided2: ()=> number;
}
export const useCounterStore = create<ICounterStore>()(
  persist(
    (set, get) => ({
      counter: 0,

      increment: () => set(state => ({ counter: state.counter + 1 })),
      decrement: () => set(state => ({ counter: state.counter - 1 })),
      reset: () => set({ counter: 0 }),
      getLatestCountDivided2: ()=> get().counter / 2,
    }),
    {
      name: "counter-store",
      storage: createJSONStorage(()=> localStorage),
    }
  )
);

로그인 후 복사

index.ts

이 파일은 더 쉽게 가져올 수 있도록 모든 매장을 내보냅니다.

import { useUserStore } from "./userStore";
import { useCounterStore } from "./counterStore";

export { useUserStore, useCounterStore };

로그인 후 복사

4. 컴포넌트에서 Zustand 사용하기

다음은 Next.js 구성 요소에서 Zustand 스토어를 사용하는 방법에 대한 예입니다.

홈.tsx

"use client";
import { useCounterStore, useUserStore } from "@/store";
import Link from "next/link";

export default function Home() {
  // Access Zustand stores
  const userStore = useUserStore();
  const counterStore = useCounterStore();

  const handleAddUser = () => {
    userStore.setUser({ id: "1", name: "Joodi", email: "mail@example.com" });
  };

  return (
    <div className="">
      <div className="flex gap-2 p-2">
        <Link className="p-2 border" href="/">Home</Link>
        <Link className="p-2 border" href="/about">About</Link>
        <Link className="p-2 border" href="/contact">Contact</Link>
      </div>
      <h1>Hello</h1>
      <h1>User: {userStore.user?.email}</h1>
      <button
        className="bg-blue-500 rounded-md p-2 text-white"
        onClick={handleAddUser}
      >
        Add User
      </button>

      <br />
      <h1>Counter: {counterStore.counter}</h1>
      <button className="bg-blue-500 rounded-md text-white p-2" onClick={counterStore.increment}>
        Increment
      </button>
      <button className="bg-blue-500 rounded-md text-white p-2" onClick={counterStore.decrement}>
        Decrement
      </button>
      <button className="bg-blue-500 rounded-md text-white p-2" onClick={counterStore.reset}>
        Reset
      </button>
    </div>
  );
}

로그인 후 복사

스타터 프로젝트 저장소?

이 시작 프로젝트의 전체 코드는 GitHub에서 확인할 수 있습니다. 초보자에게 친숙하며 Next.js와 함께 Zustand를 사용하기 시작하는 데 필요한 모든 것이 포함되어 있습니다.

저장소 복제 및 시작:

git clone https://github.com/MiladJoodi/Zustand_Starter_Project.git
cd Zustand_Starter_Project
npm install
npm run dev

로그인 후 복사

Zustand로 손쉽게 상태 관리를 시작해 보세요. 여러분의 생각을 알려주시거나 여러분의 사용 사례를 공유해 주세요! ?

위 내용은 가장 간단한 방법으로 지금 바로 Zustand를 배워보세요!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!