Zusstand로 상태 관리를 매우 빠르게 반응

소개

헤이 여러분,
이 튜토리얼에서는 놀라운 React State Management Library인 Zusstand를 구현할 것입니다.

이 튜토리얼에서 우리가 만들 것의 미리보기 -

초기 설정

따라서 이 튜토리얼을 시작하기 위해 TailwindCSS 및 NextUI가 포함된 Next.js 앱인 몇 가지 초기 설정을 수행할 것입니다.

Next.js 앱을 만들어 보겠습니다.
npx create-next-app your-project-name
그런 다음 프로젝트를 cd하고 tailwindCSS를 설치합니다.

프로젝트에 TailwindCSS를 설치하려면 이 설치 가이드를 따를 수 있습니다.
설치 안내서 - https://tailwindcss.com/docs/guides/nextjs

따라서 일단 TailwindCSS 설정이 있으면 됩니다.

다음 명령을 사용하여 NextUI를 설치해 보겠습니다. npm install @nextui-org/react
자, 이제 이 튜토리얼과 함께 따라야 할 모든 것이 있습니다.

앱의 index.js로 이동하여 앱의 UI를 만들어 보겠습니다.
Index.js -

import { Button, Input, Card } from "@nextui-org/react";
import {useState} from "react";

export default function Home() {
 const [newtodo, setNewTodo] = useState("");

  return (
    <div className="container text-black mx-auto flex flex-col items-center p-28">
      <div className="w-full">
        <h1 className="text-3xl">Todo</h1>
      </div>
      <div className="mt-2 flex items-center w-full">
        <Input
          value={newtodo}
          onChange={(e) => setNewTodo(e.target.value)}
          fullWidth
          placeholder="Enter TODO"
          clearable
        />
        <Button shadow className="m-2">
          ADD
        </Button>
      </div>
        <div className="mt-5 w-full flex items-center">
          <Card className="w-full">
            <Card.Body>Todo One</Card.Body>
          </Card>
          <Button
            size="lg"
            shadow
            auto
            color="error"
            className="m-2"
          >
            Delete
          </Button>
        </div>

    </div>
  );
}

화면에 다음과 같은 내용이 표시됩니다.

Zusstand 구현

이제 앱에 Zusstand를 추가해 보겠습니다.
그러기 위해서는 앱 내부에 store.js를 생성해야 합니다.

저희 가게에는 세 가지가 있습니다.
todos:[] : 이 배열은 모든 할일을 추적하고 할일을 렌더링하는 데 도움이 됩니다.
addTodo : addTodo는 todos 배열에 새 todo를 추가하는 데 도움이 됩니다. 인수로 todo를 취하고 이전 상태(...state.todos)를 전파하고 새todo를 추가합니다. 끝.
removeTodo : 이 기능은 제공된 인덱스로 특정todo을 삭제하는 데 도움이 됩니다.

다음은 우리의 코드입니다store.js -

import create from "zustand";

const useStore = create((set) => ({
  todos: [],
  todo: "",
  addTodo: (todo) => set((state) => ({ todos: [...state.todos, todo] })),
  removeTodo: (index) =>
    set((state) => ({ todos: state.todos.filter((_, i) => i !== index) })),
}));

export default useStore;

좋아, 이제 우리 가게가 생겼어.
모든 것을 바인딩하고 앱에서 사용합시다.
index.js로 돌아가기 -

"../store.js"에서 가져오기useStore

import useStore from "../store";

좋습니다. 이제 스토어를 가져왔으니 현재todos와 모든 로직을 처리하는 함수를 가져오겠습니다.

  const todos = useStore((state) => state.todos);
  const addTodo = useStore((state) => state.addTodo);
  const removeTodo = useStore((state) => state.removeTodo);

모든 것을 연결하고 모든 것이 작동하는지 확인합시다.
index.js -

