Zustand 읽어보기

주스탄드에 대해서 사용을 해보고 정리를 해보려고 한다.

주스탄드?

주스탄드를 모르기 전까지는 보통 useContext를 많이 사용할 것이다.

상태관리를 하는데 있어서 무엇을 사용하던 크게는 상관이 없다고 생각을 하기도 한다.

그렇지만 굉장히 중요한 부분이기도 하고 더욱 이해하기 좋고 사용하기 편한 것을 찾게 되는것 같다.

그렇게 알게된것이 멘토님의 추천을 받은 주스탄드이다.

Redux, React Query등도 있지만 주스탄드가 요즘 좋다고 하신다..ㅎ

 

주스탄드는 상태라는 뜻을 가진 독일어이다.

단순화된 Flux 원리를 사용하는 작고 빠르며 확장 가능한 상태 관리 솔루션이다.

처음에 사용을 하면서 아직 간단하게만 사용을 해보긴 했지만 한눈에 딱 이해가 갔었다.

 

주스탄드는 다음과 같은 장점을 가지고 있다

1. 이름 뜻처럼 쉽고 간단하다.

바닐라 js를 기준으로 핵심 로직의 코드 줄 수가 약 42 밖에 안나온다.

 

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

 

3. 보일러플레이트가 거의 없다.

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

 

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

 

사용법..!

사용법으로 우선 정리해보자면

1. 리액트 프로젝트 생성

2. Zustand 설치

3. Store에 state만들기

4. Store 불러와서 사용하기

로 간단하게 볼 수 있다.

 

제가 이해했던건 그냥 설치해서 다른 파일에 state를 만들어두고 불러와 사용한다고 기억을 했다.

 

리액트 프로젝트 생성은 다들 알거라 생각하고 넘어가고

 

2. Zustand 설치

설치방법은 어렵지 않다.

npm i zustand

 

터미널에 위 명령어를 입력해주면 된다.

 

3. 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;

 

위처럼 작성을 해주면 기본 세팅이 된다.

memo와 memos에는 초기값을 넣는다.

setMemo와 setMemos는 매개변수를 지정하고 어디에 어떻게 값을 넣을지 정한다.

setMemo의 경우에는 text라고 값이 들어오면 memo에 그 값을 넣는다

setMemos는 이전 배열에 새로운 배열을 추가해 주게 된다.

 

3. Store 사용하기

// ./component/Form.js
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>
    </>
  );
};

 

이런식으로 불러와서 state처럼 사용을 하게 되면 된다.

 

 

참고  링크

https://velog.io/@yeonsubaek/React-Zustand%EB%A1%9C-%ED%8E%B8%EB%A6%AC%ED%95%98%EA%B2%8C-%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC%ED%95%98%EA%B8%B0

[React] Zustand로 편리하게 상태관리하기

 

 

여기까지 읽어고보 사용하면서 느낀점으로는

사실 useContext를 사용할 때 조금 귀찮다? 불편하다 는 느낌이 있었는데, Zustand를 알고나서 사용하고 나니 너무 편하고 좋았다. 다음에는 리덕스나 그런것들도 공부해봐야겠다.

 

요즘은 다른분들이 간단하게 정리해주신 것들이 많아서 공부할때 너무 좋은것 같다.