0910 TIL1. zustand

zustand 한입 하기

• 기존에 사용하던 RTK 이 너무 지저분하고 복잡하기때문에 다른 상태관리 라이브러리를 찾던중 여러사람들이 추천한 zustand를 사용해보자

상태관리란,

React는 단방향 바인딩이기 때문에 다른페이지 다른컴포넌트와의 상태를 공유하기 위해선 상위컴포넌트로 끌어올린후 다시 다른 컴포넌트로 보내줘야한다 ( 매우더러움 )
Props Drilling 현상이 생김.
상태관리를 사용하지 않았던 나는 두번째 팀프로젝트에서 프롭스 드릴링을 경험했고.. 무너지는 상태를(무너지는 내멘탈) 보고
상태관리 라이브러리의 중요성을 깨달았다.

기존 사용하던 Redux ToolKit와 같이 Zustand는

FLUX패턴을 기반(중앙 스토어 활용해서 여러 컴포넌트에 뿌려줌 / 액션을통해 데이터를 조작함 ) 으로 되어있다.

설치

npm i zustand
끝

사용

import {create} from "zustand";
끝

store 저장

const useStore = create(set =>({
초기값 :0,
함수들() {set(state =>({초기값: state.초기값 +}))}
})

store 활용

• 리액트 훅처럼 사용하면 된다. (매우편함)

function App() {
const {초기값,함수들} = useStore()
return (
<div className="App">
<p>{초기값}</p>
<button onclick={()=>함수들()}></button>
</div>
)
}

zustand는 response 도 받아온다.

``` useStore = create(set=>({
async getData() {
const res = await fetch(https);
const data = res.json();
}
})