FE/Zustand
-
새로 고침 후에도 전역상태를 유지하는 법 (Zustand persist)FE/Zustand 2024. 2. 5. 16:35
서론 기존에 프로젝트를 진행할 때, 로그인 여부를 확인하기 위한 userId를 LocalStorage에 저장하여 관리하였었다. 하지만, 상태관리 라이브러리인 Zustand를 도입하면서 userId도 Zustand를 통해 관리하는 것이 좋다고 판단하였다. 그래서 userId를 store에서 관리하도록 코드를 수정해 보았다. userId를 store로 분리 이전에 상태를 만든 것과 같이 userId를 저장할 store를 만들기 위해 아래와 같이 코드를 작성하였다. import { create } from 'zustand'; interface userState { userId: number; setUserId: (newUserId: number) => void; } const useUserStore = cre..
-
Zustand로 상태 관리 해보기FE/Zustand 2024. 1. 9. 18:01
상태 관리 React로 프로젝트를 진행하다 보니 규모가 커짐에 따라 상태들의 관계가 복잡해지고 유지보수가 어려워졌다. 초기에는 컴포넌트의 수도 적고 상태의 수도 적다 보니 흐름을 쉽게 이해할 수 있어서 props로 넘겨주어도 문제가 없었다. 하지만, 프로젝트가 진행됨에 따라 하위 컴포넌트로 상태를 넘겨주는 단계가 많아지게 되는 일이 발생하였다. 상태 관리는 이런 경우에 필요하다. 상태들이 복잡하게 얽혀 있고 상호 간에 의존성이 많아지게 되면, UI가 어떻게 변하는지 알기 어렵기 때문에 잘 관리할 필요가 있다. 상태 관리를 보다 쉽게 할 수 있게 해주는 많은 상태 관리 라이브러리들이 존재하는데, 어떤 상태 관리 라이브러리를 사용할지 고민하다 Zustand를 사용해 보려고 한다. Zustand Zustand..