[React] 상태관리 라이브러리 - zustand

📍

zustand는 이번에 과제 진행하면서 사용해본 상태관리 라이브러리이다.

요즘 많이 사용되고 인기가 많은 라이브러리 중 하나라고 하는데 

확실히 써보니 쉽고 사용하기 간편했다. 

간단한 프로젝트 였기때문에 살짝만 써본 상태인데 더 자세히 공부해서 

확실히 활용해 보고 싶다.

 

---

 

GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React

 

1. zustand란?

• 'Zustand'는 독일어로 'State'를 뜻한다. 
• Zustand는 Jotai 및 React 스프링 개발자가 구축한 작고 가볍고 확장성이 뛰어난 상태 관리 라이브러리이다.

 

2. zustand의 특징

• Zustand는 상태 값이 변경될 때만 구성 요소를 렌더링한다. 즉, 구성 요소를 다시 렌더링하지 않고도 상태 변경을 처리 할 수 있는 경우가 많다. 
• 상태 관리는 중앙집중식이며 단순하게 정의된 작업을 통해 업데이트된다.
• Hook 기반의 API 제공한다.
• 컨텍스트를 사용할 필요가 없어 깨끗한 코드를 제공하므로 코드가 짧고 가독성이 높다.
• Flux  아키텍처를 단순화시켰다.
  • Flux 구조란 ? 어느 방향으로 데이터가 전달될지 알지 못하는(양방향 데이터흐름) MVC 패턴의 복잡성을 해소하기 위해, Flux 패턴을 통해 데이터가 단 방향으로만 변경될 수 있도록 만든 구조
  • Flux  패턴이란? 데이터를 중앙 집중형 스토어에 저장하고 Action을 통해 데이터를 조작하는 패턴
• 다중스토어로 스토어를 여러 개를 만들어 필요한 곳에 주입하여 사용할 수 있다.
• 상태와 액션의 구분이 없다.
• 간편하게 비동기 처리를 할 수 있다. (액션 메서드에서 직접 비동기를 처리함)

 

3. zustand 장점

• 가볍다 → 번들크기가 압도적으로 가볍다, recoil보다 6배 가볍다.
• 다운로드 수가 늘고있다.  → 유저가 많을수록 에러상황에 유연하게 대처할 수 있다.
• 쉬운 사용법!

 

4. zustand 사용하기

 

4.1 설치하기

• npm install zustand

 

4.2 store 생성하기

import { create } from 'zustand'

export const useYourStore = create((set)=>({
  yourState : 'VALUE',
  yourAction : (val) => set( (state) => ({ yourState : state.yourState }) )
}))

 

• 먼저 Store를 생성해서 그안에 원하는 값과 그 값을 업데이트 해주는 함수를 넣어준다.
• Store는 Hooks로 되어 있다.
• Store에는 객체, 함수 등 무엇이든 넣을 수 있다.
• store를 생성할 때는 create 메서드를 사용하여 선언한다.
• set 함수는 상태를 변경한다.

 

import { useYourStore } from "./store/MemoList";

const App = () => {
	const { yourState } = useYourStore();
    
	return (
		<>
			...
		</>
	);
}

 

 

📌

원형섭 강사님 실시간 강의

[Zustand] 5분만에 장점 + 사용법 까지 알아보자