Zustand란?

Zustand?

• React의 상태관리 라이브러리
• 독일어로 "상태"

 특징

• 특정 라이브러리에 엮이지 않음
• 한 개의 중앙에 집중된 스토어 구조 활용(상태 정의 및 사용이 단순)
• 상태 변경 시 불필요한 리랜더링 일으키지 않아 제어 용이(Context API와 차이점)
• React에 직접적인 의존 X(자주 바뀌는 상태 직접 제어 가능)
• 코드 양이 적음 👍👍👍

---

Context API를 사용하지 않는 이유

Context란?

 : 컴포넌트 트리 전체에 데이터 제공 가능해 의존성 주입에 효과적

   (일반적인 React는 단계마다 props를 넘겨주어야 함)

But

부모컴포넌트 쪽에 Context.Provider 컴포넌트 선언 후 Context로 전달되는 값이 변경될 때

해당 컴포넌트를 사용하는 모든 자손 컴포넌트가 리렌더링

즉

객체 형태로 Context를 관리하며 Context를 소비하는 컴포넌트가 많아질 시
불필요한 리렌더링 많이 발생 => 성능 문제

해결방법

1.  하나의 거대한 값을 가진 Context 대신 여럿으로 분리하기
2.  컴포넌트를 쪼개고 React.memo 활용하기
3.  useMemo 훅을 사용해 컴포넌트 렌더링 감싸기

---

Zustand

일원화된 상태 스토어를 활용한 방법으로 발행/구독 모델 기반

구독

 : 스토어의 상태 변경일 일어날 때 까지 리스너 함수 모아둠

발행

 : 상태가 변경되었을 시 등록된 리스너들에게 상태가 변경되었다고 알림

클로저*

 : 스토어를 생성하는 함수 호출시 활용

이점 

1. 상태의 변경, 조회, 구독 등의 인터페이스를 통해서만 스토어를 다룸
2. 실제 상태는 생명 주기 동안 의도치 않은 변경을 막음

---

간략한 Zustand 사용법

import create from 'zustand';

//set 함수를 통해서 상태 변경 가능
//리액트 컴포넌트에서 사용 가능한 useStore 훅 리턴
const useStore = create(set => ({ //create 함수를 이용해 상태와 상태를 변경하는 액션 정의
	bears : 0.
    increasePopulation : () => set(state => ({ bears : state.bears + 1})),
    removeAllBears : () => set({bears : 0})
}));

//컴포넌트에서 useStore 훅 사용시 
//셀렉터 함수 전달(스토어에서 어떤 형태로 꺼내올지 결정함)
//셀렉터 함수 전달 X => 스토어 전체 리턴

//상태를 꺼낸다
function BearCounter() {
	const bears = useStore(state => state.bears);
    return <h1>{bears} around here ...</h1>;
}

//상태를 변경하는 액션을 꺼낸다
function Controls() {
	const increasePopulation = useStore(state => state.increasePopulation);
    return <button onClick = {increasePopulation}>one up</button>;
}

Zustand 파헤치기

set, get, create 함수를 통해 내부 API를 인자로 전달 받음

상태 변경을 구독할 리스너를 Set으로 관리

상태 변경 - setState 함수

 : 현재 상태를 기반으로 새로운 상태를 리턴하는 함수, 아예 변경하려는 상태 값을 전달 받음

 

상태 구독 - subscribe 함수

 : 모든 상태나 일부 상태만 구독 가능

 

 

---

* 클로저

  : 함수가 선언될 시 그 주변 환경을 기억하는 것

 

 

 

 

 

다음 시간에 자세히,,,