zustand (4) 썸네일형 리스트형 전역 상태 관리, 정말 필요한가? 현대 프론트엔드 개발에서는 저역 상태 관리 도구의 사용이 일반적입니다.하지만 모든 프로젝트에서 전역 상태 관리가 필요하다고는 생각하지 않습니다. 이 글에서는 전역 상태 관리가 왜 필요한지, 언제 사용하는 것이 적합한지에 대해 소개해보려고 합니다.1. 전역 상태란? 📖전역 상태는 앱의 여러 컴포넌트가 공통으로 사용하는 데이터를 의미합니다. 예를 들어로그인된 사용자 정보쇼핑몰의 장바구니 데이터다크 모드와 같은 UI 설정 이러한 데이터는 앱 전반에서 공유되며, 여러 컴포넌트에서 접근하고 수정할 수 있어야 합니다. 2. 전역 상태 관리가 필요한 경우?📖전역 상태 관리가 필요한지 판단하려면 데이터의 범위와 복잡성을 고려해야 합니다. 데이터가 여러 컴포넌트에서 사용될 때예) 로그인된 사용자 정보헤더에서 사용자.. [트러블 슈팅] issue daily - 로그인 상태 새로고침 시 유지하기 로그인 상태 새로고침 시 유지하기를 `Supabase Auth`와 `Zustand`로 해결한 트러블 슈팅에 대해서 정리해 봤습니다.발생한 오류 🔥사용자가 로그인 후 마이페이지와 로그아웃 버튼이 정상적으로 보이지만, 페이지를 새로고침 하면 다시 로그인 버튼이 나타나는 문제가 있었습니다. 즉, 사용자의 로그인 상태가 새로고침 후에도 유지되지 않는 문제가 생겼습니다. 해결 과정 🔎문제 분석 새로고침 시 클라이언트 측에서 전역 상태가 초기화 돼 상태가 유지되지 않는 것을 발견했습니다. Supabase의 `auth.getUser()`를 사용해 서버 측에서 유저 정보를 가져올 수 있다는 점을 고려해 이 정보를 전역 상태로 관리해 새로고침 후에도 상태가 유지되도록 해야 했습니다. Supabase와 Zustand.. Zustand 동작 원리 알아보기 오늘은 zustand가 내부적으로 어떻게 동작하는 알아보기 위해 zustand github를 확인해 봤습니다. GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React🐻 Bear necessities for state management in React. Contribute to pmndrs/zustand development by creating an account on GitHub.github.com 파일이 타입스크립트로 작성되어 있는데 보기 편하기 위해 GPT의 힘을 빌려 자바스크립트로 변경했습니다. react.ts 📖`react.ts`파일의 전체 코드이고, React와의 연동을 해줍니다.import ReactExp.. Zustand 알아보기 Zustand 📖Zustand는 React 애플리케이션에서 상태 관리를 쉽게 할 수 있게 도와주는 가벼운 상태 관리 라이브러리입니다.설치yarn add zustand 사용 방법사용 방법은 이게 끝입니다! 정말 간단하죠!// src > store > bearsStore.jsimport { create } from "zustand";const useBearsStore = create((set) => ({ bears: 0, increasePopulation: () => set((state) => ({ bears: state.bears + 1 })), removeAllBears: () => set({ bears: 0 }),}));export default useBearsStore;// src > App... 이전 1 다음
