[React] Zustand

Zustand란?

Zustand란 상태라는 뜻을 가진 독일어이다.

단순화된 Flux 원리를 사용하는 작고 빠르며 확장 가능한 상태 관리 솔루션이다. Hooks에 기반해 편리한 API를 제공한다.

Zustand는 다음과 같은 장점을 지니고 있다.

1. 이름 뜻도 쉽지만 사용방법 또한 매우 쉽다.
   바닐라 자바스크립트를 기준으로 핵심 로직의 코드 줄 수가 약 42줄밖에 되지 않는다.

2. 상태가 변경되면 불필요한 리렌더링을 일으키지 않는다.

3. 보일러플레이트가 거의 없다.
   보일러플레이트란 최소한의 변경으로 여러 곳에서 재사용되며 반복적으로 비슷한 형태를 띄는 양상을 말한다.

4. redux Devtools를 사용할 수 있어 디버깅에 용이하다.

Zustand 설치

npm i zustand

Zustand 사용법

App.js 파일

function App() {
  const [memo, setMemo] = useState('');
  const [memos, setMemos] = useState([]);

  const handleWriteMemo = (e) => {
    setMemo(e.target.value);
  };

  const handleAddMemo = (e) => {
    e.preventDefault();
    setMemos((prevMemos) => [...prevMemos, memo]);
    setMemo('');
  };

  return (
    <div>
      <h1>메모 작성하기</h1>
      <Form onAdd={handleWriteMemo} onSubmit={handleAddMemo} memo={memo} />
      <Memos memos={memos} />
    </div>
  );

• 작성하는 메모 하나의 상태를 나타내는 memo, 모든 메모 상태를 나타내는 memos.
  이러한 모든 상태는 App.js 에서 관리한다.

components/Form.js 파일

const Form = (props) => {
  return (
    <>
      <form onSubmit={props.onSubmit}>
        <input type='text' onChange={props.onAdd} value={props.memo} />
        <button type='submit'>작성완료</button>
      </form>
    </>
  );
};

Form.js 에서는 메모 하나를 입력하고 전송한다.

const Memos = (props) => {
  return (
    <ul>
      {props.memos.map((memo) => {
        return <li key='memo'>{memo}</li>;
      })}
    </ul>
  );
};

Memos.js 에서는 모든 메모를 리스트로 나열한다.

Store에 State 만들기

stores/memos.js 파일

import create from 'zustand';

const useMemosStore = create((set) => ({
  memo: '',
  setMemo: (text) => set({ memo: text }),
  memos: [],
  setMemos: (newMemo) =>
    set((prev) => ({
      memos: [...prev.memos, newMemo],
    })),
}));

export default useMemosStore;

Store 사용하기

function App() {
  return (
    <div>
      <h1>메모 작성하기</h1>
      <Form />
      <Memos />
    </div>
  );
}

더 이상 App.js 에서 상태를 관리할 필요가 없기에 기존의 useState 함수와 props는 모두 삭제했다.

import useMemosStore from '../stores/memos';

const Form = () => {
  const { memo, setMemo, setMemos } = useMemosStore();

  const handleWriteMemo = (e) => {
    setMemo(e.target.value);
  };

  const handleAddMemo = (e) => {
    e.preventDefault();
    setMemos(memo);
    setMemo('');
  };

  return (
    <>
      <form onSubmit={handleAddMemo}>
        <input type='text' onChange={handleWriteMemo} value={memo} />
        <button type='submit'>작성완료</button>
      </form>
    </>
  );
};

import useMemosStore from '../stores/memos';

const Memos = () => {
  const { memos } = useMemosStore();

  return (
    <ul>
      {memos.map((memo) => {
        return <li key='memo'>{memo}</li>;
      })}
    </ul>
  );
};