[React] Zustand

Hyowmls·2024년 6월 12일
0
post-thumbnail

Zustand

매우 가볍고 사용하기 쉬운 상태관리 라이브러리

특징

  • 간결함
    간단한 API를 제공
    적은 설정 코드 및 적용 코드
  • 성능
    불필요한 리렌더링을 방지
    상태가 변경될 때, 해당 상태를 구독하고 있는 컴포넌트만 리렌더링
    ❗️구독(subscribe) - 상태의 변경을 감지하고, 해당 변경에 반응하는 컴포넌트만 업데이트하는 매커니즘을 의미

사용법

  • yarn add zustand 명령어로 라이브러리 설치
  • store 파일 생성
  • 적용

Immer

상태를 업데이트 할 때 불변성을 어기는 로직이어도 immer로 상태 반영을 할 수 있다

  • yarn add immer 명령어로 설치

persist

zustand의 미들웨어
로컬스토리지나 세션스토리지 같은곳에 데이터를 저장하여 새로고침을 해도 데이터가 유지된다

immer를 감싸주고 name: '저장소 이름'을 추가해준다

0개의 댓글