Zustand의 get/set 메서드 관련 질문 드립니다.

Question

안녕하세요! 강의 잘 듣고 있습니다. (3.2) Zustand 기본 사용법 1 강의의 9분 21초경 에서 궁금한 점이 생겨 질문드립니다.   강의에서 get 메서드는 store(객체) 전체를 반환 한다고 설명하셨습니다. 그리고 set 메서드는 인자로 전달된 객체의 프로퍼티만을 갱신 한다고 하셨는데요. 그런데 아래 코드처럼 보면, set 내부에서는 따로 get() 을 호출하지 않아도 count 값을 바로 참조해 업데이트하고 있습니다.   increase: () => { const count = get().count; // 여기서 store의 count 프로퍼티를 가져온다 set({ count: count + 1 }); // 그런데 여기서는 count를 직접 사용할 수 있다? }   제가 이해하기로는 store의 값을 변경하기 위해 프로퍼티를 참조할 때에도(여기서는 count: ) 먼저 get() 으로 현재 store의 참조를 얻은 뒤 수정해야 할 것 같은데, set({ count: count + 1 }) 처럼 직접 count를 갱신할 수 있는 이유 가 궁금합니다. 즉, set 은 내부적으로 get() 을 다시 호출해서 현재 store 상태를 알고 있는 건가요? 아니면 set 이 store 객체의 참조를 이미 가지고 있어서 가능한 건가요?

winterlood · Answer

안녕하세요 이정환입니다. 우선 set({ count: count + 1 }); 문에서 set 메서드에게 인수로 전달되는 {count: count + 1} 은 단순한 객체 리터럴 입니다. 이 라인 위에서 get() 메서드를 통해 count 변수에 현재 상태값을 할당해두었기 때문에, 이후에는 count를 일반 변수처럼 사용할 수 있는 것이죠. 즉, 이 시점에서 count는 더 이상 상태와 연결된 값이 아니라 단순한 숫자값(예: 3, 4, 5 등)입니다. 이 값을 바탕으로 count + 1을 계산한 후, 다시 객체 형태로 만들어 set에 전달하고 있는 겁니다.   앗! 그런데 혹시 질문의 취지가 “set 메서드 내에서 어떻게 정확히 count 프로퍼티를 변경할 수 있는지 알고 있느냐” 라는 걸까요? 만약 그렇다면 이는 combine 미들웨어의 기능이라고 이해하시면 좋을 것 같습니다. 우선 Zustand에서 상태를 업데이트할 때 사용하는 set() 함수는 전달된 객체를 현재 상태와 얕게 병합(shallow merge)합니다. 이때 주의할 점은, 기본적으로는 어떤 프로퍼티든 넣을 수 있다는 것입니다. 아래의 예제 코드를 살펴보시면 combine 미들웨어를 사용하지 않았을 때에는 set 메서드 내에서 구체적으로 어떤 프로퍼티들을 수정할 수 있는지 알지 못하기에 인수로 {a : 1} 과 같은 값을 전달해도 아무런 오류가 발생하지 않게 됩니다.   반면 아래처럼 combine 미들웨어를 사용하면 상황이 달라집니다. 아래의 예제 코드를 살펴보시면, 이번엔 combine 미들웨어를 사용했기 때문에 초기 상태가 명확하게 정의되고 타입이 고정됩니다. 이 상태에서 정의되지 않은 프로퍼티를 set()으로 전달하면 TypeScript 환경에서는 바로 오류를 발생시켜 줍니다. 즉, 상태 설계가 더 엄격해지고, 실수도 줄일 수 있게 되는 것이죠.

Jeong-ah Yoon · Answer

변수이름때문에 오해가 있는걸까요 increase: () => { const num = get().count; // 현재 store의 count 값 가져오기.. 객체를 가져와서 그 객체의 count라는 property의 값을 꺼내서 num에 저장 set({ count: num + 1 }); // num 를 1 증가시켜 객체의 property중 하나인 count값을 업데이트 함 } 이렇게 하면 이해가 쉬울까요.. 이거도 가능...(내부적으로 상태를알고있음) increase: () => set((state) => ({ count: state.count + 1 })) 저도 강의듣고 있어요