9/1 회고 - zustand와 'use client'

Next.js app router 환경에서 주스탠드 스토어를 만든다면 'use client'를 잊지 말자.

 

주스탠드로 만든 `authStore`의 전역 상태가 `Header`(클라이언트 컴포넌트)에 적용되지 않는 문제를 해결하며 알게 된 점이 있다.

 

주스탠드 스토어 자체는 'use client'가 없어도 서버 컴포넌트에서 선언하고 사용할 수 있지만, 사용자 인터랙션(클릭, 입력 등)에 의해 상태가 변경되거나, 그 상태가 UI에 반영되는 것은 클라이언트 사이드에서 일어나므로 이 경우에는 주스탠드 스토어에 'use client'를 명시해야 한다.

 

또한 주스탠드의 persist 옵션은 로컬스토리지에 전역 상태를 저장하므로 클라이언트 사이드에서만 사용이 가능하다. 이 또한 스토어 파일에 'use client'를 선언해야 하는 이유 중 하나였다.