# zustand

상태관리 라이브러리 사용후기
우리는 상태를 관리하기 위해서 기타 라이브러리의 힘을 빌리거나 직접 그 기능을 구현하기도 한다. 하지만 먼저 우리가 왜 써야하는지 부터 알아야 한다. 라이브러리를 도입하는 것은 좋으나 항상 합당한 이유와 함께 같이 쓰는 것이 좋기 때문이다.먼저 근본적인 질문이다. 우리

Zustand 렌더링 최적화
최근 프로젝트 내의 ContextAPI를 모두 Zustand와 CustomHook 조합으로 갈아치우는 작업을 하였는데요. Zustand를 처음 도입해보느라, 엉성하게 코드를 작성한 것이 결국 작은 화를 불러일으켰습니다.보이시나요..? 이 아름다운 렌더링의 향연...!기

designPattern) 커맨드 패턴(Command Pattern) with React, typescript, zustand
커맨드 패턴 정리

TypeScript에서 Zustand로 상태 관리 하기
프로젝트의 메뉴부분의 형태가 다 잡혀서 이제 클릭했을 때 상태마다 보여주는 컴포넌트를 다르게 하기 위해 Zustand를 사용해서 상태관리를 해보려고 한다.위 명령어로 zustand를 간단하게 설치 가능하다.zustand는 타입스크립트로 작성된 라이브러리이기 때문에 @t

Next.js/zustand - SSR Hydration 에러 (Text content does not match server-rendered HTML)
SSR는 한번 더 고민하기
주스탄드에서 getter 사용 가능
middleware를 작성, 이름은 zustand-stateful-getter 주스탄드에서 getter를 사용하기 주스탄드에서 get- 메소드 사용 금지 지난 두 포스트에 적어놓은 것처럼 주스탄드는 초기 상태 객체의 getter를 처리하지 않는다.
주스탄드에서 get- 메소드 사용 금지
주스탄드에서 getter를 사용하기에서 계속하는 것인데,함수로 작성을 하더라도 의존 상태가 변경될 때에 명시적으로 변경하지 않는다면, 함수 포인터는 이전과 같기 때문에 컴포넌트는 변경을 알아챌 수가 없다.의 이유로 get- 형태의 함수를 사용하는 것이 무의미하다. 적어
주스탄드에서 getter를 사용 가능?
그렇게 할 수 없다, 순수 함수를 작성하시오. 아래와 같이 getter member는 동작하지 않는다. 2020년 8월에 이런 주스탄드 이슈가 있다. 사실 이슈 그전에 나는 왜 getter를 쓰고 싶어했던 걸까?
zustand devtools 설정
const useMenuStore = create( devtools((set) => ({ status: false, setStatus: () => set((state) => ({ status: !state.status })), })),)

Zustand 찍먹 후기
최근 토이 프로젝트에서 어떻게 전역변수를 관리할까 고민하다가 한 꼼수?를 발견해서 야무지게 사용했었다. 바로 swr을 이용한 방법인데, 이게 원래는 데이터 fetching 훅인데, 편법으로 로컬 스토리지에서 데이터를 캐싱하는 법이 있다. 어찌되었든 swr은 기본적으로

[React 상태관리 라이브러리 단순 비교] - 부제 : Recoil... 너 살아있니?
Recoil이 망할지도 모른다는 불안감에 작성한 단순 비교 포스팅.
React) Zustand, custom selector를 활용한 렌더링 최적화
zustand는 기본적으로 store를 선언하고, 컴포넌트 내부에서 훅으로 호출해 사용할 수 있다. 여기서 이번에 자세하게 볼 부분은 바로 useUserStore에 첫번째 인자로 들어가는 selector function이다.useUserStore에서 아무런 인자도 넘기

Zustand 외부반응
axios interceptors 활용할 때 zustand의 상태를 가져오려고 했지만 실패를 거듭했다.zustand 유틸리티 getState를 활용하여 가져와서 해결 하였다. const { accessToken } = userStore.getState().user; s
zustand - 사용법
store.ts를 만들어 아래의 코드를 작성한다.useBearStore 및 useDogStore는 아래와 같은 형식으로 작성한다.