일어났어요?이것으로 또 다른 React todo 응용 프로그램을 구축합시다!

트위터나reddit에 시간을 들이면 어떤 반응 상태 솔루션을 사용해야 하는지 알려주고 싶은 사람들이 많다는 것을 알게 될 것이다.나는 여기서 이렇게 하지 않을 거야!나는 단지 너희들에게 내가 가장 좋아하는 해결 방안을 보여주고 싶을 뿐이다. 너희들이 좋아하고 한두 가지 일을 배울 수 있기를 바란다.
만약 우리가 클래식 설정을 1초 동안 떠나면모든 물건을 거대한 레드ux 상점으로 밀어붙이기보다는 router(또는 NextJs/RemixJs), 에이피 날짜ReactQuery와 로컬 상태로 내비게이션 상태를 처리하는 것을 고려하세요!이런 상황에서 우리는 통상적으로 소량의 전 세계 상태만 남았기 때문에 우리는 반드시 자신을 잘 처리해야 한다.Zustand는 완벽한 도서관이다.
하지만 그만해...코드를 좀 쓰겠습니다.

간단한 업무 활용
이 예에서, 우리는 또 다른 todo 응용 프로그램을 구축할 것이다.미안하지만, 이것은 매우 창의적이지는 않지만, 그것은 아주 좋은 용례이다.
다음은 매우 기본적인 업무 응용 프로그램 프레임워크입니다.

