zustand 너 정체가 뭐야...! 꽤나 멋있는 녀석이잖아...!

Louis·2024년 1월 5일

zustand

안녕하세요!

오늘은 새로운 라이브러리인 'zustand'에 대해 알아보겠습니다!

redux에 허덕이고 있을 때 zustand에 대해 조금 들어봤지만 공부할 타이밍이 안나왔는데

이번에 프로젝트를 진행하면서 zustand에 대해 공부를 해보고 직접 적용해보자! 라고 생각을 해서 팀원들에게 공유도 할겸 zustand에 대해 공부한 것들을 조금 정리 해보고자 이렇게 포스팅으로 찾아왔습니다!

그럼 바로 시작해보겠습니다!

먼저 zustand 어떻게 읽어요?

크흠.. 저도 사실 헷갈렸습니다 하지만 강의들을 찾아보니 한 외국인 분이 '쥬스탄드' 라고 읽는 것 같드라구요 그래서 저도 '쥬스탄드'라고 읽겠습니다

그럼 zustand가 뭐에요?

프론트엔드의 생명인 생태관리를 도와주며 여러가지로 나눠진 컴포넌트들에게 props drilling을 방지해주며 깔꼼하게 도와주는 라이브러리입니다

redux 친구는 조금 복잡하고 저 처럼 초보자가 봤을 때에는 접근성이 너무 높아 보였습니다

하지만 zustand인 독일에서 온 친구는 기본 코드가 복잡하지 않으며 적은 코드로도 충분히 상태변화를 전달해줄 수 있습니다

한 마디로 redux가 어려운 저에게는 '심 봤다' 라고 표현 할 수 있을 것 같습니다

+ 아 그리고 얼마나 간단하면 공식문서도 굉장히 짧게 되어있습니다

zustand 듣보잡아니에요?

예? 무슨 그런 무서운 말을 하십니까

이 귀여운 곰돌이 화 낼 수 있습니다 조심하십셔!

redux보단 사용자가 많지 않지만 jotal, mobx 보다는 높은 사용자를 유지하고 있습니다!

그리고 추가로

영상보러가기

우아한형제들에서도 zustand를 채택해서 사용하고 있다고 합니다!

오호 그러면 어떻게 사용하나요?

사용법은 정말 간단합니다!

zustand 홈페이지 바로가기

홈페이지에 들어가면 굉장히 친철하게도 곰돌이 잘 알려줍니다

Javascript로 이용할건지 TypeScript를 이용할건지 선택을 해서 코드를 가져오면 될 것 같습니다

조금 더 자세히 설명해주세요!

그럼요! 더 자세히 설명 도와드리겠습니다!

그러면 저는 TypeScript 기준으로 설명드리도록 하겠습니다!

저는 현재 요렇게 파일을 생성했습니다
src -> store -> Memo.tsx 형태로 컴포넌트를 구성했습니다

// Memo.tsx

import { create } from "zustand";

type Store = {
	count: number;
	inc: () => void;
	consoleOpen: () => void;
};

export const useStore = create<Store>()((set) => ({
	count: 1,
	inc: () => set((state) => ({ count: state.count + 1 })),
	consoleOpen: () => console.log("크흐...흑... 이게 zustand의 힘인가..."),
}));

요런식으로 구성을 헀습니다

간단하게 해석을 해보면 TypeScript는 Type이 무조건적으로 필요하기 때문에 Type을 적어주어야합니다 하지만 조금 더 간단하게 코드를 작성하기 위해서

type Store = {
	count: number;
	inc: () => void;
	consoleOpen: () => void;
};

선언을 해주면서

밑에 create옆에 형태로 적용해줍니다

그래서 사실

// Memo.jsx

import { create } from "zustand";


export const useStore = create()((set) => ({
	count: 1,
	inc: () => set((state) => ({ count: state.count + 1 })),
	consoleOpen: () => console.log("크흐...흑... 이게 zustand의 힘인가..."),
}));

JavaScript 기반이였다면 요렇게 표현해줄 수 있을 것 같습니다!!

그래서 여기서 핵심은

// Memo.jsx
export const useStore = create()((set) => ({
	count: 1,
	inc: () => set((state) => ({ count: state.count + 1 })),
	consoleOpen: () => console.log("크흐...흑... 이게 zustand의 힘인가..."),
}));

이 부분입니다!

// Memo.jsx
export const useStore = create()((set) => ({
	// 이 부분에 상태관리 하고 싶은 코드를 넣어주시면 될 것 같습니다
}));

그리고 원하는 컴포넌트로 돌아가서

// App.tsx
import React from "react";
import logo from "./logo.svg";
import "./App.css";
import { create } from "zustand";
import { useStore } from "./store/Memo";

function App() {
	const { count, inc, consoleOpen } = useStore();
	return (
		<div>
			<span>{count}</span>
			<button onClick={inc}>one up</button>
			<button onClick={consoleOpen}>console</button>
			<Result />
		</div>
	);
}

function Result() {
	const { count, consoleOpen } = useStore();
	return (
		<>
			<h3>결과를 보여줄게요 {count}</h3>
			<button onClick={consoleOpen}>설마 여기도 가능한가요?</button>
		</>
	);
}

export default App;