Zustand 찍먹 후기

Taesoo Kim·2023년 3월 30일
1

React101

목록 보기
8/8

최근 토이 프로젝트에서 어떻게 전역변수를 관리할까 고민하다가 한 꼼수?를 발견해서 야무지게 사용했었다. 바로 swr을 이용한 방법인데, 이게 원래는 데이터 fetching 훅인데, 편법으로 로컬 스토리지에서 데이터를 캐싱하는 법이 있다. 어찌되었든 swr은 기본적으로 fetching을 해주는 훅이기에, state들을 전역 상태처럼 관리할 수 있게 된다. 하지만 몇번 써보니, 리팩토링 하는것도 불편하고, 결국은 원래 의도와 맞지 않게 사용하는 것이여서 다른 전역상태 관리 모듈을 찾아보고 있었는데, zustand라는 것을 보게 되었고, 잠깐 어떻게 쓰는지 찾아보게 되었다.

Why not Redux?

보통 전역상태 관리 모듈은 리덕스를 가장 많이 쓰는것으로 알고 있다. 하지만 나는 그렇게 끌리지 않는다. 처음 리액트를 배울때는 context랑 redux를 쓰라고 배우긴 했는데, 조금 복잡하게 느껴졌다. 코드량도 무시할 수 없지 않다. 그래서 swr로 살짝 피신해 있던 것이다ㅎㅎ(아직도 솔직히 reducer랑 flow는 설명 못하겠다!) 그래서 조금 더 간단한 라이브러리가 있다고해서 찾아본것이 바로 zustand가 되겠다.
조금 더 파헤쳐보자면, zustand는 redux와 달리 비동기 함수들에 독립적이다. 즉, redux는 thunk니 saga니 비동기 처리를 위한 라이브러리가 따로 있지만, zustand는 그렇지 않다는거.

Dive into Zustand

zustand는 create 함수 안에 상태와 액션을 모두 담아서 관리한다. 간단한 카운터 하나 만들어서 살펴보자.

// ./hooks/useStore.js

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

count라는 상태와, 상태에 해당하는 액션을 만들어주면 된다.

// App.js

import './App.css';
import Layout from './components/Layout';
import Billboard from './components/Billboard';
import Button from './components/Button';
import React from 'react';

function App() {

  return (
    <Layout>
      <Billboard></Billboard>
      <div className='flex flex-row space-x-4'>
        <Button title="increment by 1"></Button>
        <Button title="decrement by 1"></Button>
      </div>
    </Layout>   
  );
}

export default App;
// ./components/Button.js

import React from 'react';
import useStore from '../hooks/useStore';

const Button = ({title}) =>{
    let method
    if (title === 'increment by 1'){
        method = useStore(state => state.increment);
    }
    else{
        method = useStore(state => state.decrement);
    }
    return(
        <button className="button" onClick={method}>{title}</button>
    );
}

export default Button;

위에는 app.js이고, 아래는 버튼 컴포넌트이다. App.js 에서는 필요한 컴포넌트를 다 담고있고, 빌보드에는 count상태를 보여주는 div가, 버튼에는 더하기 빼기를 해줄 버튼이 있다. 버튼에서 볼 수 있듯, 그저 useStore 훅을 불러와서, 액션을 뽑아오고, 실행만 시켜주면 되겠다.

What's next?

zustand는 간결하고 직관적인 문법에 강점이 있는듯 하다. 공식문서도 체감상 다른 라이브러리보다 짧고 간결하다고 느껴진다. 물론, 이 뒤에서 복잡하게 무언가 일어나고 있기는 하지만, 당장에 그런 이론들을 몰라도 직관적으로 사용 할 수 있는것 같다. 아마 다음에는 zustand의 이론적 배경이 되는 Pub-Sub 방법에 대해 포스팅 하지 않을까 싶다.

더 읽을거리

zustand 구동 원리: https://ui.toast.com/posts/ko_20210812
Pub-Sub: https://www.rinae.dev/posts/why-every-beginner-front-end-developer-should-know-publish-subscribe-pattern-kr

Reference

https://docs.pmnd.rs/zustand/getting-started/introduction
https://blog.openreplay.com/zustand-simple-modern-state-management-for-react

profile
SailingToTheMoooon

0개의 댓글