[React] Zustand에 대해 알아보자 2편 - React 상태 관리 라이브러리

 

---

 

■ zustand 필수 함수

■ create

■ set

■ get

■ 생각해보기

---

 

안녕하세요. 이번 포스팅에선 zustand에 필수로 사용되는 함수에 대해 알아보려고 해요.

zustand가 무엇인지는 1편에 정리해두었으니 아래 포스팅 참고해주세요!

 

https://leebaek.tistory.com/156

[React] Zustand에 대해 알아보자 1편 - React 상태 관리 라이브러리

---

■ zustand 필수 함수

간단하게 어떤 함수가 있는지 알아봅시다~!

 

상태 저장소를 만드는 create

store안의 상태를 수정하는 set

현재 store의 상태를 가져오는 get

 

이제 사용방법에 대해 자세히 설명해보겠습니다. 😆

---

■ create

: store(상태 저장소)를 만드는 함수

 

zustand를 쓴다는 건, 결국 create로 store를 만들어 쓴다는 뜻입니다.

import { create } from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
}));

 

create안에 함수를 넣어줘야 합니다.

함수 안에는 초기 상태와, 업데이트 함수를 정의합니다.

상태 + 메서드 묶음을 만든다고 생각하면 됩니다.

 

예시 코드에서 count는 상태이고, increase는 업데이트 함수가 되겠죠 ?

---

■ set

: store(상태 저장소) 안의 상태를 수정하는 함수

 

store를 만들 때 넘겨주는 함수 안에서 set을 사용할 수 있습니다.

increase: () => set((state) => ({ count: state.count + 1 }))

 

set은 set(업데이트할 상태) 형식으로 쓰고,

주로 기존 상태를 받아서 필요한 부분만 수정합니다.

 

쉽게 말하면, 현재 상태를 수정해서 새로운 상태로 만듭니다.

 

예시 코드에선 현재 상태에서 + 1 해주고, count에 값을 넣어주고 있습니다.

---

■ get

: 현재 store의 상태를 가져오는 함수

 

store의 내부에서 다른 상태를 참고하고 싶을 때 사용합니다.

const useStore = create((set, get) => ({
  count: 0,
  doubleCount: 0,
  increase: () => set(() => {
    const current = get().count;
    return { count: current + 1, doubleCount: (current + 1) * 2 };
  }),
}));

 

지금 store 안에 저장된 값이 뭐지? 할 때 get을 사용합니다.

set 바깥에서 사용 가능합니다.

 

예시 코드에선 get().count를 통해 현재 count값을 불러오고 있습니다.

---

■ 생각해보기

저는 처음 set 코드를 보면서 이런 의문이 들었습니다.

 

set 함수 안의 state.count는 무엇을 나타내는걸까 ?  😗

---

 

store를 사용한 코드를 보면,

increase를 호출할 때 따로 값을 넘기지 않고 있다는 것을 알 수 있습니다.

function Counter() {
  const { count, increase, decrease } = useStore();
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increase}>+</button>
      <button onClick={decrease}>-</button>
    </div>
  );
}

 

그럼 저 state는 어디서 온 걸까요 ?

---

정답은

state는 현재 store에 저장된 모든 상태의 복사본입니다.

즉, state.count는

"방금까지 저장되어 있던 count 값"을 의미합니다.

 

그리고, 우리가 상태를 업데이트할 때는

"기존 상태를 수정하는게 아니라, 복사본을 수정해서 새로운 상태로 덮어쓰는 방식 "

을 사용합니다.

 

이 덕분에 Zustand는

불변성을 자동으로 지켜주는 상태관리가 가능합니다 ! 🫢

---

 

이번 포스팅은 이걸로 마무리하겠습니다. !!

다음 포스팅은 zustand의 다른 함수들에 대해 써볼까 합니다.

 

React 프로젝트에서 Zustand를 써보는걸 추천드립니다~ 😋

---