Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- plugin
- GIT
- mapreduce
- xPlatform
- vaadin
- JavaScript
- Spring
- Java
- tomcat
- IntelliJ
- react
- hadoop
- Kotlin
- Express
- table
- MSSQL
- window
- R
- SQL
- Eclipse
- mybatis
- Python
- SSL
- es6
- Android
- NPM
- Sqoop
- SPC
- 공정능력
- 보조정렬
Archives
- Today
- Total
DBILITY
react state-management zustand 본문
반응형
https://github.com/pmndrs/zustand
위 github page를 보고 기초만 해봤다. 그림1처럼 count state에 대해 증가/감소/초기화로 세개의 이벤트를 만들고 실행해보니 잘 된다.뭐 이렇게 쉽지? 뒤로가면 어려워지겠지.
설치부터 하고
C:\Dev64\workspace\project> npm i zustand@3.7.1
다음은 테스트 소스로 create로 store를 생성하고 useStore로 꺼내 쓸 수 있다.
set으로 현재 state를 받아 새로운 state를 반환하는 function을 parameter로 받는다. 말이 좀 이상하네.
그냥 현재 state를 argument로 변경된 state를 return하는 function을 parameter로 작성한다.정도? 말이 어렵네.
/* eslint-disable */
import logo from './logo.svg';
import './App.css';
import create from "zustand";
const useStore = create(set => ({
count: 0,
increase: () => set(state => ({count: state.count + 1})),
decrease: () => set(state => ({count: state.count - (state.count >= 1 ? 1 : 0)})),
reset: () => set({count: 0})
}));
function App() {
return (
<div className="App">
<Counter/>
<br/>
<br/>
<br/>
</div>
);
}
function Counter() {
const count = useStore(state => state.count);
const increase = useStore(state => state.increase);
const decrease = useStore(state => state.decrease);
const reset = useStore(state => state.reset);
return (
<>
<h1>Count : {count}</h1>
<button onClick={increase}>increase</button>
{` `}
<button onClick={decrease}>decrease</button>
{` `}
<button onClick={reset}>reset</button>
</>
)
}
export default App;
useStore 사용시 다음과 같이 한번에 할당해 사용할 수 있다. 이 경우 state변경에 모든 component가 re-rendering된다.
const state = useStore();
반응형
'front-end & ui > react' 카테고리의 다른 글
react To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. (0) | 2022.04.05 |
---|---|
react react-hook-form (0) | 2022.03.24 |
react spring boot multipart upload (0) | 2022.02.22 |
react axios example (0) | 2022.02.16 |
react eslint message disable (0) | 2022.02.16 |
Comments