[상태관리] Zustand 조금 더 편하게 쓰기 ( snippet )

bing으로 만든 기타치는곰

들어가며

편리함을 추구하는 프론트엔드 개발자 핸디입니다.

저번 글에 이어서 이번 글에서는 Zustand를 조금 더 편하게 사용하는 방법에 대해 알아보도록 하겠습니다.

[상태관리] 내가 Zustand를 선택한 이유 (over the Recoil)

Snippet Extension

우리가 개발을 하다보면 많은 Extension를 만납니다.

이미 react snippet를 쓰고 있는 저에겐 snippet extension는 코파일럿보다 훨씬 중요한 도구인데요.

우선 zustand snippet이 있는지 찾아보았습니다.

제가 만든 Handy-snippets를 포함해서 3개가 나옵니다.

가장 상단에 있는 Zustand Snippet은 

제가 구독중인 개발자 유튜브 잡캐헨리님이 구독자를 위해 만드신 간단한 스니펫익스텐션입니다.

잡캐헨리 - 함께 성장해요 프론트엔드 개발

그리고 두번째가 제가 만든 handy-snippets입니다.

handy-snippets

본래 해당 스니펫 익스텐션은 외부에 공개한 익스텐션이 아닌 제가 개인적으로 사용하던 스니펫 리스트들이었습니다.

vsc에서는 커스텀 스니펫을 올려 사용할 수 있기에 그렇게 사용하고 있었습니다.

그런 와중에 코딩 컨벤션을 위해 해당 스니펫리스트를 팀원에게 공유한 것이 익스텐션의 시작입니다.

handy-snippets - Visual Studio Marketplace

사용법

백문이 불여일견이라 일단 바로 사용법을 보러 가시죠.

zustand 관련 스니펫은 모두 zs(zustand store)로 시작합니다.

그리고 description를 보고 원하는 스니펫을 선택하면 됩니다.

zs뒤에 붙은 철자는 d, i, p가 있는데 각각 의미하는 바는 아래와 같습니다.

• d = devtools | redux devtool 연동
• i = immer | 불변성 관리를 위한 immer 사용
• p = persist | 로컬스토리지 or 세션스토리지 연동

종류

현재 버전 1.0.0에서 지원하는 handy snippet은 총 10개입니다. ( 실은 블로그 글을 위해 최신화했음 )

zustand 스니펫은 zs가 붙어있는 7가지.

그외 3종은 컨벤션에 맞춰 만든 리액트 관련 스니펫입니다. ( 해당 익스텐션은 zustand snippet이 아닌 handy snippet이기 때문에.. )

규칙

가장 기본 규칙은 zs로 시작한다합니다.

그리고 devtools, persist, immer 순으로 선언하게 됩니다. (테스트 결과 선언 순서가 달라져도 이상은 없습니다.)

순서는 상관없어요. 다만 아래의 룰에 따라 선언했습니다.

다만 immer가 state에  가장 근접한 미들웨어라 가장 안쪽에 선언했습니다.

비슷한 이치로 persist는 state 전체의 저장 여부이기 때문에 그다음으로 선언했습니다.

devtools은 해당 store의 디버깅 여부이기에 마지막으로 선언하였습니다.

번외로 아래와 같이 선언도 가능합니다. ( 내부에 store를 만들고 외부에 middleware를 깜싸는 방식 )

근데 동작은 안됩니다.(정확히는 타입스크립트 추론이 안됨).

사용하려면 별도의 타입추론이 가능하도록 강제 타입을 선언해야하는데  오히려 복잡해집니다.

따라서 create 내부에 middlewave 쓰는 방식으로 구현을 추천드립니다.

미들웨어 Devtool

추가로 Devtool의 사용법 중에 eabled 옵션을 살펴보겠습니다.

개발을 하다 보면 환경 설정에 따라 devtool 연동 여부를 결정하고 싶을 때가 있습니다.

그럴 때는 devtoolsOptions에 조건식을 추가하여 넘기면 되겠습니다.

그 외 여러 가지 옵션이 있습니다. 다만 여기선 설명하긴 옵션이 너무 많으니 찾아보셔도 됩니다. 

근데 막상 사용하는 옵션은 enabled 뿐이라..

미들웨어 Persist 

추가로 persist에도 많은 옵션들이 있습니다.

이중에 partialize 옵션에 대해서만 살펴보겠습니다.

사용법은 아래와 같습니다.

저는 이 기능을 스토리지에 저장할 수 없는 값을 가진 object를 저장하기 위한 우회방안으로 사용했습니다.

audiobuffer의 경우에는 storage에 저장할 수 없는 값이기 때문에 해당 객체를 그대로 persist에 넣으면 에러가 납니다. 

이럴 때 위 코드의 reset처럼 해당 값은 버리고 저장하는 방법으로 사용할 수 있습니다.

마무리

이번 글에서는 handy-snippets으로 시작하여 zustand의 여러 가지 미들웨어에 대한 사용법과 그 예시에 대해 살펴보았습니다.

요새에는 리액트에서 벗어나 플러터를 사용하고 있는데요.

아마도 다음글은 플러터 환경에서 사용하는 riverpod가 될 것 같네요. 리액트의 상태관리와 비교해서 글을 작성해 보도록 하겠습니다.

끝.