Zustand와 Immer의 결합

immer 설치:yarn add immer

---

 

• (2)-1. 직접 중첩된 상태를 업데이트 했을 때의 문제점배열이나 객체의 중첩된 상태를 업데이트할 때 불변성을 유지하지 않으면 상태 반영이 제대로 이루어지지 않아, 예상치 못한 오류가 발생할 수 있습니다. 다음 예제를 통해 중첩된 상태를 업데이트할 때 발생하는 문제를 살펴봅시다! 
• Zustand의 간편한 상태 업데이트 방식은 깊은 중첩 구조를 가지는 상태를 업데이트할 때 문제가 발생할 수 있습니다.

Mutable 메서드

❗ 불변성 유지 안됨

 

Mutable 메서드는 원본 데이터를 직접 수정하여 변경된 데이터를 반환합니다. 이 방법은 간단하지만, 상태 변화 추적이 어려워져 버그 발생 가능성이 높아집니다.

Immutable 메서드

 ✅ 불변성 유지 됨

 

원본 데이터를 변경하지 않고, 수정된 새로운 데이터를 반환합니다. 이를 통해 불변성을 유지하며, 상태 관리가 쉬워지고 예측 가능한 코드 작성을 돕습니다.

                                 

 

                                             

      순번                            특징                                         Mutable                                            Immutable

1	배열 추가	push	concat
2	배열 제거	pop	slice
3	배열 앞에 추가	unshift	[newItem, ...arr]
4	배열 앞에서 제거	shift	slice(1)
5	배열의 요소 변경	splice	slice + concat
6	배열 정렬	sort	Array.from + sort
7	배열 반전	reverse	slice().reverse()
8	배열 요소 제거	splice	filter
9	객체 속성 추가	직접 할당	Object.assign
10	객체 속성 제거	delete	Object.keys + reduce
11	객체 속성 변경	직접 할당	Object.assign
12	문자열 병합	직접 할당	concat

리스트가 추가 / 수정 되더라도 다른 요소에 의해 리렌더링이 일어나지 않는 한, UI에 반영이 안돼요 🙅

 

 

• (2)-2. immer를 이용해 해결하는 경우
  • Immer는 JavaScript에서 상태를 쉽게 변경할 수 있게 해주는 라이브러리입니다. 원본 데이터를 변경하지 않고도 마치 직접 수정하는 것처럼 코드를 작성할 수 있으며, Immer가 자동으로 불변성을 유지한 새 상태를 만들어줍니다.
  • 우리가 위에서 겪은 문제를 해결해 줄 key를 가지고 있는 라이브러리에요!

 

(3) 기타 유용한 패턴

• (3)-1. 선택적 상태 구독
• 상태의 특정 부분만 구독하여 성능 최적화 할 수 있어요! 사실, 우리는 이미 선택적으로 상태를 구독해 오고 있었어요 
•  
• (3)-2. 미들웨어 사용
•   persist, devtools는 zustand 내장이므로, 별도 설치할 필요가 없습니다 
• 로깅, 퍼시스턴스 등을 사용하면, 다양한 기능을 추가할 수 있어요. 우리는 persist를 이용해서 새로고침을 하더라도 데이터가 남아있도록 해볼게요
• 1. import { persist } from "zustand/middleware";
• 2. { name: "todos-storage", // 저장소 이름을 설정해요! // getStorage: () => sessionStorage, // localStorage가 아닌 곳에 저정하고 싶다면! }

이렇게 하면, 새로고침을 하더라도 localStorage에서 데이터를 관리하기 때문에 지속성을 유지할 수 있어요.