import { Button, Input, Card } from "@nextui-org/react";
import { useState } from "react";
import useStore from "../store";
export default function Home() {
  const [newtodo, setNewTodo] = useState("");

  const todos = useStore((state) => state.todos);
  const addTodo = useStore((state) => state.addTodo);
  const removeTodo = useStore((state) => state.removeTodo);

// this function will check if the input is valid or not
  const AddNewTodo = () => {
    if (newtodo.length > 0) {
      addTodo(newtodo);
      setNewTodo("");
    }
  };


  return (
    <div className="container text-black mx-auto flex flex-col items-center p-28">
      <div className="w-full">
        <h1 className="text-3xl">Todo</h1>
      </div>
      <div className="mt-2 flex items-center w-full">
        <Input
          value={newtodo}
          onChange={(e) => setNewTodo(e.target.value)}
          fullWidth
          placeholder="Enter TODO"
          clearable
        ></Input>
        <Button onClick={AddNewTodo} shadow className="m-2">
          ADD
        </Button>
      </div>

// Map all the current Todos
      {todos.map((todo, index) => (
        <div key={index} className="mt-5 w-full flex items-center">
          <Card className="w-full">
            <Card.Body>{todo}</Card.Body>
          </Card>
          <Button
            onClick={() => removeTodo(index)}
            size="lg"
            shadow
            auto
            color="error"
            className="m-2"
          >
            Delete
          </Button>
        </div>
      ))}
    </div>
  );
}

모든 것을 연결한 후 새로운 할일을 생성하고 할일을 삭제할 수 있습니다.

엄청난!

이제 Zusstand가 앱에서 작업 중입니다.

보너스

앱의 이 부분은 완전히 선택 사항입니다.
단 3줄의 코드로 애니메이션을 추가하는 데 도움이 되는 멋진 애니메이션 라이브러리를 찾고 싶다면 이 과정을 살펴볼 수 있습니다.

의 시작하자,

멋진 애니메이션을 추가하여 할 일 앱을 더욱 멋지게 만들고 싶습니다.
이를 위해 auto-animate를 사용할 것입니다. 이것은 formkit의 놀라운 애니메이션 라이브러리입니다.

우리는 useEffect에서 useRef , react 및 auto-animate에서 @formkit/auto-animate를 가져올 것입니다.

이것들을 가져온 후,

임의의 이름으로 ref를 생성합니다. 저는 그것을 부모라고 부릅니다.

const parent = useRef(null);

그런 다음 useEffect 후크에서 parent를 종속성으로 추가하고 parent.current를 autoAnimate로 전달할 것입니다.

  useEffect(() => {
    parent.current && autoAnimate(parent.current);
  }, [parent]);

좋습니다. 마지막으로 해야 할 일은 부모 요소에 ref를 추가하는 것입니다.

이것은 전체 코드가 다음과 같이 보일 것입니다.
index.js

import { Button, Input, Card } from "@nextui-org/react";
import { useEffect, useState, useRef } from "react";
import useStore from "../store";
import autoAnimate from "@formkit/auto-animate";
export default function Home() {
  const parent = useRef(null);
  const [newtodo, setNewTodo] = useState("");
  const todos = useStore((state) => state.todos);
  const addTodo = useStore((state) => state.addTodo);
  const removeTodo = useStore((state) => state.removeTodo);

  const AddNewTodo = () => {
    if (newtodo.length > 0) {
      addTodo(newtodo);
      setNewTodo("");
    }
  };

  useEffect(() => {
    parent.current && autoAnimate(parent.current);
  }, [parent]);

  return (
    <div
      className="container text-black mx-auto flex flex-col items-center p-28"
// here we are using our parent ref
      ref={parent}
    >
      <div className="w-full">
        <h1 className="text-3xl">Todo</h1>
      </div>
      <div className="mt-2 flex items-center w-full">
        <Input
          value={newtodo}
          onChange={(e) => setNewTodo(e.target.value)}
          fullWidth
          placeholder="Enter TODO"
          clearable
        ></Input>
        <Button onClick={AddNewTodo} shadow className="m-2">
          ADD
        </Button>
      </div>
      {todos.map((todo, index) => (
        <div key={index} className="mt-5 w-full flex items-center">
          <Card className="w-full">
            <Card.Body>{todo}</Card.Body>
          </Card>
          <Button
            onClick={() => removeTodo(index)}
            size="lg"
            shadow
            auto
            color="error"
            className="m-2"
          >
            Delete
          </Button>
        </div>
      ))}
    </div>
  );
}

이제 todo를 추가하고 제거하면 멋진 애니메이션을 볼 수 있습니다.

Github 레포 - https://github.com/chetanverma16/Zustand-tutorial

결론

그게 내가 당신을 위해 가진 전부입니다! 새로운 것을 배웠기를 바랍니다.

이 기사가 마음에 드셨다면 다른 사람들도 찾을 수 있도록 ❤️를 해주세요.

더 많은 콘텐츠를 보려면 Twitter에서 연락을 유지하십시오.

저에게 연락하십시오:

Portfolio | Github | |