Zustand

상태관리를 보다 간단하고 쉽게 할 수 있다.

import create from 'zustand';
import {devtools} from 'zustand/middleware"; //  디버깅

로 임포트를 해주고,

const useStore = create((set) => {
state_name: 0,
reducer_function() {
		set((state) => ({state_name: state.state_name + 1} ))
     },
     async data_fetching() {
     const response = await fetch('https://~~~');
     console.log(await response.json());
     }
}))

와 같이 store ( place to store state values, as well as reducers, and also data fetching can be done!!!!) 를 생성 해주고,

컴포넌트 내부에서 다음과 같이 사용 할 수 있다.

function App() {
const {state_name, reducer_function} = useStore();
return(
<div> <p> {state_name} </p>
<button onClick={() => {reducer_function}}> 버튼 </button>
</div>
);
}

리덕스 보다 백배 천배 간단하다...

to be continued...