export default function App() {
  const todos = [
    { id: 0, title: "Clean desk" },
    { id: 0, title: "Make todo app" }
  ]

  return (
    <div className="App">
      <h1>Todos</h1>

      <form>
        <input type="text" name="newtodo" />
        <input type="submit" value="add todo" />
      </form>

      <ul>
        {todos.map((todo) => {
          return (
            <li key={todo.id}>
              <span>{todo.title}</span>
              <button>Done</button>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

이것은 todo를 추가하는 작은 폼입니다. Array.map() todo 상수를 순환해서 todo를 표시합니다.
이 글은 css 스타일이 아닌 Zustand에 관한 것이기 때문에, 나는 이것들을 건너뛸 것이다.하지만 원하신다면 제 것을 가져가셔도 됩니다here.


프로젝트에 Zustand 추가
프로젝트에 Zustand를 설치하는 것은 매우 간단합니다. 명령줄에서 다음 명령 중 하나만 실행하면 됩니다.

# cd path/to/your/project

npm install zustand

# or

yarn add zustand

상점 만들기
이제 재미있는 부분을 보도록 하겠습니다.우리 Zustand 상점을 만듭시다.이를 위해, 우리는 todoStore라는 새 파일을 만들었습니다.js와 다음 코드를 추가합니다.

import create from "zustand";

const useTodoStore = create((set) => ({
    todos: [
      { id: 0, title: "Clean desk" },
      { id: 0, title: "Make todo app" }
    ],
  })
);

export default useTodoStore;

이 코드에서 먼저 Zustand 라이브러리에서create()라는 함수를 가져옵니다.다음에, 우리는 상수'useTodoStore '를 설명하고,create 함수를 그것에 분배합니다.
create 함수는 리셋 함수를 받아들입니다. 이 함수는 우리의 저장소를 포함하는 대상을 되돌려야 합니다.이 예에서, 우리는 이 대상에 todo 수조만 추가합니다. 이 수조는 두 개의 대상을 포함하고, 모든 대상은 todo입니다.너는 이것이 우리의 묵인 상태라고 생각할 수 있다.현실 세계의 응용 프로그램에서, 이 수조는 아마 비어 있을 것이다.
응용 프로그램의 나머지 부분에서 사용할 수 있도록 useTodoStore를 내보내는 것을 잊지 마십시오.

업무 추가
그런 다음 스토어에 TODO를 추가하는 기능을 설치해야 합니다.

import create from "zustand";
import { v4 as uuidv4 } from "uuid";

const useTodoStore = create((set) => ({
    todos: [
      { id: 0, title: "Clean desk" },
      { id: 0, title: "Make todo app" }
    ],
    addTodo: (title) =>
      set((state) => ({
        todos: [...state.todos, { id: uuidv4(), title }]
      })),
  })
);

export default useTodoStore;

여기에서, 우리는addTodo라는 다른 항목을store 대상에 추가하여,arrow 함수와 같게 합니다.이arrow 함수는 set()이라는 함수를 받아들인다.create 함수에서 이 함수를 받아들인다.
새로운arrow 함수에서 set 함수를 호출하여 다른arrow 함수를 전달합니다. 이 함수는 현재 상태를 거꾸로 수신하고 변경하고자 하는 상태의 새로운 부분을 되돌려야 합니다.따라서, 이 예에서, 우리는 todo 항목을 가진 새로운 대상을 되돌려주고, 현재의 todo 상태와 표시를 새로운 todo 대상에 분산시킨다.
새 todo의 id에 대해서는 uidv4 () 라는 함수를 사용합니다. (맨 위에 새 가져오기를 추가했습니다.) (npm install uuid) 는 유일한 id를 생성합니다. 제목에 대해서는 addTodo 함수에 전달되는 제목을 사용합니다.
상태/저장 함수는 때때로 약간 혼란스러워질 수 있지만, 제 설명이 이 문제를 해결하는 데 도움이 되었으면 합니다.적어도 나는 그것을 가능한 한 간단하게 하려고 한다.

업무 삭제
목록에서 TODO 옵션을 삭제해야 하기 때문에, 응용 프로그램 상점에 다른 함수를 추가합니다.

import create from "zustand";
import { v4 as uuidv4 } from "uuid";

const useTodoStore = create((set) => ({
    todos: [
      { id: 0, title: "Clean desk" },
      { id: 0, title: "Make todo app" }
    ],
    addTodo: (title) =>
      set((state) => ({
        todos: [...state.todos, { id: uuidv4(), title }]
      })),
    removeTodo: (id) =>
      set((state) => ({
        todos: state.todos.filter((todo) => todo.id !== id)
      }))
  })
);

export default useTodoStore;

이 새로운removeTodo 함수의 구조는addTodo 함수와 같지만, 이 예에서 우리는 그룹을 사용합니다.filter 방법은 id가 이removeTodo 함수에 전달된 id와 같은지 확인하여 todo를 삭제합니다.
알림: 자바스크립트 그룹에 대한 정보를 더 알고 싶으면.filter () 방법, 유튜브 동영상이 있는데 api 응답 데이터의 상하문에서 이것과 다른 그룹 방법을 소개했습니다: "

useTodoStore 가져오기
현재 우리는 이미 상점이 있어서, 응용 프로그램에서 그것을 사용하고, 우선 응용 프로그램에서 그것을 가져올 수 있다.js 파일.

import useTodoStore from "./todoStore.js";

상점 안의 처리해야 할 사항을 드러내다
다음에, 우리는 우리 상점에서 우리의 대기 사항 상태를 얻고, 그것으로 대기 사항을 열거하고자 한다

import useTodoStore from "./todoStore.js";

export default function App() {
  const todos = useTodoStore((state) => state.todos);

  return (
    <div className="App">
      <h1>Todos</h1>

      ...form...

      <ul>
        {todos.map((todo) => {
          return (
            <li key={todo.id}>
              <span>{todo.title}</span>
              <button>Done</button>
            </li>
          );
        })}
      </ul>

    </div>
  );
}

여기에 todos라는 새 상수를 만들고 가져온 useTodoStore 함수와 동일하게 설정합니다.useTodoStore는 현재 상태를 받아들이고 우리가 사용하고자 하는 상태 부분을 되돌려야 하는 화살표 함수를 받아들인다.그래서 이런 상황에서 우리의 화살표 함수는 상태를 되돌려야 한다.처리해야 할 사항.
우리는 이미 todo를 비추는 논리가 있기 때문에 어떤 내용도 변경할 필요가 없습니다. 우리의 상태 todo 항목은 열거되어야 합니다.

ddtodo 폼을 연결합니다
대기 사항을 추가하기 위해서, 우리는 반드시 표를 상점에 연결해야 한다.이를 위해, 우리는 상점에서 addTodos 기능을 가져와야 한다.

import useTodoStore from "./todoStore.js";

export default function App() {
  const todos = useTodoStore((state) => state.todos);
  const { addTodo } = useTodoStore((state) => ({
    addTodo: state.addTodo
  }));

  const addtodoHandler = (e) => {
    e.preventDefault();
    const input = e.target["newtodo"];
    if (input.value.trim() > "") {
      addTodo(input.value);
      input.value = "";
      input.focus();
    }
  };

  return (
    <div className="App">
      <h1>Todos</h1>

      <form onSubmit={addtodoHandler}>
        <input type="text" name="newtodo" />
        <input type="submit" value="add todo" />
      </form>

      ...List...

    </div>
  );
}

이 예에서, 우리는useTodoStore에 대한 다른 호출을 만들고, 저장소에서ddTodo 함수를 포함하는 대상을 되돌려줍니다.그리고 우리는 대상을 사용하여 되돌아오는 대상에서 이 함수를 구조화합니다.
우리는 잠시 후에 상점에서removeTodo 함수를 가져오려고 하기 때문에, 이렇게 하면 우리는 한꺼번에 완성할 수 있습니다.
이벤트에서 입력한 todo 제목을 가져와 빈 문자열인지 확인하고, 마지막으로addTodo 함수를 호출해서 새로운 todo를 저장소로 전송합니다.
깔끔함을 유지하기 위해서, 우리는 계속해서 업무 사항을 추가할 수 있도록 폼 필드를 지우고 다시 초점을 맞췄다.
새 함수를 호출하기 위해 양식의 onSubmit 속성에 추가합니다.
addTodo 함수는 저장소의 상태를 업데이트하기 때문에 다음 예와 같이 목록을 즉시 업데이트해야 합니다.


업무 삭제 단추
물론 우리는 TODO가 완성된 후에 그것들을 삭제하기를 원하기 때문에 '완성' 단추를 연결해서 그것들을 삭제할 것이다.

import useTodoStore from "./todoStore.js";

export default function App() {
  const todos = useTodoStore((state) => state.todos);
  const { addTodo, removeTodo } = useTodoStore((state) => ({
    addTodo: state.addTodo,
    removeTodo: state.removeTodo
  }));

  ...addtodoHandler...

  return (
    <div className="App">
      <h1>Todos</h1>

      ...Form...

      <ul>
        {todos.map((todo) => {
          return (
            <li key={todo.id}>
              <span>{todo.title}</span>
              <button
                onClick={() => {
                  removeTodo(todo.id);
                }}
              >
                Done
              </button>
            </li>
          );
        })}
      </ul>

    </div>
  );
}

여기서useTodoStore 함수로 설정해도 상태를 되돌려줍니다.removeTodo 함수는 객체의 구조화에 추가하여 가져옵니다.
그것을 사용하기 위해서, "완성"단추에 onClick 속성을 추가하고,arrow 함수를 추가합니다. 이 함수는removeTodo 함수를 호출하고,todo를 전달합니다.신분증.
현재, 단추를 눌렀을 때removeTodo 함수를 호출합니다. 이 id가 있는 todo를 저장소에서 삭제하고 보기에서 삭제합니다.


어느 정도 우리의 데이터를 보존하였다
메모리 상태를 사용하는 단점은 페이지를 다시 불러올 때 사라진다는 것이다.이것은 우리가 상태를 데이터베이스로 전송해야 하거나, 이런 상황에서 로컬 저장소를 추가해서 탈출할 수 있다는 것을 의미한다.
Zustand의 장점 중 하나는 이 기능이 내장되어 있다는 것이다.보충해 봅시다.
힌트:localstorage를 어떻게 사용하는지 스스로 배우고 싶다면, 내 친구는 멋진 글을 썼다. "Vanilla JavaScript localStorage"

import create from "zustand";
import { persist } from "zustand/middleware";
import { v4 as uuidv4 } from "uuid";

const useTodoStore = create(
  persist((set) => ({
    todos: [
      { id: 0, title: "Clean desk" },
      { id: 0, title: "Make todo app" }
    ],
    addTodo: (title) =>
      set((state) => ({
        todos: [...state.todos, { id: uuidv4(), title }]
      })),
    removeTodo: (id) =>
      set((state) => ({
        todos: state.todos.filter((todo) => todo.id !== id)
      }))
  }))
);

export default useTodoStore;

이 코드에서, 우리는'zustand/middleware'에서 persist라는 함수를 가져옵니다.우리가 해야 할 일은create 함수에서 이persist 함수로 리셋 함수를 포장하는 것이다.
현재, TODO를 추가할 때, 현재 상태는 브라우저localStorage로 전송되며, 페이지를 새로 고칠 때,Zustand는 자동으로 저장된 날짜를 채웁니다.
만약 필요하다면, 당신은 매우 쉽게 자신의 Zustand middleware 를 만들고, 이를 사용하여 데이터를 원격 데이터베이스로 영구화할 수 있습니다.
나도 이것에 관한 문장을 한 편 쓸 수 있으니 나를 따라오는 것을 잊지 마라!

업무 수행 응용 프로그램
이 코드 샌드박스에서 이 작은 todo 프로그램의 전체 버전을 볼 수 있습니다.

이렇게...
이것이 바로 Zustand로 React 응용 프로그램에 전역 상태를 추가하는 것이 얼마나 쉬운가!나는 네가 그것을 좋아하길 바란다. 또한 네가 이 문장에서 약간의 것을 배우기를 바란다.
계속해서 나를 주목하든지, 아니면 Dev.to에서 더 많은 내용을 주목하든지.
읽기, 안전, 올바른 적극적인 태도를 유지해 주셔서 감사합니다!